/* ---------- スタート画面「きょうの よてい」（10/31） ----------
   はじめる前の画面を作り直した（デザインレビュー 10/31 の 2つとも、
   「はじめる前に きょう何をするか が分からない」「関門が長い」が上位）。
   style.css はさわらず、ここで #screen-start と しゅくだいの質問画面だけを
   上書きする。問題画面（#screen-play 以下）には一切かからない。

   色は白地で 4.5:1 以上になるものだけ使う:
     本文 #2b2b2b ／ 補足 #5c5c5c（6.4:1）／ ごほうびの文字 #9a6400（5.0:1）
     主ボタン: #ff8c42 の上に こい茶 #3b1d00（6.7:1。白文字だと 2.3:1 で読めない）
     つづきから: #1e7a3a の上に 白（5.4:1）*/

#screen-start {
  --st-ink: #2b2b2b;
  --st-muted: #5c5c5c;
  --st-line: #e4dccf;
  --st-paper: #ffffff;
  --st-bg: #fffaf3;
  --st-accent: #ff8c42;
  --st-accent-ink: #3b1d00;
  --st-accent-deep: #e96f1f;
  --st-accent-soft: #fff3e8;
  --st-reward: #9a6400;
  --st-good: #1e7a3a;
  --st-good-soft: #e9f8ee;
  --st-warn-ink: #7a4a12;
  --st-warn-soft: #fff6e8;
  background: var(--st-bg);
  color: var(--st-ink);
  position: relative;
}

/* .screen は flex 縦並び・中央寄せ。スタートだけは 上（見出し）・中（よてい と
   はじめる）・下（きろく・こうかん）の3段の grid にする。 */
#screen-start.active {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: space-between;
  align-items: stretch;
  justify-items: stretch;
  gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

#screen-start .rt {
  font-size: 0.45em;
  font-weight: 500;
  color: var(--st-muted);
}
#screen-start .ruby { ruby-position: over; }

/* ---------- 上の段: あいさつ・日付 ／ ためた時間・連続・⚙ ---------- */

.st-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.st-greeting {
  font-size: clamp(1.4rem, 3.4vmin, 1.9rem);
  font-weight: 800;
  line-height: 1.3;
}

.st-date {
  font-size: clamp(0.95rem, 2vmin, 1.1rem);
  color: var(--st-muted);
  font-weight: 700;
  margin-top: 2px;
}

.st-app-name {
  font-size: 0.8rem;
  color: var(--st-muted);
  font-weight: 700;
  margin-top: 4px;
}

.st-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ためた時間と 連続日数は 丸いチップ。style.css の .points-badge / .streak-badge
   （d6960f = 2.5:1）より濃い字にする。 */
#screen-start .points-badge,
#screen-start .streak-badge {
  background: var(--st-paper);
  border: 3px solid var(--st-line);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: clamp(1rem, 2.2vmin, 1.2rem);
  font-weight: 800;
  line-height: 1.3;
  min-height: 0;
}
#screen-start .points-badge { color: var(--st-reward); }
#screen-start .streak-badge { color: #c2410c; }
#screen-start .streak-badge:empty { display: none; }

/* おうちの人の入口。子どもの目線から外して、右上の小さな ⚙ にする（10/31）。
   PIN のしくみは parent.js のまま（id は変えていない）。48px は押せる最小。 */
.st-gear {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--st-line);
  background: var(--st-paper);
  color: #8a8378;
  font-size: 1.3rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
.st-gear:active { filter: brightness(0.9); }

/* ---------- 中の段: 左に よてい・コース・はじめる、右に かくにん・ロック・カレンダー ---------- */

.st-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: center;
  min-height: 0;
}

.st-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.st-h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vmin, 1.5rem);
  font-weight: 800;
  color: var(--st-muted);
}

/* 科目の道。1周の順（startSet と同じ computeLapBlocks）を、アイコン＋名前で。 */
.st-path {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 10px;
  max-width: 100%;
}

.st-stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: clamp(84px, 11vmin, 112px);
}

