/* =====================================================================
   Typa — style.css
   =====================================================================
   デザインの 決めごと

   1. ゲームらしい 楽しさは「色・形・すこしの 動き」で つくり、
      かざり（キラキラ・絵文字・にぎやかな 背景）は 足しません。
      画面の 中で いちばん 目立つのは、いつも **お題の 文字** です。
   2. ユニバーサルデザイン
      ・文字は UD フォントを 優先し、行間を 広くとります
      ・色だけで 意味を つたえません（正誤は 形と ことばでも 出します）
      ・タップできる ところは 44px 以上
      ・キーボード操作の フォーカスが はっきり 見えます
      ・「動きを へらす」設定の 端末では アニメーションを 止めます
   3. どの 端末でも 本文が 広い
      ・せまい 画面では 上のバーを 出さず、下の ナビゲーションバーだけ
      ・下部バーと iPhone の ホームバーの ぶんは safe-area で よけます

   ---------------------------------------------------------------------
   見た目の かたち（manabi-quest と おなじ 家族に します）

   おなじ 学校で つかう manabi-quest に そろえて、「ポップだけれど
   すっきり」を ねらいます。前の 版は ふとい すみ色の わくで かこむ
   やりかたでしたが、かわいい かわりに 画面が つよく なりすぎて
   いました。そこで 3つを 入れかえて います。

     1. わくで かこまない。**白い 面と やわらかい かげ**で 浮かせます
        （--shadow）。線を 引くのは 中の 区切りと 入力欄だけ です。
     2. カードの 上に **6px の 色の おび**（--accent）を 引き、
        アイコンは その 色の うすい 四角に 入れます。
        「ここは 何の カードか」が 色で ひと目で わかります。
     3. ボタンは 下に 4〜5px の「あつみ」を もった 立体です。
        押すと その ぶん しずみます（--btn-edge / .btn:active）。

   色は manabi-quest の パレットを そのまま もらいます。
   地は うすい 青（#eef4fb）、面は 白、文字は #2f3d4f。
   色わけは 7色（青・緑・だいだい・桃・紫・水・金）で、それぞれ
     ・そのまま（-）… ぬりつぶし・おび
     ・こい（-d）  … 文字と アイコン（白い 面の 上に のる ところ）
     ・うすい（-s）… 地・タグ・アイコンの 四角
   の 3つを もちます。**文字には かならず -d を つかいます。**
   あかるい 色を そのまま 文字に すると、教室の Chromebook では
   コントラストが 足りず 読めなく なる からです。
   ===================================================================== */

:root {
  color-scheme: light dark;

  --bg: #eef4fb;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f9ff;
  --text: #2f3d4f;
  /* そえる ことばの 色。manabi-quest は #8a99a8 ですが、それでは
     白い 面で コントラストが 3.6 しか なく、教室の Chromebook では
     読みにくく なります。4.5 を こえる ところまで こく して います */
  --text-2: #4b5c70;
  --muted: #5a6b80;
  /* カードの 中の こまかい 区切り線と、入力欄の わく */
  --line: #dbe6f3;

  --primary: #4a90e2;
  --primary-deep: #2b68b4;
  --primary-soft: #eaf3ff;
  --primary-ink: #ffffff;

  /* 7色の パレット。-d は 文字用、-s は 地用 です */
  --c-blue: #4a90e2;   --c-blue-d: #2b68b4;   --c-blue-s: #eaf3ff;
  --c-green: #2fb673;  --c-green-d: #197f4c;  --c-green-s: #e6f8ef;
  --c-orange: #f5942a; --c-orange-d: #a75d05; --c-orange-s: #fff2e0;
  --c-pink: #ef5f92;   --c-pink-d: #bb2f65;   --c-pink-s: #ffedf3;
  --c-violet: #8b7cf6; --c-violet-d: #5b48cf; --c-violet-s: #f0edff;
  --c-cyan: #21b6c8;   --c-cyan-d: #0d7b88;   --c-cyan-s: #e2f8fb;
  --c-gold: #f0b429;   --c-gold-d: #8f6300;   --c-gold-s: #fff6dd;

  /* 前の 版から つかって いる 名まえ（コースの 色わけなど）を、
     あたらしい パレットに つなぎます */
  --c-teal: var(--c-cyan-d);
  --c-amber: var(--c-orange-d);

  --accent: var(--c-gold);
  --accent-soft: var(--c-gold-s);
  --accent-deep: var(--c-gold-d);
  /* きいろの 上に のせる 文字の 色。きいろは くらい 画面でも あかるい ままなので、
     ここだけは テーマで 色を 変えません */
  --on-accent: #4a3200;

  --ok: #197f4c;
  --ok-soft: #e6f8ef;
  --ng: #c62828;
  --ng-soft: #ffeeee;
  --warn: #a75d05;

  /* やわらかい かげ。ぼかして 下に おとします（前の 版の「かたい かげ」は
     やめました。かわいい かわりに 画面が うるさく なる ためです）*/
  --shadow: 0 .35rem .9rem rgba(47, 61, 79, .10);
  --shadow-lift: 0 .8rem 1.6rem rgba(47, 61, 79, .16);
  /* ボタンの「あつみ」。押すと この ぶん しずみます（.btn:active）*/
  --press: 4px;
  --btn-edge: #2a5fae;

  --nav-h: 62px;
  --radius: 1.25rem;
  --radius-s: .9rem;
  /* わくは もう つかいませんが、キーや 入力欄の ために のこします */
  --bw: 2px;

  /* 画面の 出しいれの うごきかた。1か所に まとめて おきます */
  --ease: cubic-bezier(.2, .85, .3, 1);
  --bounce: cubic-bezier(.25, 1.6, .45, 1);

  /* 指の 色分けの こさ。あかるい 教室の Chromebook では 色が とんで
     見えなく なるので、うすくし すぎません（キーの 文字は 読めるはば で）*/
  --finger-tint: 22%;

  /* ------------------------------------------------------------------
     画面の キーボードの 小さい 字（かな・上の 記号・キーの 名まえ）の 色。

     ■ なぜ --muted と 分けるのか
     --muted は 白い 面での 色として 決めて あります（白の 上で 5.07）。
     ところが キーには 指の 色が しいて あるので、面が 白より くらく なり、
     実測で **3.25〜4.44** まで 落ちて いました。基準の 4.5 に とどきません。
     いちばん 落ちたのは あかるい 教室で いちばん 見づらい 色の キーです。
     面用と 文字用を 2段階に する（Part I §2-8）ため、ここだけ 分けます。
     この 値は 9本の 指の 色すべての 上で 4.5 を こえる ことを 計算で
     たしかめて えらんで います（最悪 4.59）。 */
  --kb-ink: #536276;
  /* 「つぎに 押す キー」の 地の こさと、その 上の 文字の 色。
     地を こく するほど キーは 目立ちますが、文字は 読みにくく なります。
     あかるい 画面では 72% の ままでも こい 字で 4.87 まで 上がります。 */
  --kb-next-tint: 72%;
  --kb-next-ink: #1f2a38;
  /* 打った しゅんかんの ○×の 面（みどり・あか）の 上に のせる 文字の 色 */
  --kb-hit-ink: #ffffff;

  /* 画面の キーボードの 大きさの もとに なる「1文字ぶん」。
     キー1つの たかさは この 2.6ばい、キーボードぜんたいの たかさは
     およそ この 15ばい に なります。

     ■ よこ と たて の 両方を 見ます
     はば だけで 決めると、よこに ひろく たてに みじかい 学校の
     Chromebook（1366×768）で キーボードが 画面の 下に はみ出します。
     そこで vw（はば）と vh（たかさ）の **小さい ほう**を つかいます。 */
  --kb-em: clamp(9px, min(1.25vw, 2vh), 20px);

  /* 学校の 端末に よく 入っている UD フォントを 先に します */
  --font: "BIZ UDPGothic", "BIZ UDGothic", "UD デジタル 教科書体 NP-R",
          "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Yu Gothic UI", "Meiryo",
          system-ui, -apple-system, sans-serif;
}

/* くらい 画面の 色。「せってい → くらい」を えらんだ ときの 見た目です。
   「じどう」の ときは、下の @media で 端末の せっていに あわせます。

   ■ 色わけの 7色は、くらい 画面では 明るい ほうに ふりなおします
   あかるい 画面では「-d（こい 色）＝ 文字」でしたが、くらい 画面では
   こい 色は 地に しずんで 読めません。そこで -d を **明るい 色**に
   入れかえ、-s（うすい 地）を **くらい 地**に 入れかえます。
   つかう がわ（.tile-blue など）は 名まえを 変えなくて すみます。 */
html[data-theme="dark"] {
  --bg: #131a24;
  --bg-2: #1a2330;
  --surface: #1e2937;
  --surface-2: #263243;
  --text: #e8eff8;
  --text-2: #b9c7d8;
  --muted: #93a3b6;
  --line: #35455a;

  --primary: #5ba2f0;
  --primary-deep: #8ec5ff;
  --primary-soft: #1c3350;
  --primary-ink: #0b1622;

  --c-blue: #5ba2f0;   --c-blue-d: #8ec5ff;   --c-blue-s: #1c3350;
  --c-green: #3ecb87;  --c-green-d: #6fe3ad;  --c-green-s: #14382a;
  --c-orange: #ffa947; --c-orange-d: #ffc584; --c-orange-s: #3d2a13;
  --c-pink: #ff7fac;   --c-pink-d: #ffa8c6;   --c-pink-s: #3d1f2c;
  --c-violet: #a394ff; --c-violet-d: #c3b8ff; --c-violet-s: #2a2650;
  --c-cyan: #38ccdd;   --c-cyan-d: #7ce3ef;   --c-cyan-s: #123640;
  --c-gold: #ffc94d;   --c-gold-d: #ffdd8a;   --c-gold-s: #3d3113;

  --accent: var(--c-gold);
  --accent-soft: var(--c-gold-s);
  --accent-deep: var(--c-gold-d);
  --on-accent: #3a2800;

  --ok: #6fe3ad;
  --ok-soft: #14382a;
  --ng: #ff8f83;
  --ng-soft: #3d1f1f;
  --warn: #ffc584;

  --shadow: 0 .35rem .9rem rgba(0, 0, 0, .45);
  --shadow-lift: 0 .8rem 1.6rem rgba(0, 0, 0, .55);
  --btn-edge: #16375f;

  /* くらい 画面では 同じ こさでも 色が しずんで 見えるので、すこし こく します */
  --finger-tint: 34%;

  /* くらい 画面での キーの 小さい 字。--muted のままでは 実測 3.25 でした。
     9本の 指の 色すべての 上で 4.5 を こえる ところまで 明るく して います
     （最悪 4.60）。 */
  --kb-ink: #b7c1ce;
  /* 指の 色は あかるい 画面と 同じ 値を つかう（手の 絵と そろえる ため）ので、
     くらい 地に 72% で しくと 中あかるさの 面に なり、白い 字でも 4.25 しか
     出ませんでした。ここだけ こさを 60% に して 白で 5.22 を 取ります。
     わく・かげ・三角の しるしは そのままなので、目立ちかたは 変わりません。 */
  --kb-next-tint: 60%;
  --kb-next-ink: #ffffff;
  /* みどり・あかは くらい 画面では **明るい** 色に ふりなおして あるので、
     白い 字だと 1.58 / 2.21 まで 落ちます。ここは こい 字に します */
  --kb-hit-ink: #0b1622;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #131a24; --bg-2: #1a2330; --surface: #1e2937; --surface-2: #263243;
    --text: #e8eff8; --text-2: #b9c7d8; --muted: #93a3b6; --line: #35455a;
    --primary: #5ba2f0; --primary-deep: #8ec5ff; --primary-soft: #1c3350; --primary-ink: #0b1622;
    --c-blue: #5ba2f0;   --c-blue-d: #8ec5ff;   --c-blue-s: #1c3350;
    --c-green: #3ecb87;  --c-green-d: #6fe3ad;  --c-green-s: #14382a;
    --c-orange: #ffa947; --c-orange-d: #ffc584; --c-orange-s: #3d2a13;
    --c-pink: #ff7fac;   --c-pink-d: #ffa8c6;   --c-pink-s: #3d1f2c;
    --c-violet: #a394ff; --c-violet-d: #c3b8ff; --c-violet-s: #2a2650;
    --c-cyan: #38ccdd;   --c-cyan-d: #7ce3ef;   --c-cyan-s: #123640;
    --c-gold: #ffc94d;   --c-gold-d: #ffdd8a;   --c-gold-s: #3d3113;
    --accent: var(--c-gold); --accent-soft: var(--c-gold-s); --accent-deep: var(--c-gold-d);
    --on-accent: #3a2800;
    --ok: #6fe3ad; --ok-soft: #14382a; --ng: #ff8f83; --ng-soft: #3d1f1f; --warn: #ffc584;
    --shadow: 0 .35rem .9rem rgba(0, 0, 0, .45);
    --shadow-lift: 0 .8rem 1.6rem rgba(0, 0, 0, .55);
    --btn-edge: #16375f;
    --finger-tint: 34%;
    /* 上の html[data-theme="dark"] と 同じ 値。理由も そちらに 書いて あります */
    --kb-ink: #b7c1ce;
    --kb-next-tint: 60%;
    --kb-next-ink: #ffffff;
    --kb-hit-ink: #0b1622;
  }
}

