/* =====================================================================
   Typa — fx.css（見た目の たのしさと、情報の 階層）
   =====================================================================
   style.css は「読みやすさ」を うけもち、この ファイルは
   「たのしさ」と「まとまり（階層）」を うけもちます。

   ■ どうして 分けたのか
   きろく画面が 12まいの カードの たてならびに なり、ひらいた 子が
   どこを 見れば いいのか わからなく なりました。**数が 多い ことが
   問題では なく、ならんで いる ことが 問題**です。そこで
     1. いちばん 上に「いまの じぶん」を 1つだけ 大きく 出す（.hero）
     2. のこりは 4つの ひきだしに 分け、1つずつ 見せる（.subtabs）
     3. その 中も、さらに たたんで おける ように する（.fold）
   という 3段の 階層に しました。1画面に 出る カードは 多くて 3まいです。

   ■ うごきの きまり
   うごきは js/fx.js が つけます。ここには その うごきの 中身だけを
   書きます。「動きを へらす」設定の 端末では style.css の おわりに ある
   きまりで ぜんぶ 止まります（この ファイルの うごきも 同じです）。

   ■ 画面が 入れかわる ときの うごき（manabi-quest と 同じ 考えかた）
   「いま どこに いるのか」を、ことばを 読まなくても わかる ように します。
     1. 奥の 階層へ 入る … あたらしい 画面は **右から** すべりこみ、
        前の 画面は **左へ** すべって 消えます（.fx-ghost）。
        2つが すれちがうので「奥に 入った」ことが 体で わかります。
     2. もどる … その 反対。左から 入り、右へ 出て いきます。
     3. 下の バーの タブ … ならびの 右へ 動いたら 右から、左なら 左から。
     4. 中身は 上から じゅんに、すこしずつ ずれて 出ます（.fx-rise）。
        目が 自然に 上から 下へ ながれます。
   向きは js/nav.js が 決め、js/app.js が fx.js に わたします。

   ■ 「とびら」を 押した ときの うごき
   押してから つぎの 画面が 出るまでの わずかな 間（0.15びょう）に、
   ①本体が しずむ ②光が 横切る ③矢じるしが 先に 走る の 3つが 起きます。
   押した ことが かならず 目に 見えるので、とどいたか わからずに
   2回 押して しまう ことが なくなります。
   ===================================================================== */

:root {
  --fx-ease: cubic-bezier(.2, .85, .3, 1);
  --fx-bounce: cubic-bezier(.2, 1.5, .4, 1);
}

/* ---------------------------------------------------------------- 出しいれ */

/* 画面に 出てくる ときの うごき。--fx-d で ひとつずつ ずらします。

   ■ よこの ずれ（--fx-x）で「どっちへ 動いたか」を つたえます
   奥へ すすんだ ときは **右から**、もどった ときは **左から** 入ります。
   タブを 変えた ときも、右どなりの タブなら 右から 入ります。
   文字を 読まなくても「入った / 帰ってきた」が 体で わかります。
   （向きは js/nav.js が 決め、js/app.js が #view に class を つけます）*/
.fx-rise {
  animation: fx-rise .38s var(--fx-ease) both;
  animation-delay: var(--fx-d, 0ms);
}
@keyframes fx-rise {
  from { opacity: 0; transform: translate(var(--fx-x, 0), 14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* 出て いく 画面。入って くる 画面と **すれちがう** ように、
   反対がわへ すべって 消えます。
   写しとった 見た目を かさねて うごかすだけ なので、
   本物の 画面（#view）の 中身には さわりません（js/fx.js の ghost）。 */
.fx-ghost {
  position: fixed; z-index: 30; pointer-events: none;
  overflow: hidden;
  animation: fx-ghost-out .26s ease-in both;
}
@keyframes fx-ghost-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(var(--fx-gx, 0)) scale(.97); }
}

/* おいわいの ひらひらを 出す ところ。画面の いちばん 上に かぶせますが、
   さわれない ように します（打つ じゃまを しません） */
.fx-layer {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; overflow: hidden;
}
.fx-bit { position: absolute; will-change: transform, opacity; }
.fx-ripple {
  position: absolute; width: 160px; height: 160px; border-radius: 50%;
  border: 4px solid var(--primary);
}

/* ---------------------------------------------------------------- 背景

   うすい 色の たまが ゆっくり うごきます。カードは すきとおって いないので
   文字の 読みやすさは かわりません。打つ 画面では 止めます
   （視界の はしで 何かが うごいて いると、そちらに 目が いきます）。 */

body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 14% 10%, color-mix(in srgb, var(--c-blue) 16%, transparent), transparent 62%),
    radial-gradient(32vmax 32vmax at 86% 16%, color-mix(in srgb, var(--c-violet) 13%, transparent), transparent 62%),
    radial-gradient(36vmax 36vmax at 72% 92%, color-mix(in srgb, var(--c-cyan) 14%, transparent), transparent 62%);
  animation: bg-drift 30s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2%, 0) scale(1.08); }
}
body[data-screen="play"]::before { animation: none; opacity: .4; }