.st-stop-dot {
  width: clamp(56px, 8.5vmin, 76px);
  height: clamp(56px, 8.5vmin, 76px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: clamp(1.6rem, 4.2vmin, 2.3rem);
  background: var(--st-paper);
  border: 3px solid var(--st-line);
  line-height: 1;
}

.st-stop-name {
  font-size: clamp(0.95rem, 2vmin, 1.15rem);
  font-weight: 800;
  color: var(--st-ink);
  text-align: center;
  line-height: 1.25;
}

.st-stop-step {
  font-size: 0.75rem;
  color: var(--st-muted);
  font-weight: 700;
}

/* 道の つなぎ目。stop のあいだだけに出る。 */
.st-link {
  width: clamp(14px, 2.2vmin, 26px);
  height: 5px;
  border-radius: 3px;
  background: var(--st-line);
  margin-top: calc(clamp(56px, 8.5vmin, 76px) / 2 - 2px);
}

.st-path-note {
  font-size: clamp(0.9rem, 1.9vmin, 1rem);
  color: var(--st-muted);
  font-weight: 700;
  margin-top: -4px;
}

/* コースの選択は session.js が作る（分数・ごほうびは変えていない）。
   板を大きく、選ばれているものだけ色がつく。 */
#screen-start .set-size-picker {
  margin-top: 4px;
  gap: 8px;
}
#screen-start .picker-label {
  color: var(--st-muted);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vmin, 1.1rem);
}
#screen-start .picker-option {
  min-height: 64px;
  min-width: clamp(6em, 15vmin, 8em);
  border: 3px solid var(--st-line);
  color: var(--st-muted);
  background: var(--st-paper);
  border-radius: 18px;
}
#screen-start .picker-option.selected {
  border-color: var(--st-accent);
  background: var(--st-accent-soft);
  color: var(--st-accent-ink);
}
#screen-start .picker-note { color: var(--st-muted); }
#screen-start .picker-option.selected .picker-note { color: #b4500a; }

/* ---------- はじめる ---------- */

.st-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}

#screen-start .big-button.st-primary {
  min-height: 76px;
  min-width: min(100%, 360px);
  padding: 0.35em 1.6em;
  font-size: clamp(1.8rem, 5vmin, 2.5rem);
  font-weight: 900;
  color: var(--st-accent-ink);
  background: var(--st-accent);
  box-shadow: 0 6px 0 var(--st-accent-deep);
  line-height: 1.2;
}
#screen-start .big-button.st-primary:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--st-accent-deep);
  filter: none;
}
#screen-start .big-button.st-primary .rt { color: #5a3a1a; }

/* つづきから が出ているときは、そちらが主（緑）。はじめる は一段小さく。 */
#screen-start .resume-button.st-primary {
  color: #fff;
  background: var(--st-good);
  box-shadow: 0 6px 0 #14562a;
}
#screen-start .resume-button.st-primary .rt { color: #d9f2e0; }
#screen-start .resume-button.shown { display: inline-block; }
#screen-start .resume-button.shown + #btn-start {
  min-height: 56px;
  min-width: 0;
  font-size: clamp(1.2rem, 3vmin, 1.5rem);
  background: var(--st-paper);
  color: var(--st-accent-ink);
  border: 3px solid var(--st-accent);
  box-shadow: none;
}
#screen-start .resume-button.shown + #btn-start:active { transform: none; filter: brightness(0.95); }

.st-reward {
  font-size: clamp(1.05rem, 2.4vmin, 1.3rem);
  font-weight: 800;
  color: var(--st-reward);
  text-align: center;
  line-height: 1.5;
}
.st-reward small {
  display: block;
  font-size: 0.8em;
  color: var(--st-muted);
  font-weight: 700;
}

/* ---------- 右の列: しゅくだいの かくにん・ロック・カレンダー・ルール ---------- */

.st-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* しゅくだいの かくにん（1日1回、平日だけ）。はじめる を押す前に、
   ここで答える。全部答えたら消える。問いの中身・記録のしかたは前の
   画面（#screen-homework・#screen-hw-check）と同じ。 */
.hw-card {
  display: none;
  width: 100%;
  max-width: 420px;
  background: var(--st-paper);
  border: 3px solid var(--st-accent);
  border-radius: 22px;
  padding: 14px 16px 16px;
  box-shadow: 0 4px 0 #ffd9b3;
}
.hw-card.shown { display: block; }