* { box-sizing: border-box; }

/* hidden を つけたら かならず 消えるように します。
   .btn などに display を 決めて いるので、それより 強くします */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* ブラウザの「はしから 引っぱって もどる」を 止めます。
     もどる操作は アプリの 中だけで 受け取ります */
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));

  /* 本文を たてに まんなか よせ する ための 土台。
     下の .view の「たての まんなか よせ」を 見て ください。
     下部バーは position: fixed なので、この ならびには 入りません */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* dvh を 知らない 古い 端末（学校には まだ あります）むけの ひかえ。
   dvh を 先に 書き、知らない ときだけ vh で 受けます。
   vh は モバイルの アドレスバーの ぶん はみ出しますが、
   「高さが 決まらない」より ましです */
@supports not (height: 100dvh) {
  body { min-height: 100vh; }
}

html.big-text body { font-size: 18.5px; }

/* キーボード操作の しるし。さんご色 その ものは 白い 地の 上で うすいので、
   こい ほう（--primary-deep）を つかいます */
:focus-visible {
  outline: 3px solid var(--primary-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

b, strong { font-weight: 800; }

/* みじかい 説明の 行おくりを、ことばの きれめで します（Chrome 119〜）。
   「クリ／アした」のような、読みにくい おれかたを へらします。
   つかえない ブラウザでは この 1行が ただ 無視されるだけです */
.badge-title, .badge-note, .tile-note, .tile-title,
.stage-note, .row-note, .page-note { word-break: auto-phrase; }

/* ---------------------------------------------------------------- 上のバー */

/* 上のバー。線で 区切らず、**白い 面と やわらかい かげ**で 本文から 浮かせます */
.brand {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 .2rem .7rem rgba(47, 61, 79, .08);
  position: relative; z-index: 5;
}
.brand-mark {
  font-weight: 800; letter-spacing: .04em; color: var(--text); font-size: 1.3rem;
  line-height: 1.2;
}
.brand-mark::after { content: "."; color: var(--primary); }
.brand-note { color: var(--muted); font-size: .85rem; font-weight: 700; }

@media (min-width: 900px) { .brand { display: flex; } }

/* ---------------------------------------------------------------- 本文 */

.view {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 16px max(14px, env(safe-area-inset-left)) 40px max(14px, env(safe-area-inset-right));
}

/* 本文が 1画面に おさまる ときは、たての まんなかに おきます。

   ■ なぜ
   「スクロールしないで 見わたせる」ように 中身を つめた けっか、
   えらぶ画面は 上に かたまり、下に 大きな 空きが のこって いました。
   さらに よこ 2れつの ところでは、左の れつ（つづきから）が 右の れつより
   ずっと みじかい ので、ボタンだけが 宙に うかんで 見えました。
   中身を まんなかに よせると、上と 下の 空きが 同じに なり、
   スクロールが 出ない ことは そのまま です。

   ■ 「safe」を つけて いる わけ
   中身が 画面より 長く なった ときに ふつうの center を つかうと、
   はみ出した ぶんが **上に 出て スクロールでは もどれなく** なります。
   safe を つけると、その ときだけ 上ぞろえに もどります。
   safe を 知らない ブラウザは この 1行を まるごと 読みとばすので、
   やはり 上ぞろえ（いままでと 同じ）に なります。

   ■ 打つ 画面には かけません
   キーボードの 大きさは play.js が「お題の 下から 下部バーまで」を
   はかって 決めます。中身を たてに うごかすと その はかりが くるいます。 */
body:not([data-screen="play"]) .view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}

.page-head { margin: 4px 2px 14px; }
.page-head h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0; letter-spacing: .01em; font-weight: 800; }
.page-note { margin: 2px 0 0; color: var(--muted); font-size: .95rem; font-weight: 700; }

/* カードは わくで かこまず、**白い 面と やわらかい かげ**で 浮かせます。
   上に 6px の 色の おびを 引いて、「ここは 何の カードか」を 色で 出します。
   色は --tile（コースの 色）が あれば それ、なければ 青 です。 */
.card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  margin-bottom: 16px;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--tile, var(--primary)),
    color-mix(in srgb, var(--tile, var(--primary)) 45%, var(--surface)));
}
.lead { display: flex; align-items: center; gap: 10px; font-weight: 800; margin: 0 0 10px; }
/* 見出しの アイコンは、その 色の **うすい 四角**に 入れます。
   ぬりつぶしの 上に 白ぬきに するより しずかで、ならべても うるさく なりません */
.lead .ico {
  width: 34px; height: 34px; padding: 6px; flex: none;
  color: var(--tile-d, var(--primary-deep));
  background: var(--tile-s, var(--primary-soft));
  border-radius: var(--radius-s);
  stroke-width: 2.4;
}
.muted { color: var(--muted); font-size: .93rem; margin: 6px 0; }
.hint-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--primary-soft); color: var(--text-2);
  border-radius: var(--radius-s); padding: 11px 14px; margin: 0 0 14px;
  font-size: .93rem; font-weight: 700;
}
.hint-box .ico { flex: none; color: var(--primary-deep); }

.ico { width: 24px; height: 24px; vertical-align: -.15em; }

/* ---------------------------------------------------------------- ボタン */

/* ボタンは「あつみの ある 板」です。
   下に 4px の へり（--btn-edge）を しいて おき、押すと その ぶん しずみます。
   ゆびで さわった ときに **へこんだ** ことが 目で わかるので、
   タップが とどいたか どうかで まよいません。

   ■ 地は 上から 下への グラデーションに します
   まっ平らな ぬりつぶしより、光が 当たった 板に 見えます。
   ただし 上の はしも 白い 文字が 読める こさ（コントラスト 4.5 いじょう）
   より 明るく しません。ポップに 見せる ために 読めなく なるのは 本末転倒です。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border-radius: 999px; border: 0;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--text-2);
  box-shadow: 0 var(--press) 0 var(--line), var(--shadow);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(var(--press)); box-shadow: 0 0 0 transparent, var(--shadow); }
.btn-primary {
  background: linear-gradient(180deg, #3572bd, #265ea4);
  color: #fff;
  box-shadow: 0 var(--press) 0 var(--btn-edge), var(--shadow);
}
.btn-primary:active { box-shadow: 0 0 0 var(--btn-edge), var(--shadow); }
/* 「ふちどりだけ」の ボタン。白い 面に、こい 青の 文字と うすい わく */
.btn-outline {
  background: var(--surface); color: var(--primary-deep);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line);
}
.btn-outline:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--line); }
/* ひかえめな ボタン。ここだけ あつみも かげも 出しません
   （「やめる」など、押して ほしくない ものに つかいます） */
.btn-ghost {
  background: transparent; color: var(--muted);
  box-shadow: none;
}
.btn-ghost:active { transform: translateY(1px); box-shadow: none; }
.btn-big {
  width: 100%; min-height: 76px; justify-content: space-between;
  border-radius: var(--radius); text-align: left; padding: 12px 22px;
}
/* opacity: .9 を かけて いました。オレンジの 大きい ボタンの 上で
   コースの 名まえ（「ゆびの ばしょ」）が 比 4.27 まで 落ちて いたので 外します。
   外すと 5.0 に なり、見た目は ほとんど 変わりません */
.btn-big .btn-sub { display: block; font-size: .78rem; font-weight: 600; }
.btn-big .btn-main { display: block; font-size: 1.15rem; font-weight: 800; }
/* コース名は 1行に おさめます（「ゆびの ばし／ょ」のような 変な 折り返しを ふせぎます） */
.btn-big > span:first-child { flex: 1; min-width: 0; }
.btn-big .btn-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- ホーム */

.card-today { background: var(--accent-soft); }
.today { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.today-item { display: flex; flex-direction: column; }
.today-num { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 900; line-height: 1.1; color: var(--primary-deep); }
.today-unit { font-size: .78rem; color: var(--muted); }
.today-label { font-size: .8rem; color: var(--muted); margin-top: 2px; font-weight: 700; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
/* コースの タイル。上に 色の おびを 引き、下に あつみを もたせます */
.course-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 20px 16px 16px; border-radius: var(--radius); cursor: pointer;
  border: 0; background: var(--surface); color: var(--text);
  box-shadow: 0 4px 0 var(--tile-s, var(--primary-soft)), var(--shadow);
  font: inherit; text-align: left; min-height: 132px;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.course-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--tile, var(--primary)),
    color-mix(in srgb, var(--tile, var(--primary)) 45%, var(--surface)));
}
.course-tile:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--tile-s, var(--primary-soft)), var(--shadow-lift); }
.course-tile:active { transform: translateY(4px); box-shadow: 0 0 0 var(--tile-s, var(--primary-soft)), var(--shadow); }
.tile-icon { color: var(--tile-d, var(--primary-deep)); }
.tile-icon .ico { width: 30px; height: 30px; }
.tile-title { font-weight: 800; font-size: 1.05rem; }
.tile-note, .tile-count { font-size: .82rem; color: var(--muted); font-weight: 700; }
.tile-count { margin-top: auto; }

/* 色わけ。1つの class で 3つの 色（そのまま・こい・うすい）が そろいます。
   --tile   … おび・ぬりつぶし
   --tile-d … 文字と アイコン（白い 面の 上に のる ところ）
   --tile-s … うすい 地（アイコンの 四角・タグ）
   lessons.js の color（blue / teal / green / violet / amber）と 同じ 名まえ です */