/* ---------------------------------------------------------------- カード */

.card {
  position: relative;
  transition: transform .18s var(--fx-ease), box-shadow .18s var(--fx-ease);
}

/* 押せる ものは、さわると すこし もち上がります。
   「押せる ものには 下に あつみが ある」を どの 画面でも 同じに して
   いるので（style.css の とびら）、ここでは その あつみを 上げ下げします。
   押せない ものは うごかしません（うごく＝押せる、を まもります） */
.badge-tile.got:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.menu-row[disabled]:hover { transform: none; }

/* 行の 矢じるしが、さわると すこし 前に 出ます */
.row-arrow { transition: transform .18s var(--fx-ease); }
.menu-row:hover .row-arrow, .course-row:hover .row-arrow, .stage-row:hover .row-arrow {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- とびらを 押す

   押した しゅんかんから、つぎの 画面が 出るまでの わずかな 間（0.15びょう）に
   3つの ことが 起きます。
     1. 本体が ぐっと しずんで もどる
     2. 光が さっと 横切る
     3. 矢じるしが 先に 走って いく
   「押した」ことが かならず 目に 見えるので、とどいたか どうかで
   まよって 2回 押す ことが なくなります。
   （class は js/fx.js の tapThen() が つけます。
     「動きを へらす」設定の 端末では、待たずに すぐ すすみます）*/
.menu-row.tapped, .course-row.tapped, .stage-row.tapped, .course-tile.tapped,
.special-tile.tapped, .btn.tapped {
  animation: fx-tap .26s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes fx-tap {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(5px) scale(.982); }
  100% { transform: translateY(0) scale(1); }
}
.menu-row::after, .course-row::after, .stage-row::after, .course-tile::after,
.special-tile::after, .btn-big::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  transform: translateX(-120%);
}
.tapped::after { animation: fx-sheen .5s ease-out both; }
@keyframes fx-sheen {
  from { transform: translateX(-120%); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}
.tapped .row-arrow { animation: fx-arrow-go .45s ease-out both; }
@keyframes fx-arrow-go {
  0% { transform: translateX(0); opacity: .75; }
  45% { transform: translateX(14px); opacity: 0; }
  46% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: .75; }
}

/* おびは かならず なめらかに のびます（fx.js が 0 から のばします）*/
.lap-bar > span, .level-bar span, .row-bar span, .ring-fg {
  transition: width .8s var(--fx-ease);
}

/* ---------------------------------------------------------------- ヒーロー

   「いまの じぶん」を 1つだけ 大きく 出す ところ。
   きろく画面を ひらいて **さいしょに 目に 入る もの**です。
   数字を ならべるのでは なく、わっか（レベル）と ひとことで 見せます。 */

/* いちばん 目立つ ところ なので、ここだけ 色を ぬりつぶします。
   ほかの カードは 白い 面 なので、1画面に 1つだけ 色の かたまりが あって
   「まず ここを 見る」が かたちで わかります。 */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 16px;
  border-radius: var(--radius); border: 0;
  /* 白い 文字が どこでも 読める こさに します。
     明るい ほうの はし（#356fb8）でも コントラストは 5.1 あります。
     もっと 明るい 青は きれいですが、白ぬきの 文字が 読めなく なります */
  background: linear-gradient(135deg, #356fb8, #2b68b4 55%, #5b48cf);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.hero::before { display: none; }

/* ななめに ゆっくり ながれる ひかり。7びょうに 1回だけ 通ります */
.hero::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
  left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  animation: hero-shine 7s ease-in-out 1.2s infinite;
}
@keyframes hero-shine {
  0% { left: -60%; } 26%, 100% { left: 130%; }
}
html[data-theme="dark"] .hero::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); }