.hw-card-step {
  font-size: 0.85rem;
  color: var(--st-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.hw-card-q {
  font-size: clamp(1.15rem, 2.6vmin, 1.4rem);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 4px;
}

.hw-card-note {
  font-size: 0.9rem;
  color: var(--st-muted);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}

.hw-card-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- 3択のボタン（カードと、前からの質問画面の両方） ----------
   答えの意味が色で分かるように: ⭕️＝緑の枠、🙅＝灰色、「ない／行ってない」＝点線。
   どれも 48px 以上。 */
.hw-card .hw-option,
.screen .hw-option {
  min-height: 52px;
  padding: 0.55em 1em;
  border: 3px solid #cfc7ba;
  background: #fff;
  color: #2b2b2b;
  border-radius: 16px;
  text-align: left;
  line-height: 1.35;
}
.hw-card .hw-option { font-size: clamp(1rem, 2.3vmin, 1.2rem); }
.hw-card .hw-option[data-answer="done"],
.screen .hw-option[data-answer="done"],
.hw-card .hw-option[data-answer="yes"],
.screen .hw-option[data-answer="yes"] {
  border-color: #2e9e4f;
  background: var(--st-good-soft, #e9f8ee);
}
.hw-card .hw-option[data-answer="not_done"],
.screen .hw-option[data-answer="not_done"],
.hw-card .hw-option[data-answer="no"],
.screen .hw-option[data-answer="no"] {
  border-color: #cfc7ba;
  background: #f6f3ef;
}
.hw-card .hw-option[data-answer="no_gakudo"],
.screen .hw-option[data-answer="no_gakudo"],
.hw-card .hw-option[data-answer="none"],
.screen .hw-option[data-answer="none"] {
  border-style: dashed;
}

/* 前からの質問画面（はじめる を先に押したときの道）。説明は 1行。 */
#screen-homework .hw-honest,
#screen-hw-check .hw-honest,
#screen-bad-day .hw-honest {
  color: #5c5c5c;
}
#screen-homework .hw-rule { color: #7a4a12; }

/* ロック・あずかり の知らせ。style.css の #a8886a は 2.6:1 で読めなかった。 */
#screen-start .hw-banner {
  margin: 0;
  max-width: 420px;
  width: 100%;
  color: var(--st-warn-ink);
  background: var(--st-warn-soft);
  border-color: #f4c89a;
  font-size: clamp(0.9rem, 1.9vmin, 1rem);
}

#screen-start .update-banner { margin: 0; }

/* 7日のカレンダー。点 15px → 丸 26px に、曜日つき。 */
#screen-start .calendar-strip {
  margin: 0;
  gap: 8px;
}
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cal-day-label {
  font-size: 0.75rem;
  color: var(--st-muted);
  font-weight: 700;
}
.cal-day.today .cal-day-label { color: #b4500a; }
#screen-start .cal-dot {
  width: 26px;
  height: 26px;
  border-width: 3px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  color: #fff;
  font-weight: 800;
}
#screen-start .cal-dot.completed::after { content: "✓"; }

/* ごほうびの予告は小さく、2行以内。 */
#screen-start .bonus-banner {
  margin: 0;
  max-width: 420px;
  color: #2b5f8f;
  font-size: 0.85rem;
  padding: 6px 12px;
}

/* ルールは たたんでおく。開いたら、前はスタート画面と質問画面に散って
   いた説明が ここにまとまって出る。 */
.st-rules {
  max-width: 420px;
  width: 100%;
  font-size: 0.9rem;
  color: var(--st-muted);
}
.st-rules summary {
  cursor: pointer;
  font-weight: 800;
  padding: 8px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  list-style: none;
  color: var(--st-muted);
}
.st-rules summary::-webkit-details-marker { display: none; }
.st-rules summary::before { content: "▸ "; }
.st-rules[open] summary::before { content: "▾ "; }
.st-rules-body {
  background: var(--st-paper);
  border: 2px solid var(--st-line);
  border-radius: 14px;
  padding: 10px 14px;
  line-height: 1.7;
  font-weight: 700;
}
.st-rules-body div + div { margin-top: 4px; }

/* ---------- 下の段: きろく・こうかん は 56px のタイル ---------- */

#screen-start .start-links {
  margin: 0;
  gap: 14px;
}
#screen-start .link-button.st-tile {
  min-height: 56px;
  min-width: 180px;
  font-size: clamp(1rem, 2.2vmin, 1.2rem);
  color: #8a4a10;
  background: var(--st-paper);
  border: 3px solid var(--st-line);
  padding: 0.4em 1.2em;
  margin: 0;
}
#screen-start .link-button.st-tile:active { background: var(--st-accent-soft); }