.tile-blue   { --tile: var(--c-blue);   --tile-d: var(--c-blue-d);   --tile-s: var(--c-blue-s); }
.tile-teal   { --tile: var(--c-cyan);   --tile-d: var(--c-cyan-d);   --tile-s: var(--c-cyan-s); }
.tile-green  { --tile: var(--c-green);  --tile-d: var(--c-green-d);  --tile-s: var(--c-green-s); }
.tile-violet { --tile: var(--c-violet); --tile-d: var(--c-violet-d); --tile-s: var(--c-violet-s); }
.tile-amber  { --tile: var(--c-orange); --tile-d: var(--c-orange-d); --tile-s: var(--c-orange-s); }
.tile-pink   { --tile: var(--c-pink);   --tile-d: var(--c-pink-d);   --tile-s: var(--c-pink-s); }
.tile-gold   { --tile: var(--c-gold);   --tile-d: var(--c-gold-d);   --tile-s: var(--c-gold-s); }

.best-row { display: flex; gap: 22px; flex-wrap: wrap; }
.best-row div { display: flex; align-items: baseline; gap: 6px; }
.best-row b { font-size: 1.7rem; color: var(--primary-deep); font-weight: 900; }
.best-row span { color: var(--muted); font-size: .85rem; font-weight: 700; }
.pending { margin: 8px 0; }
.pending b { color: var(--primary-deep); font-size: 1.2rem; }

/* ---------------------------------------------------------------- 一覧 */

.course-list, .stage-list { display: flex; flex-direction: column; gap: 12px; }

/* =========================================================== とびら

   つぎの 階層へ すすむ ための 1行ボタン（コース・ステージ・えらぶ画面の 行）。
   manabi-quest の「とびら」と 同じ 組みかたに して います。

     ・地は 白から その 色の うすい 地への ななめ グラデーション
     ・まわりは うすい 色の わく（2px）。ふとい すみ色では ありません
     ・下に 5px の あつみ。押すと その ぶん しずみます
     ・押した ときは 光が さっと 横切り、矢じるしが 先に 走ります（fx.css）

   「押せる ものは あつみが ある」を どの 画面でも 同じに して、
   カード（あつみ なし）と 見分けられる ように します。 */
.mq-door, .course-row, .stage-row, .menu-row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; min-height: 76px; cursor: pointer;
  border: 2px solid var(--tile-s, var(--primary-soft));
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface) 42%, var(--tile-s, var(--primary-soft)));
  box-shadow: 0 5px 0 var(--tile-s, var(--primary-soft)), var(--shadow);
  font: inherit; color: var(--text); text-align: left;
  transition: transform .1s var(--ease), box-shadow .1s var(--ease), border-color .15s ease;
}
.course-row:hover, .stage-row:hover, .menu-row:hover { border-color: var(--tile, var(--primary)); }
.course-row:active, .stage-row:active, .menu-row:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--tile-s, var(--primary-soft)), var(--shadow);
}
/* 行の アイコンは、白い まるい 四角に 入れて うかせます */
.row-icon {
  flex: none; color: var(--tile-d, var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--tile-s, var(--primary-soft));
}
.row-icon .ico { width: 28px; height: 28px; }
.row-body, .stage-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title, .stage-title { font-weight: 800; }
/* 想定学年。じゃまに ならないよう、小さく そえます */
.grade-chip {
  font-size: .68rem; font-weight: 700; color: var(--text-2);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line);
  border-radius: 999px; padding: 1px 9px; margin-left: 8px; white-space: nowrap;
}
.row-note, .stage-note, .stage-best, .row-count { font-size: .84rem; color: var(--muted); font-weight: 700; }
.row-bar {
  display: block; height: 8px; border-radius: 999px; overflow: hidden; margin: 5px 0 2px;
  background: var(--line);
}
.row-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--tile, var(--primary)),
    color-mix(in srgb, var(--tile, var(--primary)) 55%, #fff));
}
.row-arrow { color: var(--tile-d, var(--primary-deep)); flex: none; opacity: .75; }
.stage-row { --tile: var(--c-blue); --tile-d: var(--c-blue-d); --tile-s: var(--c-blue-s); }
.stage-no {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  background: var(--surface); color: var(--tile-d, var(--primary-deep));
  box-shadow: inset 0 0 0 2px var(--tile-s, var(--primary-soft));
}

.stars { display: inline-flex; gap: 2px; flex: none; }
.stars .star { color: var(--line); }
.stars .star .ico { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.stars .star.on { color: var(--c-gold); }

/* ---------------------------------------------------------------- 練習画面 */

.play { display: flex; flex-direction: column; gap: 12px; }

/* 打つ 画面だけ、キーボードに 画面の はば ぜんぶを つかわせます。

   ほかの 画面は 読みやすさの ために 1080px で 止めて いますが、
   キーボードは **手もとの キーボードと 見くらべる 図**なので、
   大きければ 大きい ほど 分かりやすく なります。
   そこで .view の わくを 外し、キーボード いがいの ものだけを
   まんなかに そろえて おきます。

   お題の わくを 1080px より すこし ひろく して いるのは、長い 文が
   2行に おれると その ぶん キーボードが 小さく なる からです
   （大きさは play.js が 画面を はかって きめます）。 */
body[data-screen="play"] .view { width: 100%; }
body[data-screen="play"] .play > *:not(.play-lower) {
  width: min(1280px, 100%); margin-left: auto; margin-right: auto;
}

.play-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.play-title { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; font-weight: 800; }
/* コースの しるし。うすい 地に こい 文字（-s と -d の 組み）です */
.chip {
  font-size: .74rem; font-weight: 700; padding: 2px 11px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-deep);
}
.chip-blue   { background: var(--c-blue-s);   color: var(--c-blue-d); }
.chip-teal   { background: var(--c-cyan-s);   color: var(--c-cyan-d); }
.chip-green  { background: var(--c-green-s);  color: var(--c-green-d); }
.chip-violet { background: var(--c-violet-s); color: var(--c-violet-d); }
.chip-amber  { background: var(--c-orange-s); color: var(--c-orange-d); }

.play-progress { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.play-progress .bar {
  flex: 1; height: .55rem; border-radius: 999px; overflow: hidden;
  background: var(--line);
}
.play-progress .bar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  transition: width .25s ease;
}
.play-progress .num { font-size: .88rem; color: var(--muted); white-space: nowrap; font-weight: 800; }

/* お題。画面の 中で いちばん 大きく、いちばん はっきり 見せます。
   ここだけ かげを ひとまわり 大きく して、いちばん 手前に 見せます */
.play-stage {
  position: relative;                 /* ひとまわりの おしらせを 上に かさねます */
  background: var(--surface); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 20px; text-align: center;
}
.q-label { margin: 0 0 6px; color: var(--muted); font-size: clamp(1rem, 3vw, 1.25rem); font-weight: 700; }
.q-kana {
  margin: 0; font-size: clamp(1.7rem, 6.2vw, 3rem); font-weight: 800;
  letter-spacing: .06em; line-height: 1.5; word-break: break-all;
}
.q-kana .done { color: var(--muted); opacity: .55; }
/* いま 打つ 字。文字は こい 色（読める こと が さいゆうせん）、
   下の 線は あかるい さんご色（遠くからでも どこかが 分かる）*/
.q-kana .now {
  color: var(--primary-deep);
  border-bottom: 6px solid var(--primary); border-radius: 2px; padding-bottom: 2px;
}
.q-romaji {
  margin: 10px 0 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1rem, 3.4vw, 1.5rem); letter-spacing: .12em; word-break: break-all;
}
.q-romaji .done { color: var(--ok); }
.q-romaji .rest { color: var(--muted); }

/* 正誤は かげでは なく **内がわの わく**で 出します。
   かげを 色に すると まわりの カードにも 色が うつって にじみます */
.play-stage.is-miss { animation: shake .22s ease; box-shadow: inset 0 0 0 3px var(--ng), var(--shadow-lift); }
.play-stage.is-clear { animation: pop .26s ease; box-shadow: inset 0 0 0 3px var(--ok), var(--shadow-lift); }
@keyframes shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes pop { 50% { transform: scale(1.015); } }

/* つぎに 押す 指。色 だけでなく ことばでも つたえます */
.play-finger {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 44px; flex-wrap: wrap;
  background: var(--surface); border: 0;
  border-radius: 999px; padding: 6px 18px; box-shadow: var(--shadow);
}
.finger-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--finger, var(--primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--finger, var(--primary)) 22%, transparent);
}
.finger-text { font-size: clamp(.9rem, 2.6vw, 1.05rem); font-weight: 700; }
.finger-text b { color: var(--primary-deep); font-weight: 900; }
.finger-shift {
  font-size: .8rem; font-weight: 700; background: var(--primary-soft); color: var(--primary-deep);
  border-radius: 999px; padding: 1px 11px;
}

/* 「つぎの 指」と きろくの 数字。ふつうは たてに 2行 です */
.play-status { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.play-meter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.meter {
  display: flex; align-items: baseline; gap: 5px;
  background: var(--surface); border: 0;
  border-radius: 999px; padding: 4px 15px; box-shadow: var(--shadow);
}
.meter-label { font-size: .78rem; color: var(--muted); font-weight: 700; }
.meter b { font-size: 1.15rem; font-weight: 900; }
.meter-unit { font-size: .74rem; color: var(--muted); }

/* そのさき（だん）を ねらって いる ときだけ 出る はやさの めやす。
   とどいた しゅんかんに 色が つきます — 打ちながら 分かる ように */
.meter-goal { font-size: .74rem; color: var(--muted); }
.meter-goal::before { content: '／ '; }
.meter.is-reached { border-color: var(--ok); background: var(--ok-soft); }
.meter.is-reached .meter-goal { color: var(--ok); font-weight: 700; }

.ime-warn {
  display: flex; align-items: center; gap: 8px;
  background: var(--ng-soft); color: var(--ng);
  border: 2px solid var(--ng); border-radius: var(--radius-s);
  padding: 9px 14px; font-size: .9rem; font-weight: 800;
}
.ime-warn .ico { flex: none; }

/* ストップウォッチが うごきだす まえの おしらせ。1打目で うすくなります。

   ■ 消して しまうと 画面が とびます
   前は 1打目で display:none に して いたので、**さいしょの 1文字を
   打った しゅんかんに 画面ぜんたいが 30px 上へ とんで** いました。
   打ちはじめの いちばん だいじな ところで お題が うごくのは 最悪です。
   場所は そのまま のこして、うすくするだけに します。 */
.play-ready {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 0; color: var(--muted); font-size: .88rem;
  min-height: 1.7em; transition: opacity .18s ease;
}
.play-ready.is-gone { opacity: 0; }
.play-ready .ico { width: 18px; height: 18px; color: var(--primary-deep); }

/* 練習画面の 足もと。「やめる」は いつでも 見えて いる ことが 大事です。
   やめかたが 分からない ことが、そのまま「はじめない」理由に なります */
.play-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; min-height: 48px;
}
.btn-stop { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.3; position: relative; }
.btn-stop .btn-note { font-size: .72rem; font-weight: 400; color: var(--muted); }
.btn-stop .ico { width: 18px; height: 18px; }
/* さわれる 大きさを 44px 以上に します。

   ■ ボタン そのものを 大きく しては いけません
   たてが みじかい Chromebook（1366×768）では、下の @media で この ボタンを
   40px に つめて、その ぶんを キーボードに まわして います。
   ここで min-height を 44px に すると キーボードが 小さく なるか、
   ボタンが 折り返して 別の 形で くずれます。
   そこで **見た目は そのまま、当たり判定だけ**を 疑似要素で ひろげます。
   実測 104×40 → 104×44。 */
.btn-stop::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 44px; min-height: 44px;
}