/* レベルの わっか。中を 白で ぬって「バッジ」に 見せます */
.hero-ring {
  position: relative; width: 118px; height: 118px; flex: none;
  border-radius: 50%; background: #fff;
  box-shadow: 0 .3rem .8rem rgba(20, 40, 70, .25);
}
.hero-ring .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #dde8f5; stroke-width: 11; }
.ring-fg {
  fill: none; stroke: url(#fx-ring-grad); stroke-width: 11; stroke-linecap: round;
}
.hero-lv {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  line-height: 1.1;
}
.hero-lv-num { display: block; font-size: 2.5rem; font-weight: 800; color: #2b68b4; }
/* わっかの 中は どの テーマでも 白い ので、色は 決めうちに します */
.hero-lv-cap { display: block; font-size: .68rem; color: #5a6b80; letter-spacing: .12em; font-weight: 700; }

.hero-body { flex: 1; min-width: 190px; }
.hero-rank { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; color: #fff; }
.hero-xp { margin: 2px 0 10px; color: rgba(255, 255, 255, .88); font-size: .88rem; font-weight: 700; }
.hero-xp b { color: #fff; font-size: 1.05rem; font-weight: 800; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
/* 色の 地の 上の チップ。
   白を すかして のせると 文字が 読みにくく なるので（すけた 白は
   地の 青と まざって、白い 文字との さが 3.6 まで おちます）、
   **白で ぬりつぶして こい 文字**を のせます */
.hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 0; border-radius: 999px;
  padding: 3px 14px; font-size: .84rem; color: #4b5c70; font-weight: 700;
}
.hero-chip b { color: #2f3d4f; font-size: 1.05rem; font-weight: 800; }
.hero-chip .ico { width: 18px; height: 18px; color: #5a6b80; }
.hero-chip.is-fire .ico { color: #d2541a; animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.16) rotate(-5deg); }
  62% { transform: scale(1.05) rotate(4deg); }
}

/* ---------------------------------------------------------------- ひきだし（サブタブ）

   1つの 画面に ぜんぶ ならべる かわりに、4つの ひきだしに 分けて
   1つずつ 見せます。**下の バーの タブとは 見た目を はっきり 変えます**
   （同じ 見た目だと、どちらが 上の 階層か わからなく なります）。 */

.subtabs {
  display: flex; gap: 6px; margin: 0 0 16px;
  padding: 5px; border-radius: 999px;
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow);
  overflow-x: auto; scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 6px 15px; white-space: nowrap;
  border: 2px solid transparent; border-radius: 999px; background: transparent;
  font: inherit; font-weight: 800; font-size: .9rem; color: var(--muted);
  cursor: pointer; position: relative;
  transition: color .18s ease, background-color .22s var(--fx-ease), transform .18s var(--fx-bounce);
}
.subtab .ico { width: 19px; height: 19px; transition: transform .3s var(--fx-bounce); }
.subtab:hover { color: var(--text); }
.subtab.on {
  background: linear-gradient(180deg, #3572bd, #265ea4); color: #fff;
  border-color: transparent;
  box-shadow: 0 .2rem .5rem rgba(43, 104, 180, .35);
}
.subtab.on .ico { transform: scale(1.16) rotate(-6deg); }
.subtab.on::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 0;
}

/* ひきだしの 中身。切りかえた ときに すっと 入れかわります */
.section-body { animation: fx-slide .3s var(--fx-ease) both; }
@keyframes fx-slide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* 中身が ない ひきだし。「まだ ない」ことを、さびしく なく つたえます */
.empty {
  text-align: center; padding: 26px 18px;
  color: var(--muted); font-weight: 700;
}
/* 大きく するのは **じかの 子** の アイコンだけ です。
   `.empty .ico` と 書くと、下に おいた ボタンの 中の アイコンにも あたり、
   ボタンの 文字色（白）を 上書きして しまいます */
.empty > .ico { width: 46px; height: 46px; color: color-mix(in srgb, var(--primary-deep) 60%, transparent); }
.empty-title { margin: 8px 0 4px; font-weight: 800; color: var(--text); font-size: 1.02rem; }
.empty p { margin: 0; font-size: .9rem; }
.empty .btn { margin-top: 14px; }

/* ---------------------------------------------------------------- たたむ

   ひきだしの 中を さらに たためる ように します。
   コースごとの ★や、ふるい れんしゅうの ならびは、ふだんは
   **数だけ 見えて いれば じゅうぶん**です。 */

.fold {
  border: 0; border-radius: var(--radius-s);
  background: var(--surface-2); margin-top: 10px; overflow: hidden;
}
.fold + .fold { margin-top: 8px; }
.fold > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 8px 14px; cursor: pointer;
  font-weight: 800; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 3px solid var(--text); border-bottom: 3px solid var(--text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--fx-ease);
}
.fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold > summary:hover { background: var(--primary-soft); }
/* ひらいて いる ときは 見出しに 色を しいて、どこを ひらいて いるかを
   ならんだ ときにも 見わけられる ように します */
.fold[open] > summary { background: var(--primary-soft); color: var(--primary-deep); }
.fold[open] > summary::after { border-color: var(--primary-deep); }
.fold-count { margin-left: auto; font-size: .82rem; color: var(--muted); font-weight: 800; }
.fold > summary::after { margin-left: 10px; }
.fold-body { padding: 4px 14px 14px; animation: fx-slide .26s var(--fx-ease) both; }

/* たたんだ 見出しが いくつも ならぶ ところ（コースごとの ★ など）。
   ひろい 画面では 2れつに して、たての ながさを はんぶんに します */
@media (min-width: 700px) {
  .fold-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
  .fold-cols .fold, .fold-cols .fold + .fold { margin-top: 0; }
}

/* ---------------------------------------------------------------- ならんだ 数字

   「きょうの ようす」などの 3つの 数字。数字が そだつ うごき（fx.js）と
   あわせて、1つずつ 大きさの ある はこに 入れます。 */

.today-item {
  position: relative; padding: 12px 4px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 0;
  transition: transform .2s var(--fx-ease);
}
.today-item:hover { transform: translateY(-2px); }
.today-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- ★ */

.stars .star { transition: transform .2s var(--fx-bounce), color .2s ease; }
.stars .star.on { animation: star-glow 2.6s ease-in-out infinite; }
.stars .star.on:nth-child(2) { animation-delay: .25s; }
.stars .star.on:nth-child(3) { animation-delay: .5s; }
@keyframes star-glow {
  0%, 78%, 100% { transform: scale(1); filter: none; }
  86% { transform: scale(1.2) rotate(-8deg); filter: drop-shadow(0 0 6px rgba(240, 180, 41, .6)); }
}

/* けっか画面の ★は 大きいので、じゅんばんに ぴょこんと 出します（fx.js）*/
.result-stars .star { display: inline-block; }

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

.badge-tile {
  position: relative; overflow: hidden;
  transition: transform .2s var(--fx-ease), box-shadow .2s var(--fx-ease);
}
.badge-tile.got::before {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: badge-shine 6s ease-in-out infinite;
}
@keyframes badge-shine { 0% { left: -70%; } 22%, 100% { left: 150%; } }
html[data-theme="dark"] .badge-tile.got::before { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); }
.badge-tile .badge-icon .ico { transition: transform .3s var(--fx-bounce); }
.badge-tile.got:hover .badge-icon .ico { transform: scale(1.2) rotate(-8deg); }
/* まだ もらって いない バッジは しずかに します（見せますが 目立たせません） */
.badge-tile:not(.got) { opacity: .72; }

/* あつめぐあいの おび */
.collect-bar {
  display: block; height: .55rem; border-radius: 999px; overflow: hidden;
  background: var(--line); margin: 8px 0 4px;
}
.collect-bar > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-gold), #ffe6a1);
  box-shadow: 0 0 .4rem color-mix(in srgb, var(--c-gold) 55%, transparent);
}

/* ---------------------------------------------------------------- ステージの みち

   ステージは 1つずつ すすむ ものなので、**たての 線で つなぎます**。
   一覧では なく「みち」に 見えると、つぎに どこへ 行くかが わかります。 */

.stage-list { position: relative; }
.stage-row { position: relative; }
/* たての 線は 番号の まるの まんなかに そろえます。
   行の 中身は padding-left 16px から はじまり、まるは 2.6rem（≒42px）なので
   まんなかは 16 + 21 = 37px です
   （position: absolute の 0 は わくの 内がわ から かぞえます）*/
.stage-row + .stage-row::before {
  content: ""; position: absolute; left: 35px; top: -14px; width: 4px; height: 14px;
  background: var(--c-blue-s);
  border-radius: 2px;
}
.stage-no {
  transition: transform .2s var(--fx-bounce), background-color .2s ease, color .2s ease;
}
.stage-row:hover .stage-no { transform: scale(1.12) rotate(-6deg); }
/* ★3つの ステージは、番号を 金色に して「やりきった」ことを 見せます */
.stage-row.is-full { --tile: var(--c-gold); --tile-d: var(--c-gold-d); --tile-s: var(--c-gold-s); }
.stage-row.is-full .stage-no {
  background: linear-gradient(140deg, #ffd97a, #f0b429);
  color: #5a4100; box-shadow: none;
}
.stage-row.is-doing { --tile: var(--c-green); --tile-d: var(--c-green-d); --tile-s: var(--c-green-s); }

/* ---------------------------------------------------------------- えらぶ画面 */

/* いちばん 大きい「つづきから」の ボタン。
   1画面の 中で これだけ 地が だいだい色 なので、「まず これを 押す」ことが
   色で わかります。ときどき 光が 横切って 目を ひきます。 */
.card-next .btn-primary.btn-big {
  position: relative; overflow: hidden;
  /* いちばん 押して ほしい ボタン なので、1画面で ここだけ あたたかい 色です。
     文字は 白では なく **こい こげ茶**です。あかるい だいだい色の 上の
     白い 文字は コントラストが 2.1 しか なく、いちばん 大事な ボタンが
     いちばん 読みにくく なって しまう からです（こげ茶なら 5.0〜7.7）。 */
  background: linear-gradient(135deg, #ffb04d, #ff8a3d 55%, #ff6b57);
  color: #4a2000;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .13), var(--shadow-lift);
  transition: transform .12s var(--fx-ease), box-shadow .12s var(--fx-ease);
}
.card-next .btn-primary.btn-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .13), var(--shadow-lift);
}
.card-next .btn-primary.btn-big:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 rgba(0, 0, 0, .13), var(--shadow);
}
/* ::after は とびらの 光（fx-sheen）が つかうので、こちらは ::before です */
.card-next .btn-primary.btn-big::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  animation: today-shine 4.5s ease-in-out 1.2s infinite;
}
@keyframes today-shine {
  0%, 60%, 100% { transform: translateX(-130%); }
  80% { transform: translateX(130%); }
}
.card-next .btn-primary.btn-big .ico { animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: translateX(0); } 82% { transform: translateX(5px); } }