#screen-start .app-version {
  position: absolute;
  top: auto;
  right: auto;
  bottom: max(6px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  color: #aaa;
}

/* ---------- たて画面・せまい画面は 1カラム ----------
   .st-plan と .st-side を display: contents でほどいて、順番を組みなおす:
   よてい → しゅくだいの かくにん → 長さ → はじめる → ロック・カレンダー・ルール。
   かくにん は「はじめる」の前に答えるものなので、ボタンより上に置く。 */
@media not all and (min-width: 900px) and (orientation: landscape) {
  .st-main { justify-items: center; align-content: start; gap: 12px; }
  .st-plan, .st-side { display: contents; }
  #st-plan-title { order: 1; }
  #st-path { order: 2; }
  #st-path-note { order: 3; }
  #hw-card { order: 4; margin: 6px 0; }
  #screen-start .set-size-picker { order: 5; }
  .st-cta { order: 6; }
  #screen-start .hw-banner { order: 7; }
  #screen-start .update-banner { order: 8; }
  #screen-start .calendar-strip { order: 9; margin-top: 8px; }
  #screen-start .bonus-banner { order: 10; }
  .st-rules { order: 11; }
}

/* ---------- よこ画面（iPad 1180×820 など）は 2カラム ---------- */
@media (min-width: 900px) and (orientation: landscape) {
  .st-main {
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    align-items: center;
    gap: 24px;
  }
  .st-side { align-items: stretch; }
  .hw-card, .st-rules, #screen-start .hw-banner, #screen-start .bonus-banner { max-width: none; }
  #screen-start .calendar-strip { justify-content: center; }
}