/* れんぞく（コンボ）。10だ ごとに ひとこと ほめます */
.meter-combo b { color: var(--c-teal); }
.meter-combo.is-up {
  animation: combo-pop .5s ease;
  border-color: var(--c-teal);
}
@keyframes combo-pop {
  30% { transform: scale(1.14); background: color-mix(in srgb, var(--c-teal) 22%, var(--surface)); }
}

/* ひとまわり できた ときの おしらせ。1.6びょうで 消えます。
   ここで 画面を きりかえて しまうと、「あと 30びょう だけ」が できません。

   お題は まんなかに 出るので、この しるしは **右上の すみ**に おきます。
   まんなかに かさねると、いちばん 見せたい お題の 文字を かくして しまいます */
.lap-flash {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  margin: 0; padding: 6px 14px; border-radius: 999px;
  background: var(--ok); color: #fff; font-weight: 700; font-size: .86rem;
  white-space: nowrap; pointer-events: none; box-shadow: var(--shadow);
}
.lap-flash.is-on { animation: lap-in 1.6s ease both; }
@keyframes lap-in {
  0% { opacity: 0; transform: translateY(-8px) scale(.9); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ★3つで ひとまわり できた とき。
   いちばん うまく 打てた しゅんかん なので、みどりの まるを 金色に かえて
   ★を そえます。**ばしょも 大きさも 同じ まま**です。ここを 大きく すると
   お題の 文字に かぶさり、つぎの お題が 読めなく なります。
   出て いる 時間だけ すこし のばします（js/play.js の FULL_FLASH_MS）*/
.lap-flash.is-full { background: var(--accent); color: var(--on-accent); }
.lap-flash .stars { vertical-align: -3px; margin-right: 6px; }
.lap-flash .stars .star .ico { width: 16px; height: 16px; }
.lap-flash .stars .star.on { color: var(--on-accent); }
.lap-flash.is-full.is-on { animation: lap-in-full 2.4s ease both; }
@keyframes lap-in-full {
  0% { opacity: 0; transform: translateY(-8px) scale(.9); }
  8% { opacity: 1; transform: translateY(0) scale(1.08); }
  18% { transform: translateY(0) scale(1); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------- 手の イラスト・キャラクター */

/* キーボードと 手の 絵は ひとくみ。かならず **上下**に かさねます。

   ■ よこに ならべては いけません
   まえは ひろい 画面で 手の 絵を キーボードの となりに ならべて
   いました。すると「つぎの キーは どこ」と「その キーは どの 指」を
   見くらべる たびに、目が 画面の 左右を いききします。
   打ちながら 目を 大きく うごかすのは、タイピングの 練習では
   いちばん さけたい こと です。
   上下に かさねると、指先が ホームポジションの キーの まっすぐ 下に
   来るので、目は すこし 下を 見るだけ で すみます。

   ■ たてに みじかい 画面が いちばん 大事です
   学校の Chromebook は 1366×768 で、ブラウザの わくを のぞくと
   たては 600px ほど しか ありません。ここが 画面の 外に 出ると、
   **キーボードを 見るために スクロールする** ことに なります。
   打ちながら スクロールは できないので、それは 使えない という ことです。
   そこで 手の 絵は 指先だけを 見せ（下は 画面の 外に 出します）、
   キーボードの 下の 行に すこし かさねて おきます。 */
.play-lower { min-width: 0; }

/* せまい 画面では よこに スクロールします。キーボードと 手の 絵を
   ひとつの わくの 中に 入れて、いっしょに うごかします
   （べつべつに スクロールすると 指先が キーの 下から ずれます） */
.kb-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

/* キーボードと 手の 絵の はば。

   はばを のばすほど キーは よこに ひろがりますが、たかさは
   画面の たかさで 決まる ので、のばし すぎると キーが 「ひらべったい
   長方形」に なって 手もとの キーボードと 形が ちがって しまいます。
   そこで **キー1つが よこ長に なりすぎない はば** で 止めます
   （キー1つは よこ 5.9em ほど ＝ たかさの 2ばい あたり）。
   画面が たてに ひろければ その ぶん はばも のびます。 */
.kb-fit { width: min(100%, calc(88 * var(--kb-em))); min-width: 560px; margin: 0 auto; }
.kb-fit .kb-wrap { overflow: visible; padding-bottom: 0; }
.kb-fit .kb { min-width: 0; width: 100%; }

/* 手の 絵。キーボードの 下の 行に すこし かさねて、たての 場所を つめます */
.play-visual { display: block; margin-top: calc(-1 * var(--kb-em)); }
.hands { width: 100%; }

/* 絵の 下（手のひら）は 切って しまいます。よこの ばしょは 切っても
   ずれないので、指先は いつも キーの まっすぐ 下に のこります。
   絵は よこ1000・たて100 の わりあいで 描いて あるので、
   1000 : 84 に すると 指先と 手のひらの きわ までが 出ます。 */
.hands-body { overflow: hidden; aspect-ratio: 1000 / 84; }
.hands-svg { width: 100%; height: auto; display: block; }
/* ラベルは それぞれの 手の まんなかの 下に おきます（left は hands.js が 出します）*/
.hands-label {
  position: relative; height: 1.3em; margin: 0;
  font-size: .74rem; line-height: 1.3; color: var(--muted);
}
.hands-label span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* 手のひらと 指。指は キーボードと 同じ 指の 色で うすく ぬります。
   キーの 色と 指の 色が 同じ だから、「この 色の キーは この 指」が
   ことばを 読まなくても つながります */
/* 手の 絵も キーと 同じ すみ色の わくで かこみます。
   キーボードと 手が 「同じ 絵の 部品」に 見えます */
.hand-palm { fill: var(--surface-2); stroke: var(--line); stroke-width: 2.5; }
.hand-finger rect {
  fill: color-mix(in srgb, var(--finger) var(--finger-tint), var(--surface-2));
  stroke: color-mix(in srgb, var(--finger) 55%, var(--line)); stroke-width: 2.5;
  transition: fill .12s ease, stroke .12s ease, transform .12s ease;
}
.hand-finger text {
  fill: var(--text); font-size: 24px; font-weight: 800; text-anchor: middle;
  transition: fill .12s ease;
}

/* つぎに つかう 指。色 だけでは なく **太い わく**でも しめします。
   色の ちがいが 見えにくい 子でも、どれが 光って いるか 形で わかります */
.hand-finger.is-next rect {
  fill: color-mix(in srgb, var(--finger) 62%, var(--surface));
  stroke: var(--finger); stroke-width: 6;
}
.hand-finger.is-next text { fill: var(--text); }
.hand-finger.is-next { animation: finger-wait 1.1s ease-in-out infinite; }
@keyframes finger-wait {
  50% { transform: translateY(3px); }
}

/* 打った しゅんかん。正かい／まちがいは 色と 形の 両方で 分けます */
.hand-finger.is-hit rect { fill: var(--ok); stroke: var(--ok); }
.hand-finger.is-hit text { fill: #fff; }
.hand-finger.is-miss rect { fill: var(--ng); stroke: var(--ng); }
.hand-finger.is-miss text { fill: #fff; }
.hand-finger.is-hit, .hand-finger.is-miss { animation: finger-press .2s ease; }
@keyframes finger-press {
  50% { transform: translateY(6px); }
}

/* ---------------------------------------------- はたらく ちびキャラ

   うごきは ぜんぶ js/buddy.js の Web Animations で つけます。
   ここでは 置きばしょと 入れものの 見た目だけ 決めます。
   （class の 付けはずしで 動かすと、続けて 打った ときに
     いったん 描きなおす ことに なり、そこで 1こま とびます） */

.buddy { width: 100%; }
.buddy-svg {
  display: block; width: 100%; height: auto;
  /* 絵の 中の 色は 決めうちです。まわりの 色に つられて
     キャラクターの 顔色が 変わって しまわない ように します。
     わくは まわりと そろえて、キャラクターも「1まいの カード」に 見せます */
  border-radius: var(--radius-s);
  background: linear-gradient(180deg, #dceafa 0%, #eef5fd 62%, #ffffff 100%);
}
html[data-theme="dark"] .buddy-svg { background: linear-gradient(180deg, #1c2a3d 0%, #24344a 62%, #2c3d55 100%); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .buddy-svg { background: linear-gradient(180deg, #1c2a3d 0%, #24344a 62%, #2c3d55 100%); }
}

/* 打つ 画面の ならび。
   ひろい 画面では お題と キャラクターを よこに ならべ、
   せまい 画面では たてに つみます（キャラクターは お題の 下）。 */
.play-main { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.play-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.play-side { display: flex; justify-content: center; }
.play-side > div { width: min(260px, 74vw); }

@media (min-width: 820px) {
  .play-main { grid-template-columns: 1fr minmax(220px, 280px); gap: 16px; }
  .play-side { align-self: stretch; align-items: center; }
  .play-side > div { width: 100%; }
}

/* ステージ名は そのまま「べつの ステージに かえる」入口です。
   ボタンだと 分かるように しますが、お題より 目立っては いけません */
.play-title.is-link {
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 4px 10px 4px 4px; margin: 0; font: inherit; color: inherit;
  cursor: pointer; min-height: 44px;
}
.play-title.is-link:hover { border-color: var(--line); background: var(--surface); }
.play-title.is-link:focus-visible { outline: 3px solid var(--primary-deep); outline-offset: 2px; }
.play-title-hint { font-size: .74rem; color: var(--muted); font-weight: 700; }
.play-title-hint::before { content: "▾ "; }

/* チャレンジの のこり時間。さいごの 10びょうは 色が かわります */
.play-progress .bar-time span { background: var(--c-teal); transition: width .12s linear; }
#play-root.is-hurry .bar-time span { background: var(--ng); }
#play-root.is-hurry .play-progress .num { color: var(--ng); font-weight: 700; }

/* ---------------------------------------------------------------- キーボード */

.kb-wrap { overflow-x: auto; padding-bottom: 4px; }
/* すきまは grid の gap では なく、キー1つずつの margin で つくります。

   ■ なぜ わざわざ margin なのか
   手の 絵（hands.js）は「よこ60マスの 何マス目」で 指の ばしょを 決めます。
   gap を つかうと 60マスの ほかに すきまの ぶんが 入るので、
   右へ 行くほど キーの まんなかが 少しずつ ずれ、
   小指の あたりで 10px ほど 指先が キーから はずれます。
   gap を 0 に すると 60マスは きっちり 60等分 に なり、
   キーの まんなかと 指先が どの はばでも ぴったり そろいます。 */
.kb {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  gap: 0;
  min-width: 540px;
  font-size: var(--kb-em);
  user-select: none; touch-action: manipulation;
}
/* キーは「キーキャップ」に 見せます。まわりを すみ色で かこみ、
   下だけ ふとく して あつみを 出します。

   ■ margin は 2px から かえないで ください
   play.js が キーの ましかくの たかさを「キーボードの はば ÷ 15 − 4」で
   もとめて います。この 4 が 左右の margin 2px + 2px です。
   ■ border を ふとく しても たかさは かわりません
   box-sizing: border-box なので、わくは min-height の 中に 入ります。
   だから ここを ふとくしても キーボードは 小さく なりません。 */
.kb-key {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--kb-row, 2.6em); margin: 2px; padding: 2px;
  border: 1.5px solid var(--line); border-bottom-width: 4px;
  border-radius: 9px; background: var(--surface);
  color: var(--text); line-height: 1.2; overflow: hidden;
  transition: background-color .1s ease, border-color .1s ease, transform .06s ease;
}
.kb-main { font-weight: 800; font-size: 1.25em; }
.kb-up { position: absolute; top: 2px; left: 4px; font-size: .8em; color: var(--kb-ink); }
.kb-kana { position: absolute; right: 4px; bottom: 2px; font-size: .8em; color: var(--kb-ink); }
.kb-name { font-size: .82em; color: var(--kb-ink); text-align: center; padding: 0 2px; }
/* いちばん上の 行（ブラウザ操作キー）は 練習に つかわないので すこし ひくく。

   ■ ここに opacity は かけません
   まえは 行ごと opacity: .62 に して いました。地は 白に ちかいので
   うすく 見えるだけ ですが、**字まで いっしょに うすく なり**、
   「もどる」「すすむ」「ぜんがめん」「あかるさ ＋」などの キーの 名まえが
   実測で **2.48**（くらい 画面で 2.88）まで 落ちて いました。
   この 行の 名まえは ショートカットの れんしゅうで 実さいに 読む ことばです。
   「つかわない 行」で ある ことは、ひくい たかさ・うすい 地・ほそい 下わく の
   3つで 出せるので、字の こさは そのまま のこします。 */
.kb-key.is-top {
  min-height: calc(var(--kb-row, 2.6em) * .73);
  background: var(--surface-2); border-bottom-width: 2px;
}
.kb-key.is-home { background: var(--surface-2); }
.kb-key.is-bump::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 26%; height: 3px; border-radius: 2px; background: var(--muted); opacity: .8;
}

/* 指の 色分け（せっていで 消せます）。

   ■ うすい 色を しくだけ では 分かりません
   まえは 14% の うすい 色を しくだけ でした。あかるい 教室の
   Chromebook では ほとんど 見えず、キーボードを 見わたした ときに
   **どこで 指が かわるのか** が 分かりませんでした。
   そこで 3つ かさねます。
     1. キーの 色（--finger-tint。くらい 画面では こく します）
     2. キーの **下の わく**を 指の 色で ふとく 引く
        → 同じ 指の キーが 同じ 色の 線で つながって 見えます
     3. ホームポジションの キーだけ 内がわに わくを 足す
   手の 絵の 指も 同じ 色で ぬって あるので（.hand-finger）、
   「この 色の キーは この 指」が ことばを 読まなくても つながります。

   ■ まわりの わくは すみ色の まま のこします
   わくまで 指の 色に すると、キーの かたち（キーキャップ）が
   ぼやけて しまいます。指の 色は「地の 色」と「下の わく」の
   2つで 出し、かたちを つくる わくは さわりません。 */
.kb.show-finger .kb-key {
  background: color-mix(in srgb, var(--finger, var(--surface)) var(--finger-tint), var(--surface));
  border-color: color-mix(in srgb, var(--finger, var(--line)) 35%, var(--line));
  border-bottom-color: var(--finger, var(--line));
  border-bottom-width: 5px;
}
.kb.show-finger .kb-key.is-top {
  background: var(--surface-2); border-color: var(--line); border-bottom-width: 2px;
}
.kb.show-finger .kb-key.is-home {
  box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--finger, var(--line)) 70%, transparent);
}

/* つぎに 押す キー。色 だけでは なく 太い わくと 三角の しるしで しめします。
   指の 色分けより 強く 出したいので、セレクタを .kb から 書きます */
/* ■ 地は --primary では なく --primary-deep を つかいます
   あかるい 画面の --primary（#4a90e2）に 白い 字を のせると 比 3.29 で、
   「つぎに 押す キー」の 文字が いちばん 読めない という 形に なって
   いました。--primary-deep なら 同じ 青の まま 5.61 に なります。 */
.kb .kb-key.is-next {
  background: var(--primary-deep); color: var(--primary-ink);
  border-color: var(--primary-deep); transform: translateY(-2px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent);
  z-index: 2;
}
/* ■ ここでも opacity は かけません
   .85 を かけると かな・記号だけが うすく なり、いちばん 見たい キーの
   よみが いちばん 読めなく なります。色は 地に あわせて 継がせるだけに します。 */
.kb .kb-key.is-next .kb-up,
.kb .kb-key.is-next .kb-kana,
.kb .kb-key.is-next .kb-name { color: inherit; }

/* 指の 色分けを 出して いる ときは、つぎに 押す キーも **その 指の 色**で
   光らせます。手の 絵の 光る 指と 色が そろうので、
   「この キー ＝ この 指」が 一目で つながります。
   キーの 文字が 読めなく ならない ように、色は 72% までに して
   文字は そのまま こい 色（--text）で のこします。 */
.kb.show-finger .kb-key.is-next {
  background: color-mix(in srgb, var(--finger, var(--primary)) var(--kb-next-tint), var(--surface));
  color: var(--kb-next-ink);
  border-color: var(--finger, var(--primary));
  border-bottom-color: var(--finger, var(--primary));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--finger, var(--primary)) 40%, transparent);
}
.kb .kb-key.is-next::before {
  content: ""; position: absolute; top: 2px; right: 3px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
}
.kb .kb-key.is-next-shift { box-shadow: inset 0 0 0 3px var(--primary); }

/* 打った しゅんかん。地の 色は 正誤で 分けますが、わくは すみ色の まま です
   （かたちが 変わらないので、色が 見分けにくい 子でも キーを 見うしないません）*/
/* ■ 文字色を #fff で 決め打ちしません
   くらい 画面では みどり・あかを **明るい ほう**に ふりなおして いるので、
   白い 字だと 実測で 1.58（みどり）／2.21（あか）に なって いました。
   打った しゅんかんに 出る しるしなので、いちばん 見たい ときに 見えません。 */
.kb .kb-key.hit-ok { background: var(--ok); color: var(--kb-hit-ink); }
.kb .kb-key.hit-miss { background: var(--ng); color: var(--kb-hit-ink); }
/* 小さい 字にも 継がせます。.kb-kana などは じぶんで --kb-ink を もって いるので、
   親の color だけ 変えても かなの ふりがなだけ 前の 色の まま のこり、
   みどり・あかの 面の 上で 実測 2.19 に なって いました */
.kb .kb-key.hit-ok .kb-up, .kb .kb-key.hit-ok .kb-kana, .kb .kb-key.hit-ok .kb-name,
.kb .kb-key.hit-miss .kb-up, .kb .kb-key.hit-miss .kb-kana, .kb .kb-key.hit-miss .kb-name,
.kb.shift-on .kb-key[data-code^="Shift"] .kb-name { color: inherit; }
.kb.shift-on .kb-key[data-code^="Shift"] { background: var(--primary-deep); color: var(--primary-ink); }

/* にがてな キーの ヒートマップ（きろく画面）。
   色の こさ だけでは わからない 子の ために、キーを 指で さわると 数も 出ます（title） */
.kb .kb-key.is-heat {
  /* いちばん こい ところでも 60% までに して、キーの 文字が 読めるように します */
  background: color-mix(in srgb, var(--ng) calc(var(--heat, 0) * 60%), var(--surface));
  border-color: color-mix(in srgb, var(--ng) calc(var(--heat, 0) * 85%), var(--line));
}

.heat-legend {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 0 12px; color: var(--muted); font-size: .82rem;
}
/* 色の 見本と「にがて とっくん」の ボタンを 1行に。
   図の 下に 2段 つむと、その ぶん キーボードが 画面の 外に 出ます */
.heat-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.heat-foot .heat-legend { margin: 0; }
.heat-sample {
  width: 18px; height: 18px; border-radius: 5px; display: inline-block;
  box-shadow: inset 0 0 0 1.5px var(--line); margin-left: 8px;
}
.heat-sample.lv1 { background: color-mix(in srgb, var(--ng) 24%, var(--surface)); }
.heat-sample.lv2 { background: color-mix(in srgb, var(--ng) 50%, var(--surface)); }
.heat-sample.lv3 { background: color-mix(in srgb, var(--ng) 80%, var(--surface)); }

/* きろく・せっていに 出す キーボードの 図。中の .kb は keyboard.js が
   組みます（class を 入れかえる ので、外がわの この わくを のこします）。
   はいらない ときは この わくの 中だけで よこに うごきます */
.kb-guide { margin: 10px 0; overflow-x: auto; }
/* 図の キーは、打つ 画面の キーボードほど 大きく なくても 見て わかります。
   ここを 大きく すると、その ぶん カードが たてに のびて
   1画面に おさまらなく なります（打つ 画面の 大きさは play.js が 決めます）*/
.kb-guide .kb { min-width: 480px; font-size: clamp(9px, min(1.1vw, 1.6vh), 15px); }

.finger-legend {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px;
}
.finger-legend li { display: flex; align-items: center; gap: 8px; font-size: .88rem; }

/* ---------------------------------------------------------------- ショートカット */

.sc-task {
  background: var(--surface); border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-lift); padding: 16px 18px; text-align: center;
}
.sc-name { margin: 0 0 4px; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.sc-name .ico { color: var(--c-amber); }
.sc-instruct { margin: 0 0 10px; font-size: clamp(1rem, 3vw, 1.15rem); }
.sc-combo { margin: 0 0 6px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.sc-combo kbd {
  font-family: var(--font); font-weight: 800; font-size: 1.05rem;
  background: var(--surface); border: 1.5px solid var(--line); border-bottom-width: 4px;
  border-radius: 9px; padding: 4px 12px; min-width: 44px; display: inline-block; text-align: center;
}
.sc-combo .plus { color: var(--muted); }
.sc-hint { margin: 0; color: var(--muted); font-size: .88rem; }
.sc-judge { margin: 8px 0 0; min-height: 1.6em; font-weight: 700; }
.sc-judge.ok { color: var(--ok); }
.sc-judge.ng { color: var(--ng); }

.sc-editor { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sc-editor { grid-template-columns: 1fr 1fr; } }
.sc-field { display: flex; flex-direction: column; gap: 4px; }
.sc-label { font-size: .82rem; color: var(--muted); font-weight: 700; }
.sc-field textarea {
  font: inherit; font-size: 1.02rem; line-height: 1.8;
  padding: 12px 14px; border-radius: var(--radius-s);
  border: 2px solid var(--line); background: var(--surface-2); color: var(--text);
  resize: vertical; min-height: 96px;
}
.sc-field textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 20%, transparent); outline: none; }
.sc-note { color: var(--muted); font-size: .86rem; display: flex; align-items: center; gap: 8px; }
.sc-skip { text-align: center; }

/* ------------------------------------------- ひとまわりの すすみ

   ステージは「さいごまで やった か」では なく「つみあがった か」で 見ます。
   3もんだけ 打って やめた 子に いちばん 見せたいのは、はやさでも ★でもなく
   **その 3もんが ちゃんと のこって いる** ことです。 */

.lap-bar {
  display: block; height: 12px; border-radius: 999px; overflow: hidden;
  background: var(--line);
}
.lap-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--c-teal); transition: width .3s ease;
}
.lap-note { margin: 6px 0 0; font-size: .86rem; color: var(--muted); font-weight: 700; }
.card-lap .lap-bar { margin-top: 4px; }