/* 行き先ごとに アイコンの 色が ちがいます（style.css の .row-icon）。
   さわると すこし かたむいて、押せる ことを つたえます */
.menu-row .row-icon {
  transition: transform .25s var(--fx-bounce), box-shadow .2s ease;
}
.menu-row:hover .row-icon { transform: rotate(-7deg) scale(1.06); }

/* ---------------------------------------------------------------- けっか画面 */

.card-result { position: relative; overflow: hidden; }
.result-best {
  animation: pop-in .5s var(--fx-bounce) both;
  box-shadow: var(--shadow-lift);
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}
.result-grid div { transition: transform .2s var(--fx-ease); }
.result-grid div:hover { transform: translateY(-3px); }
.result-grid b { font-variant-numeric: tabular-nums; }
.level-up { animation: pop-in .55s var(--fx-bounce) .1s both; }
.xp-total { font-variant-numeric: tabular-nums; }
.xp-list li { animation: fx-slide .35s var(--fx-ease) both; }
.xp-list li:nth-child(2) { animation-delay: .07s; }
.xp-list li:nth-child(3) { animation-delay: .14s; }
.xp-list li:nth-child(4) { animation-delay: .21s; }

/* ---------------------------------------------------------------- 下の バー */

.nav-btn .ico { transition: transform .3s var(--fx-bounce); }
.nav-btn:hover .ico { transform: translateY(-2px); }
/* えらんだ タブの 絵が「ぴょん」と はねます。
   下の バーは いつも 同じ ところに ある ので、はねる ことで
   「いま ここを えらんだ」が 目に とまります */