/* 右の列が空のときは 1カラムでよい（休日で ロックも無い日）。 */
@media (min-width: 900px) and (orientation: landscape) {
  .st-main.st-side-empty { grid-template-columns: minmax(0, 1fr); }
  .st-main.st-side-empty .st-side { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
  .st-main.st-side-empty .st-rules { width: auto; }
  /* 開いたら 1行まるごと使う（画面は縦にスクロールできる）。 */
  .st-main.st-side-empty .st-rules[open] { width: 100%; }
  .st-main.st-side-empty .st-rules[open] summary { justify-content: center; }
  .st-main.st-side-empty .st-rules-body { max-width: 640px; margin: 0 auto; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  #screen-start .big-button.st-primary:active { transform: none; }
}

/* ---------- iPhone（10/31） ----------
   「UIバグりまくってる」の直し。ここから下は iPhone だけに効く:
   たては (max-width: 700px)、よこは (max-height: 500px)。iPad は たて 820×1180・
   よこ 1180×820 なので どちらにも入らず、上の見た目は そのまま。

   起きていたこと（390×844）: #screen-start は grid だが 列の幅を決めていない
   ので、列が中身の幅（カードの 420px）までしか広がらず、見出しと 🎮 の板が
   窮屈に折り返していた。科目の道は 2段に割れて つなぎ目の棒が端に余り、
   はじめる は カードの下に押し出されて スクロールしないと届かなかった。
   バージョンの表示（absolute）は カレンダーに重なっていた。 */
@media (max-width: 700px), (max-height: 500px) {
  #screen-start.active {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  /* 上の段: あいさつと日付を 1行に、その下に 🎮 の板と ⚙ を 1行に。
     アプリ名は 小さい画面では出さない（見出しの行を 1行に収めるため）。 */
  .st-head { flex-direction: column; align-items: stretch; gap: 6px; }
  .st-hello { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 0; min-width: 0; }
  .st-greeting { font-size: 1.3rem; line-height: 1.3; }
  .st-date { font-size: 0.9rem; margin-top: 0; }
  .st-app-name { display: none; }
  .st-head-right {
    width: 100%;
    justify-content: flex-start;
    gap: 6px 8px;
  }
  #screen-start .points-badge {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    padding: 5px 12px;
    border-width: 2px;
  }
  .st-gear { order: 2; width: 44px; height: 44px; font-size: 1.15rem; }
  #screen-start .streak-badge {
    order: 3;
    font-size: 0.9rem;
    padding: 4px 12px;
    border-width: 2px;
  }

  .st-main { gap: 10px; }
  .st-h2 { font-size: 1.1rem; }

  /* 科目の道は 1段の帯。丸を小さくして 横幅に全部入れる。つなぎ目の棒は
     端に余るので出さない（順番は 左→右 と 番号で分かる）。 */
  .st-path {
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    align-items: flex-start;
  }
  .st-link { display: none; }
  .st-stop { flex: 1 1 0; min-width: 0; width: auto; gap: 3px; }
  .st-stop-dot {
    width: clamp(34px, 9.5vw, 44px);
    height: clamp(34px, 9.5vw, 44px);
    font-size: clamp(1.05rem, 5vw, 1.4rem);
    border-width: 2px;
  }
  .st-stop-name { font-size: 0.8rem; line-height: 1.35; overflow-wrap: anywhere; }
  .st-stop-step { font-size: 0.68rem; }
  .st-path-note { font-size: 0.8rem; margin-top: 0; text-align: center; line-height: 1.4; }

  /* コースの板は 3枚で 横いっぱい。 */
  #screen-start .set-size-picker { margin-top: 0; gap: 6px; width: 100%; }
  #screen-start .picker-label { font-size: 0.9rem; }
  #screen-start .picker-options { width: 100%; gap: 8px; justify-content: center; }
  #screen-start .picker-option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    padding: 0.4em 0.4em;
    border-width: 2px;
    border-radius: 14px;
  }

  /* はじめる は 横いっぱい、ごほうびの見込みは 1行ずつ小さく。 */
  .st-cta { gap: 6px; margin-top: 0; }
  #screen-start .big-button.st-primary {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    padding: 0.3em 0.8em;
    font-size: 1.7rem;
  }
  #screen-start .resume-button.shown + #btn-start { min-height: 50px; font-size: 1.15rem; }
  .st-reward { font-size: 0.95rem; line-height: 1.4; }
  .st-reward small { font-size: 0.85em; }

  /* しゅくだいの かくにん は 横いっぱい、少し詰める。 */
  .hw-card {
    max-width: none;
    padding: 10px 12px 12px;
    border-width: 2px;
    border-radius: 16px;
    box-shadow: 0 3px 0 #ffd9b3;
  }
  .hw-card-step { font-size: 0.78rem; margin-bottom: 4px; }
  .hw-card-q { font-size: 1.05rem; line-height: 1.4; }
  .hw-card-note { font-size: 0.78rem; line-height: 1.45; margin-bottom: 8px; }
  .hw-card-options { gap: 6px; }
  .hw-card .hw-option { min-height: 46px; font-size: 0.95rem; padding: 0.45em 0.8em; border-width: 2px; border-radius: 14px; }

  #screen-start .hw-banner,
  #screen-start .bonus-banner,
  .st-rules { max-width: none; }
  #screen-start .hw-banner { font-size: 0.85rem; padding: 8px 12px; }
  #screen-start .bonus-banner { font-size: 0.8rem; }
  #screen-start .calendar-strip { margin-top: 2px; gap: 6px; }
  #screen-start .cal-dot { width: 24px; height: 24px; }
  .st-rules { font-size: 0.85rem; }

  /* 下の段: 2枚のタイルで 横いっぱい。 */
  #screen-start .start-links { gap: 8px; flex-wrap: nowrap; width: 100%; }
  #screen-start .link-button.st-tile {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    font-size: 0.95rem;
    padding: 0.35em 0.6em;
    border-width: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* バージョンは 重ねずに、いちばん下の行に。 */
  #screen-start .app-version {
    position: static;
    text-align: center;
    font-size: 0.7rem;
    line-height: 1;
    padding-top: 2px;
  }
}

/* iPhone たて（390×844・375×667）。Safari の見える範囲は 664px ほどしかないので、
   よてい → コース → はじめる までを 上に詰め、カレンダー・ルールは下にスクロール。
   かくにん のカードが出る日は、答えたら消えて はじめる が上がってくる。 */
@media (max-width: 700px) and (orientation: portrait) {
  .st-main { gap: 8px; }
  #hw-card { margin: 2px 0; }
}