/* ------------------------------------------------------------------
   そのさき（だん）― ぜんぶ ★3に なった あとの はしご
   ------------------------------------------------------------------ */
.rank-now { margin: 4px 0 0; font-size: .95rem; }
.rank-todo { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.rank-up {
  margin: 0 0 6px; font-weight: 700; color: var(--ok);
  display: flex; align-items: center; gap: 6px;
}
.rank-sum { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: .88rem; }
.rank-chip { display: inline-flex; gap: 4px; align-items: baseline; }
.rank-goals { margin: 10px 0 0; padding-left: 1.1em; font-size: .86rem; color: var(--muted); }
.rank-goals li { margin-top: 2px; }
.stage-rank {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-size: .78rem; font-weight: 700; color: var(--c-amber);
  white-space: nowrap;
}
.stage-rank .ico { width: 16px; height: 16px; }

/* ステージ一覧の 中の すすみ。ならびを くずさない よう ひかえめに します */
.stage-lap { display: block; margin-top: 6px; }
.stage-lap .lap-bar { height: 6px; max-width: 220px; }
.stage-lap-text { display: block; margin-top: 3px; font-size: .76rem; color: var(--muted); }

/* 大きい ボタンの 下の ひとこと */
.start-note { margin: 8px 0 0; font-size: .84rem; }

/* ------------------------------------------- えらぶ（階層の 入口）

   ここは「ならべる ところ」では なく「入口」です。
   1行に 1つの 行き先だけを 置き、中身は それぞれの 下の 階層に わけます。
   たてに 長い 画面に すると、打ちはじめるまでに 読む ものが ふえます。 */

.menu-list { display: flex; flex-direction: column; gap: 12px; }
.menu-row[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.menu-row .row-icon { flex: none; color: var(--primary-deep); display: flex; }
.menu-row .row-icon .ico { width: 28px; height: 28px; }
.menu-row .row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-row .row-title { font-weight: 800; font-size: 1.05rem; }
.menu-row .row-note { font-size: .86rem; color: var(--muted); font-weight: 700; }
.menu-row .row-count { font-size: .8rem; color: var(--primary-deep); font-weight: 800; }
.menu-row .row-arrow { flex: none; color: var(--muted); display: flex; }

/* ---------------------------------------------------------------- けっか */

.card-result { text-align: center; }
.result-stars { margin-bottom: 6px; }
.result-stars .star .ico { width: 44px; height: 44px; }
.result-word { margin: 0 0 14px; font-size: 1.05rem; }
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;
}
.result-grid div {
  background: var(--surface-2);
  border-radius: var(--radius-s); padding: 12px 6px;
  display: flex; flex-direction: column; align-items: center;
}
.result-grid span { font-size: .78rem; color: var(--muted); font-weight: 700; }
.result-grid b { font-size: 1.8rem; color: var(--primary-deep); line-height: 1.2; font-weight: 900; }
.result-grid small { font-size: .74rem; color: var(--muted); }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }

.weak-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.weak-list li { display: flex; align-items: center; gap: 10px; }
.weak-count { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* ---------------------------------------------------------------- きろく */

.spark { width: 100%; height: auto; color: var(--primary-deep); }
.spark-area { fill: color-mix(in srgb, var(--primary) 22%, transparent); }
.spark-dot { fill: var(--primary-deep); }
.hist-list { list-style: none; padding: 0; margin: 0; }
.hist-list li { display: flex; gap: 10px; padding: 7px 0; border-bottom: 2px solid var(--line); font-size: .9rem; flex-wrap: wrap; }
.hist-list li:last-child { border-bottom: 0; }
.hist-date { color: var(--muted); min-width: 44px; font-weight: 700; }
.hist-title { flex: 1; min-width: 120px; font-weight: 700; }
.hist-num { color: var(--primary-deep); font-weight: 800; }

.star-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.star-course-title { font-weight: 800; margin: 0 0 4px; color: var(--muted); font-size: .85rem; }
.star-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .88rem; padding: 3px 0; }

/* ---------------------------------------------------------------- せってい */

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg.mt { margin-top: 12px; }
.seg-btn {
  font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; padding: 6px 16px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--text-2);
  box-shadow: 0 3px 0 var(--line);
  transition: transform .1s ease, box-shadow .1s ease, background-color .12s ease;
}
.seg-btn:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
/* えらばれて いる ものは、色だけ でなく **しずんだ かたち**でも しめします */
.seg-btn.on {
  background: linear-gradient(180deg, #3572bd, #265ea4); color: #fff;
  border-color: transparent;
  transform: translateY(3px); box-shadow: 0 0 0 transparent;
}

.switch { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-box {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  border: 2px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: transparent;
}
.switch-box .ico { width: 20px; height: 20px; stroke-width: 3; }
.switch input:checked + .switch-box { background: var(--primary); color: var(--primary-ink); }
.switch input:focus-visible + .switch-box { outline: 3px solid var(--primary-deep); outline-offset: 2px; }
.switch-label { font-size: .98rem; font-weight: 700; }

/* ファイルを えらぶ ボタン（きろくを もちだす 画面）。
   ブラウザが 出す「ファイルが 選択されて いません」の 見た目を 消しますが、
   **hidden や display:none には しません。** それを すると Tab の 順から
   外れ、マウスの 無い 人には 押す 手が なく なります。
   上の .switch と 同じで、見えない 本体に フォーカスを のこし、
   しるしは となりの 見える ラベルに 出します。 */
.file-pick-input { position: absolute; opacity: 0; width: 0; height: 0; }
.file-pick-input:focus-visible + .btn { outline: 3px solid var(--primary); outline-offset: 2px; }

/* きろくを けす ボタン。まちがえて 押しても すぐには 消えません（2だんかい） */
.btn-danger { color: var(--ng); background: var(--surface); }
.btn-danger-solid { background: var(--ng); color: #fff; }
.reset-confirm { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.howto { margin: 10px 0 0; padding-left: 1.2em; color: var(--muted); font-size: .88rem; }
.howto li { margin-bottom: 4px; }

/* ------------------------------------------- 打鍵の タイムライン（けっか） */

/* よこは 打った じゅんばん、たては かかった 時間。
   ミスは 色だけで なく 下に のびる しるしでも 分けます（色に たよらない） */
.tl { width: 100%; height: auto; }
.tl-ok { fill: var(--primary-deep); }
.tl-retry { fill: color-mix(in srgb, var(--primary-deep) 45%, transparent); }
.tl-ng { fill: var(--ng); }
.tl-tick { fill: var(--ng); }
.tl-mid { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }

/* ------------------------------------------- ヒントの つよさ */

/* 「ばしょだけ」の だんかい。キーの 文字を 消しますが、
   ホームポジションの 色と F・J の でっぱりは のこします。
   「どこを 押すか」は わかったまま、「どの 字か」だけが 見えなく なります */
.kb.is-blank .kb-main,
.kb.is-blank .kb-up,
.kb.is-blank .kb-kana,
.kb.is-blank .kb-name { visibility: hidden; }

.more { margin-top: 14px; }
.more > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  color: var(--muted); font-size: .92rem; font-weight: 700;
}

/* ------------------------------------------- おぼえぐあい（きろく） */

/* ミスの 数の ヒートマップとは べつの 見かた。
   「まちがえないけれど 手が とまる キー」が ここで はじめて 見えます。
   色だけでは 見分けにくい 子が いるので、キーごとに title と aria-label で
   「だいじょうぶ／もうすこし／まだまだ」と ことばも つけて います */
.kb-key.is-mastery::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--mastery, 0);
}
.kb-key.is-mastery.m-good::after { background: var(--ok); }
.kb-key.is-mastery.m-soso::after { background: var(--warn); }
.kb-key.is-mastery.m-weak::after { background: var(--ng); }
/* 数が 足りない キーは「にがて」とは べつの 見た目に します。
   2回 打っただけの キーを にがてと 言い切るのは まちがいです */
.kb-key.is-mastery.m-unknown::after {
  background: transparent; opacity: 1;
  border: 2px dashed var(--muted);
}

.mastery-sample {
  display: inline-block; width: 18px; height: 18px; border-radius: 5px;
  vertical-align: -4px; margin: 0 4px 0 10px; box-shadow: inset 0 0 0 1.5px var(--line);
}
.mastery-sample.m-good { background: var(--ok); }
.mastery-sample.m-soso { background: var(--warn); }
.mastery-sample.m-weak { background: var(--ng); }
.mastery-sample.m-unknown { background: transparent; border-style: dashed; border-width: 2px; }

.weak-key {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 9px; border: 1.5px solid var(--line); border-bottom-width: 4px;
  background: var(--surface); font-size: .92rem; font-weight: 800;
}
.weak-finger { color: var(--muted); font-size: .88rem; }
.rule-row { flex-wrap: wrap; }
.rule-name { font-weight: 700; }
.btn-small { min-height: 40px; padding: 6px 12px; font-size: .85rem; margin-left: auto; }

/* ------------------------------------------- ふくしゅう（ホーム） */

/* 「つづきから」と ならぶので、わざと ひかえめに します。
   大きな ボタンが 2つ あると どちらを 押すか まよいます */
.review-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.review-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  justify-content: flex-start; text-align: left; padding: 10px 14px;
}
.review-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.review-sub { font-size: .74rem; color: var(--muted); font-weight: 700; }
.review-title { font-size: 1rem; }
.review-when { font-size: .8rem; color: var(--muted); flex: none; }

/* ------------------------------------------- きろくの 書き出し・読みこみ */

/* ファイルの 中身を そのまま 見せる ところ。ダウンロードが 止められて いる
   端末では ここから コピーします */
.bk-text {
  width: 100%; margin: 10px 0; padding: 10px; font-size: .8rem; line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text); resize: vertical;
}
.bk-error {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--ng-soft);
  border: 2px solid var(--ng); color: var(--text); font-size: .92rem; font-weight: 700;
}
.bk-summary { list-style: none; padding: 0; margin: 12px 0; }
.bk-summary li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 2px solid var(--line); font-size: .92rem; font-weight: 700;
}
.bk-summary li:last-child { border-bottom: 0; }
.bk-summary span { color: var(--muted); }

/* ------------------------------------------- おまけの 周（もう1かい） */

/* 本編と 見分けが つくように、進みぐあいの バーの 色を かえます。
   色だけでは 分からないので、数の 前に「もういちど」と ことばでも 出します */
.play .bar { transition: background-color .2s ease; }
.play.is-retry .bar > span { background: var(--ok); }
.play.is-retry .play-progress .num { color: var(--text); }
#play-phase { font-weight: 700; }
.version { color: var(--muted); font-size: .78rem; margin: 10px 0 0; }

/* ---------------------------------------------------------------- レベル・つづけた日 */

/* レベルの おび。数字より「どこまで きたか」が ひとめで わかる ことを 大事にします */
.level-box { margin-bottom: 10px; }
.level-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.level-badge {
  font-weight: 800; font-size: 1.15rem; color: #fff;
  background: linear-gradient(180deg, #3572bd, #265ea4);
  border-radius: 999px; padding: 1px 14px;
}
.level-rank { font-weight: 800; }
.level-xp { margin-left: auto; color: var(--muted); font-size: .82rem; font-weight: 700; }
.level-bar {
  height: .6rem; border-radius: 999px; background: var(--line);
  overflow: hidden;
}
.level-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-green), #8fe6b7);
  box-shadow: 0 0 .4rem color-mix(in srgb, var(--c-green) 50%, transparent);
  transition: width .4s ease;
}

/* 文の とちゅうで 行が おれないよう、アイコンも 文字の ながれの 中に おきます */
.streak { margin: 10px 0; }
.streak .ico { width: 22px; height: 22px; vertical-align: -.35em; margin-right: 6px; }
.streak-on { color: #e2600a; }
.streak-off { color: var(--muted); }

/* れんしゅうした 日の カレンダー（4週間ぶん） */
.cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; margin: 10px 0; max-width: 420px; }
.cal-cell {
  display: block; aspect-ratio: 1; border-radius: 5px;
  background: var(--line);
}
.cal-cell.lv1 { background: color-mix(in srgb, var(--primary) 34%, var(--surface)); }
.cal-cell.lv2 { background: color-mix(in srgb, var(--primary) 65%, var(--surface)); }
.cal-cell.lv3 { background: var(--primary-deep); }
.cal-axis {
  display: flex; justify-content: space-between; max-width: 420px;
  margin: 0; color: var(--muted); font-size: .74rem; font-weight: 700;
}