.nav-btn.on .ico { animation: nav-pop .45s var(--fx-bounce) both; }
@keyframes nav-pop {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.32) translateY(-5px); }
  70% { transform: scale(1.02) translateY(1px); }
  100% { transform: scale(1.1) translateY(-3px); }
}
/* えらばれて いる タブの 下に、まるい しるしを つけます */
.nav-btn.on::after {
  content: ""; position: absolute; bottom: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-deep);
  animation: pop-in .3s var(--fx-bounce) both;
}
.nav-btn { position: relative; }

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

.toast-item { animation: toast-in .32s var(--fx-bounce) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- こまかい ところ */

/* たたんだ 中で ふたつの 話を 分ける 線 */
.fold-line { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.fold .lead { margin-top: 0; }
.fold .btn-small { margin-left: 0; }

/* ★3つの ステージの 番号は かんむりに なります（数より うれしい しるし）*/
.stage-no .ico { width: 20px; height: 20px; }
.grade-chip .ico { width: 14px; height: 14px; vertical-align: -.2em; margin-right: 2px; }

/* コースの さいしょに 出す「すすみ」カード。上の 色おび（.card::before）が
   その コースの 色に なるので、ここでは とくに 何も しません */
/* 「6 / 11 ステージ ・ ★ 12 / 33」は 見出しの 右に そえます。
   1行に まとめると、その ぶんが ステージの ならびに まわります */
.course-sum { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.card-course .row-bar { margin: 8px 0 4px; height: 10px; }

/* ぜんぶ クリアした コースは、色を 金色に して 一覧の 中で 目立たせます */
.course-row.is-full { --tile: var(--c-gold); --tile-d: var(--c-gold-d); --tile-s: var(--c-gold-s); }

.xp-total b { font-size: inherit; color: inherit; }

/* ---------------------------------------------------------------- せまい 画面 */

@media (max-width: 560px) {
  .hero { gap: 14px; padding: 14px 16px; }
  .hero-ring { width: 96px; height: 96px; }
  .hero-lv-num { font-size: 2.05rem; }
  .subtab { padding: 6px 12px; font-size: .84rem; }
  .subtab .ico { display: none; }
}

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

   ノートPC・Chromebook の たては 600〜950px しか ありません。
   えらぶ・きろく・せっていを **スクロールしないで 見わたせる** ように、
   ヒーローと ひきだしの すきまを つめます。
   ここに 書くのは、この 3つが この ファイルの もち物 だからです
   （style.css で 書いても、あとから 読む この ファイルに 上書きされます）。

   文字の 大きさは できるだけ かえません。読みにくく なるのは
   スクロールより こまる ことです。 */

@media (max-height: 900px) {
  .hero { padding: 12px 16px; margin-bottom: 10px; gap: 14px; }
  .hero-ring { width: 92px; height: 92px; }
  .hero-lv-num { font-size: 1.95rem; }
  .hero-rank { font-size: 1.2rem; }
  .hero-xp { margin: 0 0 6px; }
  .hero-chip { padding: 2px 12px; }
  .subtabs { margin-bottom: 10px; padding: 4px; }
  /* 中身が ない ひきだしの おしらせ。まん中の 空きを つめます */
  .empty { padding: 14px 14px; }
  .empty .btn { margin-top: 10px; }
  .fold > summary { min-height: 44px; padding: 6px 12px; }
  .fold-body { padding: 2px 12px 10px; }
  .fold { margin-top: 8px; }
}

/* もう ひとまわり みじかい 画面（ブラウザの わくを のぞいた Chromebook）*/
@media (max-height: 700px) {
  .hero { padding: 10px 14px; }
  .hero-ring { width: 84px; height: 84px; }
  .hero-lv-num { font-size: 1.8rem; }
  .empty { padding: 10px 12px; }
  .empty > .ico { width: 38px; height: 38px; }
  .empty .btn { margin-top: 8px; }
  .fold > summary { min-height: 42px; }
}

/* たてが みじかい 端末では、かざりの うごきを へらして 中身を ひろげます */
@media (max-height: 620px) {
  .hero::after, .badge-tile.got::before { animation: none; }
}