/* iPhone よこ（844×390・667×375）。左に よてい・コース・はじめる、右に
   かくにん・ロック・カレンダー・ルール の 2カラム。上のブロックの
   display: contents（1カラム用）を戻す。 */
@media (max-height: 500px) and (orientation: landscape) {
  #screen-start.active { gap: 6px; }
  .st-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
  }
  .st-head-right { width: auto; flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; }
  #screen-start .points-badge { flex: 0 1 auto; }
  #screen-start .streak-badge { order: 1; }
  .st-gear { order: 3; width: 40px; height: 40px; }

  .st-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    align-content: start;
    justify-items: stretch;
    gap: 6px 14px;
  }
  .st-plan, .st-side { display: flex; }
  .st-plan { gap: 6px; }
  .st-side { gap: 8px; align-items: stretch; }
  .st-path-note { display: none; }
  .st-stop-dot {
    width: clamp(32px, 8vh, 40px);
    height: clamp(32px, 8vh, 40px);
    font-size: clamp(1rem, 4.2vh, 1.3rem);
  }
  .st-stop-step { display: none; }
  #screen-start .picker-option { min-height: 50px; }
  #screen-start .big-button.st-primary { min-height: 56px; font-size: 1.5rem; }
  .st-reward { font-size: 0.85rem; line-height: 1.5; }
  .st-reward small { display: inline; margin-left: 0.5em; }
  #screen-start .link-button.st-tile { min-height: 42px; }
  #screen-start .start-links { max-width: 480px; margin: 0 auto; }
}

/* ---------- 画面ぜんぶを覆う お知らせ（notice.js・連打・オフライン） ----------
   position: fixed で 中身を center にしているので、iPhone よこ（高さ 340px
   ほど）では 上下にはみ出して「わかった」が どこからも押せなかった。
   はみ出すときは 上から並べて スクロールできるようにする（入るときは
   いままでどおり まん中）。iPad では 入るので 見た目は変わらない。 */
.notice-overlay,
.offline-overlay {
  justify-content: safe center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.notice-overlay > *,
.offline-overlay > * { flex-shrink: 0; }
@media (max-width: 700px), (max-height: 500px) {
  .notice-overlay, .offline-overlay { gap: 12px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .notice-emoji, .offline-emoji { font-size: 2.6rem; }
  .notice-message, .offline-message { line-height: 1.7; }
  .notice-overlay .big-button, .offline-overlay .big-button { font-size: 1.3rem; padding: 0.6em 1.8em; }
}

/* けいこく（#hw-warning）: iPhone よこ では 上のテープの下から 読めるように、
   本文は上から並べる（中身が入るときは まん中のまま）。 */
.hw-warning-body { justify-content: safe center; }
@media (max-height: 500px) {
  .hw-warning-tape { height: 16px; background-size: 36px 16px; }
  .hw-warning-siren { font-size: 2.4rem; }
  .hw-warning-title { font-size: 2rem; }
  .hw-warning-sub { font-size: 1.1rem; }
}

/* 説明と見込みを出さなくなった欄は、すき間ごと消す（10/31）。 */
#screen-start .st-reward:empty,
#screen-start .st-path-note:empty,
#st-path-note:empty { display: none; }

/* 科目の名前は、ふりがなの有る無しで高さが変わらないよう、上に よみの分の
   すき間を全員ぶん とっておく（「割り算」だけ下にずれた。10/31）。 */
#screen-start .st-stop-name {
  min-height: 2.1em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* コースの板は「🎮 約◯分」を消したので、分の数字を まん中に。 */
#screen-start .picker-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* おうちの人の入口を「🔒 おうちの人」と書いたボタンにする（保護者 10/31:
   小さな ⚙ では どこから入るか分からなかった）。🔒 で、子どもには
   「ここは おうちの人の場所」と分かる。PIN のしくみは そのまま。 */
#screen-start .st-gear.st-parent-entry {
  width: auto;
  height: 48px;
  border-radius: 999px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5c5c5c;
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}
#screen-start .st-parent-ico { font-size: 1.05rem; }
@media (max-width: 700px) {
  #screen-start .st-gear.st-parent-entry { width: auto; height: 44px; padding: 0 12px 0 10px; font-size: 0.85rem; gap: 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #screen-start .st-gear.st-parent-entry { width: auto; height: 40px; padding: 0 12px 0 10px; font-size: 0.85rem; }
}