/* ---------------------------------------------------------------- とくべつ れんしゅう */

.special-grid, .pool-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.special-tile, .pool-tile {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius); cursor: pointer;
  border: 2px solid var(--tile-s, var(--primary-soft)); background: var(--surface); color: var(--text);
  box-shadow: 0 4px 0 var(--tile-s, var(--primary-soft)), var(--shadow);
  font: inherit; text-align: left; min-height: 108px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.special-tile { background: linear-gradient(to right, var(--tile, var(--primary)) 0 10px, var(--surface) 10px); padding-left: 22px; }
.special-tile:hover:not(:disabled), .pool-tile:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lift); }
.special-tile:active:not(:disabled), .pool-tile:active { transform: translate(2px, 2px); box-shadow: 0 0 0 transparent; }
.special-tile:disabled { cursor: default; opacity: .5; box-shadow: none; }
/* えらばれて いる ものは、きいろの 地と **しずんだ かたち**で しめします */
.pool-tile.on {
  background: var(--accent-soft);
  transform: translate(2px, 2px); box-shadow: 0 0 0 transparent;
}
.pool-tile.on .tile-icon { color: var(--accent-deep); }

.course-extra { margin: 0 0 14px; }
.mt { margin-top: 12px; }

/* ---------------------------------------------------------------- バッジ */

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.badge-grid-all { margin-bottom: 24px; }
.badge-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding: 12px 8px; border-radius: var(--radius-s);
  background: var(--surface-2);
}
/* もらった バッジだけ 白い 面に して、かげで 浮かせます。
   ならんだ ときに「あつめた もの」だけが とび出して 見えます */
.badge-tile.got { background: var(--surface); box-shadow: var(--shadow); }
.badge-icon { color: var(--muted); }
.badge-icon .ico { width: 30px; height: 30px; }
.badge-tile.got .badge-icon { color: var(--accent-deep); }
.badge-title { font-weight: 800; font-size: .92rem; }
.badge-note { font-size: .76rem; color: var(--muted); line-height: 1.5; }
.card-badge-new { border-color: var(--primary); }

/* ---------------------------------------------------------------- けっかの ごほうび */

.result-best {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #ffb054, #ef8a17);
  border-radius: 999px; padding: 4px 16px;
}
.level-up {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 10px; font-weight: 800; color: var(--ok);
  background: var(--ok-soft); border: 2px solid var(--ok);
  border-radius: var(--radius-s); padding: 9px 14px;
}
.xp-total { margin: 0; font-size: 1.9rem; font-weight: 900; color: var(--primary-deep); }
.xp-total span { font-size: .82rem; color: var(--muted); font-weight: 700; margin-left: 4px; }
.xp-list { list-style: none; padding: 0; margin: 6px 0 12px; }
.xp-list li { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; padding: 3px 0; color: var(--muted); font-weight: 700; }
.xp-list li span { font-weight: 800; color: var(--text); }

/* ---------------------------------------------------------------- ローマ字ひょう */

.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 24px; }
.rt-section {
  background: var(--surface); border: 0;
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px;
}
.rt-title { margin: 0 0 6px; font-size: .95rem; color: var(--primary-deep); font-weight: 800; }
.rt-list { list-style: none; padding: 0; margin: 0; }
.rt-list li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; border-bottom: 2px solid var(--line); }
.rt-list li:last-child { border-bottom: 0; }
.rt-kana { font-size: 1.15rem; font-weight: 800; min-width: 2.4em; }
.rt-romaji { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; }
.rt-alt { color: var(--muted); font-size: .85em; }
.rt-note { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------- 下部バー */

.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  backdrop-filter: blur(10px);
  /* 線では なく かげで 本文から 浮かせます（上のバーと 同じ 考えかた）*/
  border-top: 1px solid var(--line);
  box-shadow: 0 -.2rem .8rem rgba(47, 61, 79, .08);
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .7rem; font-weight: 700;
  cursor: pointer; min-width: 44px; padding: 4px 2px;
}
.nav-btn .ico { width: 24px; height: 24px; }
.nav-btn.on { color: var(--primary-deep); font-weight: 900; }
.nav-btn.on .ico { stroke-width: 2.6; }
.nav-back { color: var(--text); font-weight: 800; }
.nav-back:disabled { color: var(--line); cursor: default; }
.nav-back:not(:disabled) { border-right: 1px solid var(--line); }

/* もどる先が ないときに、画面が すこし ゆれて 知らせます（アプリは とじません） */
body.root-bump .view { animation: bump .3s ease; }
@keyframes bump { 30% { transform: translateX(6px); } 70% { transform: translateX(-4px); } }

/* ---------------------------------------------------------------- はしスワイプ */

.edge-hint {
  position: fixed; top: 0; bottom: 0; left: 0; width: 76px; z-index: 50;
  pointer-events: none; opacity: 0;
  display: grid; place-items: center;
  background: linear-gradient(to right, color-mix(in srgb, var(--primary) 26%, transparent), transparent);
}
.edge-hint.from-right {
  left: auto; right: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--primary) 26%, transparent), transparent);
}
.edge-hint.is-active { opacity: calc(var(--pull, 0) * .95); }
.edge-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(180deg, #3572bd, #265ea4); color: #fff;
  transform: scale(calc(.6 + var(--pull, 0) * .4));
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
}
.edge-arrow::after {
  content: ""; width: 9px; height: 9px;
  border-left: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}
.edge-hint.from-right .edge-arrow::after { transform: rotate(-135deg) translate(1px, -1px); }

/* ---------------------------------------------------------------- しらせ */

.toast-area {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 60; display: flex; flex-direction: column; gap: 8px;
  width: min(560px, calc(100% - 24px)); pointer-events: none;
}
.toast-item {
  background: var(--text); color: var(--surface);
  border-radius: 999px;
  padding: 10px 18px; font-size: .92rem; font-weight: 700;
  box-shadow: var(--shadow-lift); text-align: center;
}

/* ---------------------------------------------------------------- 動きを へらす */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* うごきを 飛ばすのは「最後の すがたを すぐ 出す」ためで、
     **おしらせを 消す ためでは ありません**。
     ひとまわりの しるしは 最後の すがたが「消えた ところ」なので、
     上の 決まりだけでは ★3つの おしらせごと 見えなく なります。
     ここは アニメーションを つかわず、そのまま 出して
     js/play.js の 時間で 消します */
  .lap-flash.is-on, .lap-flash.is-full.is-on { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------- ハイコントラスト

   Windows の「ハイコントラスト（コントラストテーマ）」を つかって いる 児童の
   画面では、**地の 色が ぜんぶ 無効に されます**。
   Typa は「つぎに 押す キー」を 地の 色で 出して いるので、
   その ままだと **どこを 押せば いいのか 分からなく なります**。
   色の かわりに、OS が 用意した 色（Highlight / ButtonText）で
   わくと 文字を 引きなおします。 */
@media (forced-colors: active) {
  /* 押せる ものは、地が 消えても わくで 分かるように します */
  .btn, .nav-btn, .kb-key, .switch-box, .tile, .row-btn {
    border: 2px solid ButtonText;
  }
  /* つぎに 押す キー。OS の 選択色で ぬり、ふとい わくを 足します */
  .kb .kb-key.is-next {
    background: Highlight; color: HighlightText;
    border: 3px solid Highlight; outline: 2px solid HighlightText; outline-offset: -4px;
  }
  .kb .kb-key.is-next .kb-up,
  .kb .kb-key.is-next .kb-kana,
  .kb .kb-key.is-next .kb-name,
  .kb .kb-key.is-next .kb-main { color: HighlightText; forced-color-adjust: none; }
  /* ○×は 色が 消えても 分かるよう、わくの 太さで 分けます */
  .kb .kb-key.hit-ok { border: 4px double ButtonText; }
  .kb .kb-key.hit-miss { border: 4px dashed ButtonText; }
  /* いま えらばれて いる タブ */
  .nav-btn.is-on { background: Highlight; color: HighlightText; }
  /* 指の 色分けは 地の 色でしか 出せないので、下の わくで つなぎます。
     色の 区別は つきませんが、「ここで 指が かわる」は 見えます */
  .kb.show-finger .kb-key { border-bottom: 5px solid ButtonText; }
  .kb.show-finger .kb-key.is-home { outline: 2px dotted ButtonText; outline-offset: -5px; }
  /* かざりの かげは 消えるので、わくで 面の 切れ目を 出します */
  .card, .play-stage { border: 1px solid CanvasText; }
  .update-bar { border: 2px solid ButtonText; }
}

/* ---------------------------------------------------------------- あたらしい 版の おしらせ

   新しい 版が 待って いる ときだけ 出ます。**押されるまで 切りかわりません。**
   打って いる とちゅうでも じゃまに ならないよう、下部バーの すぐ 上に
   横いっぱいの 帯で 出し、「あとで」も えらべる ようにして います。 */
.update-bar {
  position: fixed; z-index: 60;
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--primary-deep); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 10px 14px;
}
.update-bar .update-text { flex: 1; min-width: 140px; font-weight: 800; font-size: .95rem; }
.update-bar .btn { min-height: 44px; margin: 0; padding: 8px 16px; font-size: .92rem; }

/* ---------------------------------------------------------------- 印刷

   Typa は 印刷して つかう アプリでは ありませんが、
   先生が ローマ字ひょうを 紙に する ことは あります。
   そのとき 画面に はりついた ボタンや 帯が 上に かぶって 出ないように します。
   （更新の 帯・トーストのような **あとから 足した 固定要素**にも
   .no-print を 付けて ここで 消します） */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body {
    background: #fff; color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding-bottom: 0; min-height: 0;
  }
  .navbar, .brand, .toast-area, .fx-layer, .edge-hint,
  .update-bar, .no-print, .btn { display: none !important; }
  .view { padding: 0; }
  .card, .rt-table, table { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* たてに ゆとりの ある 画面では 練習の お題を もっと 大きく */
@media (min-width: 1000px) and (min-height: 1001px) {
  .q-kana { font-size: 3.2rem; }
  .play-stage { padding: 30px 26px; }
}

/* ---------------------------------------------------------------- たてが みじかい 画面

   学校の Chromebook（1366×768）は、ブラウザの わくを のぞくと たてが
   600px ほど しか ありません。打つ 画面は アプリの 入口 その ものなので、
   **キーボードまで ぜんぶ 見えて いる** ことが 何より 大事です。
   スクロールしないと キーボードが 見えないのは、打ちながら スクロールが
   できない ぶん「使えない」のと 同じ です。

   キーボードの 大きさは play.js が 画面を はかって 決めます。だから
   ここで つめた すきまは、**そのまま キーボードの 大きさに なります**。
   お題の 文字は いちばん 最後に、いちばん 少しだけ 小さく します。

   ■ 1000px を さかい目に して いる わけ
   ノートPC・Chromebook は ブラウザの わくを のぞくと たてが 600〜950px
   です。つまり 学校の 端末は ほとんど こちら側 です。
   ゆったり した ならびに するのは、たてに ほんとうに ゆとりの ある
   タブレットや 大きな モニターだけ に します。 */

@media (max-height: 1000px) {
  /* かざりの ブランド行（52px）は、打つ 画面では キーボードに ゆずります。
     この 1行が そのまま「手の 絵が 画面の 外に 出る」ぶんに なります */
  body[data-screen="play"] .brand { display: none; }
  body[data-screen="play"] .view { padding-top: 10px; padding-bottom: 14px; }
  .play { gap: 8px; }
  .play-stage { padding: 12px 16px; }
  .q-label { font-size: 1rem; line-height: 1.5; }
  .q-kana { font-size: clamp(1.7rem, 4.6vw, 2.3rem); }
  .q-romaji { font-size: clamp(1rem, 3vw, 1.3rem); margin-top: 6px; }
  .play-meter { gap: 6px; }
  .meter { padding: 2px 12px; line-height: 1.4; }
  .play-finger { min-height: 38px; padding: 4px 14px; line-height: 1.45; }
  .play-ready { font-size: .82rem; }
  /* 「やめる」は 1行に して、そえた ことばは しまいます
     （ボタン じたいは かならず のこします。やめかたが 見えなく
       なるのが いちばん こまるからです） */
  .play-foot { min-height: 0; gap: 8px; }
  .btn-stop { min-height: 40px; padding: 4px 16px; flex-direction: row; gap: 6px; }
  .btn-stop .btn-note { display: none; }
  .play-foot .btn-ghost { min-height: 40px; }
}

/* ちびキャラは よこに いるので、じつは **お題の たかさ**を 決めて
   いました（絵の ほうが 高い ため）。たてが みじかい ときは
   すこし 小さく して、その ぶんを キーボードに まわします。
   よこに ならぶ 画面（820px いじょう）だけの はなし です */
@media (max-height: 1000px) and (min-width: 820px) {
  .play-main { grid-template-columns: 1fr minmax(150px, 200px); }
}

/* よこに ゆとりが ある ときは「つぎの 指」と きろくの 数字を よこ 1行に
   します（1行ぶん 50px が そのまま キーボードの 大きさに なります）。
   「つぎの 指」は いちばん だいじな 案内 なので、ひろい ほうを あげます */
@media (max-height: 1000px) and (min-width: 760px) {
  .play-status { flex-direction: row; align-items: center; gap: 10px; }
  .play-status .play-finger { flex: 1 1 auto; min-width: 0; }
  .play-status .play-meter { flex: 0 1 auto; }
}

/* たてが みじかく なって きたら、ブランド行は どの 画面でも しまいます */
@media (max-height: 820px) {
  .brand { display: none; }
  .view { padding-top: 10px; padding-bottom: 14px; }
}

/* たてが みじかい ときは、おしらせの ぶんを キーボードに ゆずります */
@media (max-height: 760px) {
  .play-ready { display: none; }
  .hands-label { display: none; }
}

@media (max-height: 700px) {
  .play { gap: 6px; }
  .play-stage { padding: 10px 14px; }
}

/* たてが これより みじかい ときは、お題の 字も すこし つめます。
   キーボードの 大きさは play.js が 画面を はかって きめるので、
   ここで つめた ぶんは そのまま キーボードの 大きさに なります。 */
@media (max-height: 620px) {
  .play-stage { padding: 8px 14px; }
  .q-kana { font-size: clamp(1.6rem, 4.2vw, 2rem); }
  .q-romaji { margin-top: 4px; }
}

/* どうしても 入らない とき（字を 大きく して いる・ウィンドウが 小さい） */
@media (max-height: 540px) {
  .play-visual { display: none; }
  .play-ready { display: none; }
  .play-stage { padding: 8px 14px; }
}

/* ================================================================ 1画面に おさめる

   打つ 画面いがい（えらぶ・きろく・せってい）を、タブレットや パソコンで
   ひらいた ときに **スクロールしないで 見わたせる** ように します。

   ■ なぜ カードの はばを かえるのか
   カードは たてに 1れつ ならんで いました。せまい スマートフォンでは
   それが 正しい ならびですが、よこに ひろい 画面では **本文の 右がわが
   ずっと 空いた まま、たてに どんどん 長く なります**。
   1画面に 入らない ぶんは スクロールしないと 見えないので、
   「どんな ものが あるのか」が ひと目では わからなく なります。
   よこの あいた ぶんに カードを ならべると、同じ 中身が
   たて はんぶんの 高さに おさまります。

   ■ 打つ 画面には かけません
   打つ 画面は お題と キーボードの 図が 主役で、ならべる ものが ありません
   （キーボードの 大きさは play.js が 画面を はかって 決めます）。 */

@media (min-width: 800px) {
  /* きろく・せっていの ひきだしの 中。
     multicol（columns）を つかうのは、カードの まいすうも 高さも
     ひきだしごとに ちがう からです。grid で れつを 決めうちすると
     となりの れつの 高さに ひきずられて、下に 大きな すきまが できます。
     multicol なら 高さを そろえて 分けて くれます。

     ■ れつは 2つまで
     3れつも ためしましたが、カードの 中には えらぶ ボタンの ならび（.seg）や
     スイッチが 入って いて、れつが せまく なると **ボタンが おれて
     かえって たてに のびます**（せってい画面は 118px 高く なりました）。
     2れつは、どの ひきだしでも 中身が おれない はば です。 */
  .section-body, .card-cols { columns: 2; column-gap: 16px; }
  .section-body > .card, .card-cols > .card,
  .section-body > .fold { break-inside: avoid; }

  /* れんしゅうした 日の カレンダー（4週間）。よこに ゆとりが ある ときは
     2行では なく **1行**に します（1しゅうかんずつ 目で 追えます）*/
  .cal { grid-template-columns: repeat(28, 1fr); max-width: none; }
  .cal-axis { max-width: none; }

  /* えらぶ画面。「つづきから」の かたまりと 行き先の ならびを よこに おきます。
     auto-fit なので、つづきの カードが ない ときは ならびが はば いっぱいに なります。

     ■ 左の れつは 右と 同じ たかさまで のばします
     左は カード1まい（つづきから）、右は 行き先が 4つ ならぶ ので、
     上ぞろえに すると 左の ボタンだけが 宙に うかんで 見えました。
     左の さいごの カードに あまった たかさを わたし、その 中身を
     たての まんなかに おきます。2つの れつが 同じ 高さで おわるので、
     ページの 下の へりが そろいます。 */
  .menu-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px; align-items: stretch;
  }
  .menu-col { display: flex; flex-direction: column; }
  .menu-col > .card { margin-bottom: 16px; }
  /* さいごの カードは **のばさず**、あまった たかさを 上下に 分けて
     まんなかに おきます。
     まえは カードじたいを のばして いましたが、わくの ない 白い カードに
     なった いまは、のばすと ただの 大きな 空白に 見えます。
     カードは 中身ぶんの 大きさの まま、位置だけ まんなかに します。 */
  .menu-col > .card:last-child { margin-top: auto; margin-bottom: auto; }

  /* コースと ステージの 一覧。行が 高い ので、2れつに すると
     たての ながさが ほぼ はんぶんに なります */
  .course-list, .stage-list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px; align-items: start;
  }
  /* ステージを つなぐ たての 線（「みち」）は、1れつに ならんで いる ときだけ
     すじが とおります。2れつでは 出しません（番号と かんむりで 順は わかります）*/
  .course-list .stage-row + .stage-row::before,
  .stage-list .stage-row + .stage-row::before { display: none; }
}

/* キーボードの 図が 入る カードは よこに ひろい ほうが 見やすい ので、
   **たてに ゆとりが ある ときだけ** 2れつぶんを つかいます。
   たてが みじかい ノートPC では、ひろげた ぶんが そのまま
   「スクロールしないと 見えない」に なるので、れつの 中に おさめます
   （はいらない ときは .kb-guide の 中だけで よこに うごきます）。 */
@media (min-width: 1000px) and (min-height: 901px) {
  .section-body > .card-wide, .card-cols > .card-wide { column-span: all; }
}

/* ひろい 画面では、一覧（コース・ステージ）の ために 本文の わくを
   すこし ひろげます。1れつぶんが せまいと ステージ名が 2行に おれて、
   行の たかさが 1.4ばいに なります（おれない ほうが みじかく おさまります）。 */
@media (min-width: 1200px) {
  body:not([data-screen="play"]) .view { width: min(1240px, 100%); }
}

/* たてが みじかい 画面（学校の Chromebook・ノートPC）では、
   すきまと かざりを つめて 中身の ぶんを かせぎます。
   文字の 大きさは かえません（読みにくく なるのが いちばん こまります）。
   打つ 画面は じぶんで 場所を はかるので、ここでは さわりません。
   ヒーロー（レベルの わっか）と ひきだしの 見出しは css/fx.css の もち物 なので、
   その 2つの つめかたは あちらに 書いて あります。 */
@media (max-height: 900px) {
  body:not([data-screen="play"]) .view { padding-top: 10px; padding-bottom: 16px; }
  body:not([data-screen="play"]) .page-head { margin: 0 2px 10px; }
  /* 画面の 名前は、大きさより「そこに ある こと」が だいじ です。
     行の たかさも つめます（1.75 → 1.35 で 20px ちかく かせげます）*/
  body:not([data-screen="play"]) .page-head h1 { font-size: clamp(1.25rem, 3vw, 1.5rem); line-height: 1.4; }
  body:not([data-screen="play"]) .page-note { font-size: .88rem; line-height: 1.5; }
  body:not([data-screen="play"]) .card { padding: 12px 14px; margin-bottom: 10px; }
  body:not([data-screen="play"]) .hint-box { padding: 9px 12px; margin-bottom: 10px; }
  body:not([data-screen="play"]) .lead { margin-bottom: 6px; }
  .menu-row { min-height: 66px; padding: 10px 14px; }
  .course-row, .stage-row { min-height: 64px; padding: 8px 12px; }
  .today-item { padding: 6px 4px; }
  .cal { margin: 6px 0; }
  .section-body, .card-cols { column-gap: 14px; }
  .switch { min-height: 44px; }
  /* 図の キーは、たてが みじかい ときは もう ひとまわり 小さく します
     （手もとと 見くらべる ための 図 なので、これ より 小さくは しません）*/
  .kb-guide { margin: 6px 0; }
  .kb-guide .kb { font-size: clamp(9px, min(1.05vw, 1.35vh), 13px); }
  /* 指の 色の 見本は 9つ。れつを ふやすと 行が へって、その ぶん
     キーボードの 図が 画面に おさまります */
  .finger-legend { margin-top: 6px; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .finger-legend li { font-size: .84rem; }
  .stage-note, .row-note { line-height: 1.5; }
  .card-course .btn { min-height: 40px; padding: 6px 14px; font-size: .9rem; }
  /* あつめた ものが ふえると いちばん たかく なる ところ。
     れつを ふやし、1まいの すきまを つめます */
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
  .badge-tile { padding: 8px 6px; }
  .badge-note { line-height: 1.4; }
  .weak-list { gap: 4px; }
  .weak-list li { line-height: 1.5; }
  .heat-legend { margin: 6px 0 8px; }
  .hist-list li { padding: 5px 0; line-height: 1.5; }
}

/* たてが 700px より みじかい 画面（学校の Chromebook で ブラウザの わくを
   のぞくと ここに 入ります）。もう ひとまわり つめます。
   ここでも 文字の 大きさは かえず、すきまと 行の たかさだけを つめます。 */
@media (max-height: 700px) {
  body:not([data-screen="play"]) .card { padding: 10px 14px; margin-bottom: 8px; }
  body:not([data-screen="play"]) .view { padding-bottom: 12px; }
  .stage-row, .course-row, .menu-row { padding: 6px 12px; }
  .stage-title, .row-title { line-height: 1.45; }
  .stage-note, .row-note, .stage-best, .row-count { line-height: 1.4; }
  .kb-guide { margin: 4px 0; }
}