@charset "UTF-8";
/*!
 * site.css — ガボールゲームズ 共通スタイル
 *
 * Tailwind CDN を置き換えた手書きCSS。外部リクエストが発生しないよう
 * Webフォントも使わず、OS標準のフォントスタックで組んでいる。
 *
 * 目次
 *   1. トークン / リセット
 *   2. レイアウト
 *   3. ヘッダー・ナビ
 *   4. ゲーム切替バー
 *   5. パンくず
 *   6. ゲーム画面
 *   7. タッチ操作ボタン
 *   8. 本文（記事・解説）
 *   9. カード / 一覧
 *  10. 広告枠
 *  11. フッター
 *  12. ユーティリティ
 *  13. 継続プレイ（難易度 / デイリー / 記録）
 */

/* =========================================================
   1. トークン / リセット
   ========================================================= */
:root {
    /* サイト全体の地の色。ページの背景・ヘッダー・カード・記録ページ・記事は
       すべてこの1色（#fffafa）に統一してある。以前はページ地がクリーム、
       カード地が白と別々の色で、白いカードがページから浮いて見えていた。
       フッターだけは意図的に濃色のままにしてあるので対象外（.site-footer を
       参照）。彩度はごくわずかで、プレイ中は body.playing がさらに無彩色へ
       倒すので、うっすらとした縞模様を見分ける課題そのものには影響しない。 */
    /* 2026-09-04: 地の色を黒にした（運営者の決定）。9枚のゲームの見本は
       無彩色のグレーで、白地では沈んで見えていた。暗い地に置くと逆に
       浮かび上がる。変えたのは「地の色」と「その上に直接乗る文字の色」
       だけで、カード（--surface）は白のまま残してある。 */
    --bg:            #14161b;
    /* カードの地。--bg と同じ色にして、ページ地とカード地の境目が
       見えないようにしてある。body.playing はここを上書きしていない
       （もともと無彩色にごく近い色なので、プレイ中も色として残らない）。 */
    --surface:       #fffafa;
    /* カードの中でさらに一段沈める地（表の見出し行・レベル表示・
       押下状態など）。--bg より少しだけ暗くして、地との違いが
       分かる程度の差だけを残してある。 */
    --surface-sub:   #fdf6f1;
    --border:        #ecdfcc;
    --border-strong: #d9c4a6;

    /* 地（黒）の上に直接乗る文字。
       純白（#fff）は使わない。暗い地の上で純白に近い文字を長く読むと、
       文字のまわりがにじんで見えて目が疲れる（ハレーション）。記事は
       2,000〜4,000字あるので、ここは少し落としてある。それでも地との差は
       12:1 あり、基準（4.5:1）に対して十分（2026-09-04）。 */
    --text:          #dfe3ea;
    --text-sub:      #b3bac6;
    --text-mute:     #949dab;
    /* 明るい面（カード・表の見出し・薄いオレンジの囲みなど）の上に乗る文字。
       明るい面を持つルールは、その場で --text 系をこの値に戻している
       （"明るい面の上の文字" で検索）。 */
    --on-light:      #2a241d;
    --on-light-sub:  #6b5f52;
    --on-light-mute: #7d6f60;

    /* サイトカラー（2026-09-03、運営者の決定で#FE5B00に統一）。
       面（バー・ボタン・現在地のピル・アイコン・囲み線）にも、文字
       （リンク・小見出し・矢印・強調）にも、この1色だけを使う。
       以前は面用（明るい橙）と文字用（4.5:1を満たす濃い橙）を別の値に
       分けていたが、その区別自体をやめたので、--accent-dark と
       --accent-bright も同じ値にしてある（それぞれの変数名は
       body.playing がプレイ中に無彩色へ倒すために残しているだけで、
       通常時に別の色を持つ意味はもうない）。
       白地の上では 3.1:1 ほどしかなく、地の文字色として使うには
       WCAG AA（4.5:1）に届かない。運営者の決定として、それでも
       この1色に揃えることを優先している。 */
    --accent:        #fe5b00;
    --accent-dark:   #fe5b00;
    /* 薄いオレンジ。淡い背景・チップの地・枠線に使う。 */
    --accent-soft:   #ffe7d8;
    --accent-bright: #fe5b00;
    /* 旧アクセントの深緑。ロゴマークにだけ残し、サイトの出自の色を
       1点だけ保つ（ロゴまわりは次の段階で扱うため、今回は変えていない）。 */
    --green:         #2f6f5e;
    --green-soft:    #e8f1ee;
    /* 記録の強調色。以前は金色系の別の橙だったが、「オレンジ・茶色系の
       アクセントはサイトカラーに揃える」という決定にあわせてここも
       --accent と同じ値にしてある。 */
    --amber:         #fe5b00;
    --danger:        #b4413a;

    /* ゲームごとの識別色。build/data/games.js の color が
       <body> や <li> の style で上書きする。指定が無いページでは
       サイト共通のアクセントに落ちる。 */
    --game-accent:   var(--accent);

    /* フッターの濃色。地のクリームと同系の濃茶にして、
       サイト全体が白と薄灰の2階調だけにならないようにしている。
       ゲームページには出さない（build/check.js が確認する）。 */
    --deep:          #241d16;
    --deep-2:        #33291f;
    --on-deep:       #f4ede3;
    /* 濃色帯の上に置く副次の文字色。以前の #a9bab4 は落ち着きすぎていて、
       ヒーロー帯の説明文が読み流されていた。地（#16211e 付近）に対する
       コントラストは十分に確保したまま明るくしてある。 */
    --on-deep-sub:   #d9cbb8;

    /* パッチの平均輝度と完全に一致するニュートラルグレー (RGB 128) */
    --game-gray:     #808080;
    --game-band:     #8c8c8c;

    --radius:        10px;
    --radius-lg:     14px;
    --shadow:        0 1px 2px rgba(20, 25, 35, .06), 0 2px 8px rgba(20, 25, 35, .05);
    --shadow-lg:     0 4px 20px rgba(20, 25, 35, .10);

    /* 2026-09-03: 1440px級のディスプレイで左右の余白が大きすぎたため
       960→1120pxに広げた。ゲームページ（本編・日替わり）はここでは
       広げず、下の main.wrap[data-control] で960pxに固定し直している
       （理由は同ルールのコメントを参照）。 */
    --wrap:          1120px;
    /* 背景の飾り（.bg-deco）のキラキラ用。4方向にとがったダイヤ形。
       ファイルを増やさず、ここにSVGを埋め込む。 */
    --spark-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12 16 13 13 16 12 24 11 16 8 13 0 12 8 11 11 8 12 0z' fill='%23000'/%3E%3C/svg%3E");
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
            "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
            "Liberation Mono", Menlo, monospace;
    /* トップのヒーローだけに使う丸ゴシック（運営者決定 2026-09-03）。
       見出し・ボタンの文字・記録カードの見出しと数字・ゲームタイルの名前
       にだけ使い、本文・記事には使わない（layout() の googleFont フラグが
       立ったページにだけ Google Fonts を読み込む。build/check.js [4] は
       これを「外部読み込み」として警告するが、エラーにはならない）。 */
    --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", var(--font);
}

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

/* hidden 属性を必ず効かせる。ブラウザ標準の display:none は
   author 側の display 指定（.game-meta の flex など）に負けるため、
   JS で hidden を立てても消えないことがある。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

/* 地は単色。以前はごく浅い縦のグラデーションを重ねていたが、
   ページの地・ヘッダー・カードを --bg 1色に統一するにあたり、
   グラデーション専用に持っていた2つの色（--bg と別の値）を廃止した。
   プレイ中は body.playing が --bg 自体を無彩色グレーへ差し替える。 */
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.85;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, canvas, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { line-height: 1.5; font-weight: 700; }

/* フォーカスリングはキーボード操作時のみ。ゲーム中に邪魔にならないように */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------
   集中モード

   遊んでいるあいだだけ、ページ全体から色を抜く。

   このサイトの課題は「うっすらとしか見えない縞模様を見分ける」もので、
   ゲーム枠のまわりに彩度の高いものがあると、目がそちらに順応して
   縞の見え方が変わってしまう。一覧や見出しに色を付けられるのは、
   プレイが始まった瞬間にこの上書きが効くからである。

   core.js が <body> に .playing を付け外しする。トークンを差し替える
   だけなので、色を使っている箇所を個別に打ち消して回る必要がない。
   filter: grayscale() を使わないのは、合成レイヤが増えて
   ゲームの描画フレームに響くため。

   値は R=G=B の完全な無彩色にする。青みがかったグレーでも色は色で、
   ゲーム枠のすぐ外に置けば目はそちらに順応する。
   build/check.js がこれを機械的に確かめている。
   --------------------------------------------------------- */
body.playing {
    --accent:        #5c5c5c;
    --accent-dark:   #464646;
    --accent-soft:   #ededed;
    --amber:         #6b6b6b;
    --danger:        #6b6b6b;
    --game-accent:   #5c5c5c;
    /* 面を塗る橙と、ロゴに残した深緑。どちらもゲーム枠の外に出るが、
       ヘッダーやカードとしてゲーム枠のすぐ上下に敷かれるので、
       プレイ中は他のアクセントと同じく無彩色へ倒す。 */
    --accent-bright: #6f6f6f;
    --green:         #5c5c5c;
    --green-soft:    #ededed;

    /* 文字と罫線の基本色もわずかに青みを帯びている。1つ1つは
       ごく弱い色だが、ゲーム枠の上下に広く敷かれるので、ここも
       同じ明るさの完全な無彩色に置き換える。見た目はほとんど変わらない。 */
    --bg:            #191919;
    --surface-sub:   #f8f8f8;
    --border:        #e2e2e2;
    --border-strong: #c8c8c8;
    --text:          #ededed;
    --text-sub:      #b8b8b8;
    --text-mute:     #949494;
    --on-light:      #272727;
    --on-light-sub:  #616161;
    --on-light-mute: #919191;
}

/* 地のグラデーションもプレイ中は単色に戻す。わずかな色みでも、
   ゲーム枠の上下に画面いっぱいの面積で敷かれると効いてしまう。 */
body.playing { background: var(--bg); }

/* head の配色ブロックは [data-game="…"] で色を配る。プレイ中はそれより
   詳細度の高いこの規則で打ち消す。カード・切替バー・結果画面の
   「次はこれ」が対象で、どれもゲーム枠の周囲に出るものである。 */
body.playing[data-game],
body.playing [data-game] { --game-accent: #5c5c5c; }

/* =========================================================
   2. レイアウト
   ========================================================= */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 16px;
}

/* ゲームページ（ゲーム本編・日替わりチャレンジ）だけは幅を広げない。
   #game-canvas は .game-container の width: 100% を継承しており、
   .wrap を広げるとゲーム枠の表示幅もそのまま広がってしまう。canvas の
   表示幅が変わると縞模様の見かけの大きさが変わり、難易度そのものが
   変わってしまうため、各ゲームの成績・自己ベストの比較が崩れる事故になる。
   ここだけ以前の960pxに固定して canvas の実寸を変えないようにする。
   build.js が両ページの <main class="wrap"> にだけ data-control 属性を
   付けているので、それを目印にする（他のページのmainには付かない）。 */
main.wrap[data-control] {
    max-width: 960px;
}

.section { margin-block: 40px; }
/* 背景の飾り（.bg-deco）を置く節にだけ、位置の基準を足す。
   .section 全部には付けない（docs/bg-deco-instructions.md §1-1）。 */
.section.has-deco { position: relative; }
/* .bg-deco は z-index:1 だが、節の中身（カード等）に z-index が無いと
   位置指定のある飾りのほうが前に描かれてしまう（docs/bg-deco-2-instructions.md
   §1）。中身側を明示的に一段上に持ち上げる。 */
.section.has-deco > *:not(.bg-deco) { position: relative; z-index: 2; }

/* ヘッダー nav・フッター・日替わりの結果／エラー時の「ゲーム一覧」が
   /#games へ飛ばす（2026-09-01）。sticky なのは .site-header だけで
   （.brand-stripe は普通の流れの要素で、スクロールすると通り過ぎる）、
   そのぶんだけスクロール位置をずらしておかないと見出しが隠れる。
   ずらす量は .site-header の高さに .brand-stripe の高さ（常に4px）を
   足した値（Playwrightで実測。ジャンプ直後、見出しの上端が sticky
   ヘッダーの下端よりわずかに下に来る、直後の見た目と同じ余白になる）。
   幅721px以上は 54+4=58px、720px以下（.site-header-inner の
   min-height が52pxに詰まる）は 52+4=56px。 */
#games { scroll-margin-top: 58px; }
@media (max-width: 720px) {
    #games { scroll-margin-top: 56px; }
}

/* 節の見出しに短い罫を添える。文字の大きさだけで段落と区別していると、
   長いページで切れ目が分からなくなるため。 */
.section > h2 {
    position: relative;
    padding-left: 13px;
    margin-bottom: 12px;
}
/* 罫はべた塗りではなく横縞にしてある。このサイトの題材が縞模様なので、
   節の頭に小さく同じ模様を置いて全体の調子をそろえる。3px / 3px より
   細かくすると、端末によっては潰れて灰色の帯に見える。
   var(--accent) 由来なので、遊んでいるあいだは無彩色に倒れる。 */
.section > h2::before {
    content: "";
    position: absolute;
    left: 0; top: .22em; bottom: .22em;
    width: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg,
        var(--accent) 0 3px, transparent 3px 6px);
}

/* 見出しの下に置く一行の案内。並んだカードの前で迷わせないために使う */
.section-note {
    margin: -4px 0 16px;
    font-size: .88rem;
    color: var(--text-sub);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}

/* =========================================================
   3. ヘッダー・ナビ
   ========================================================= */
.site-header {
    /* ページ地（--bg/--surface）とは別に、ヘッダーの帯だけ純白に固定する
       （運営者の決定）。--surfaceを使うとカード・切替バーなど他の要素も
       巻き込んでしまうため、ここだけ直接指定にしてある。単色でべた塗り
       なので、position: sticky で画面上端に貼り付いたときも下のコンテンツ
       が透けない。 */
    background: #fff;
    /* 下端の線は無し。直後にブランドバー（.brand-stripe）が続くので、
       線と帯が二重になると上端が重たく見える。 */
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: none;
    transition: box-shadow .15s ease;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
/* スクロールしたときだけ、ヘッダーの下にごく薄い影を足す。常時この影が
   あるとヘッダーが常に浮いて見えて重く、逆に無いとスクロール後に後ろの
   コンテンツと境目がつかない。付け外しは全ページ共通のlayout()内の
   <script>がwindow.scrollYを見て.is-scrolledを切り替えている。 */
.site-header.is-scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

/* ---------------------------------------------------------
   ブランドバー

   ヘッダーのすぐ下に通す高さ4pxの帯。以前は9つのゲームの識別色を
   9等分に並べた虹色だったが、サイトカラー（--accent）1本に替え、
   全ページに同じ1本の帯を通す役目を持たせている。

   build.jsで.site-headerの子要素にしてある（以前は兄弟要素で、
   .site-headerだけがposition:stickyだったため、少しでもスクロールすると
   この帯が画面外へ流れて消えてしまっていた）。子要素にしたことで、
   ヘッダーがスクロール位置にかかわらず常にこの帯ごと画面上端に貼り付き、
   太さも常に4pxのまま変わらない。

   ゲームページにも出るため、プレイ中は必ず無彩色へ倒すこと
   （下の body.playing の規則と build/check.js の [5] を参照）。
   --------------------------------------------------------- */
.brand-stripe {
    height: 4px;
    background: var(--accent);
}
/* プレイ中は色を抜く。ゲーム枠の真上に全幅で敷かれる帯なので、
   ここに彩度が残ると目がそちらに順応して縞の見え方が変わる。 */
body.playing .brand-stripe {
    background: #9a9a9a;
}

/* ゲーム中はヘッダーを畳んで画面を広く使う */
body.playing .site-header { position: static; }

/* プレイ中は、パンくずと見出しを畳む（Step 4a-fix7）。
   成績の行（.game-meta）・ゲーム枠・ゲージ・一言を、スクロールなしで
   同時に見えるようにするための場所を作る。

   fix6 では .game-meta を position: sticky で画面上端に貼り付けたが、
   これは取り消した。貼り付いた帯（高さ88px・z-index 15）が、下にある
   「ゲームを選ぶ」のリンクを覆ってしまい、遊んでいる最中にほかのゲームへ
   移れなくなっていた（document.elementFromPoint がリンクではなく
   .game-meta を返す状態）。上に固定するのではなく、上にあるものを
   減らして解決する。 */
/* 畳むのは狭い画面と低い画面だけにする。パソコンの大きな画面では
   縦に十分な余裕があり、パンくずと見出しを消す理由が無い。 */
@media (max-width: 720px), (max-height: 760px) {
    body.playing .breadcrumb,
    body.playing .game-head { display: none; }
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.site-logo:hover { color: var(--accent); }

.site-logo-mark {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex: none;
    /* 【2026-09-14】アイコン（favicon・ホーム画面）と同じ印にそろえた。
       灰色の丸に灰色の縞では、暗い地のヘッダーの上で沈んで見えなかった。
       色は var(--accent) を使う(プレイ中は body.playing が無彩色へ倒すので、
       ゲーム枠のそばで色が残る心配がない)。 */
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
    position: relative;
    overflow: hidden;
}
.site-logo-mark::before {
    content: "";
    position: absolute;
    inset: -20%;
    transform: rotate(16deg);
    background:
        linear-gradient(90deg,
            transparent 0 22%, #fffafa 22% 34%, transparent 34% 44%,
            #fffafa 44% 56%, transparent 56% 66%,
            #fffafa 66% 78%, transparent 78% 100%);
}

.site-nav ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0; padding: 0;
}
.site-nav a {
    display: block;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: .9rem;
    color: var(--text-sub);
    text-decoration: none;
    white-space: nowrap;
}
.site-nav a { border-radius: 999px; transition: background .15s, color .15s; }
.site-nav a:hover { background: var(--accent-soft); color: var(--accent-dark);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* 現在地はベタ塗り。以前は薄い面に文字色だけだったが、他の項目との差が
   小さく、いまどこにいるのかが読み取りにくかった。面はサイトカラー、
   文字は白（運営者の決定：オレンジの面には白文字）。 */
.site-nav a[aria-current="page"] { background: var(--accent); color: #fff; font-weight: 700; }

/* 言語切替（英語版を追加するまでは非表示） */
.lang-switch { display: none; }

/* =========================================================
   4. ゲーム切替バー
   全ページ共通。ここから1クリックで別のゲームへ移れる。
   ========================================================= */
/* 置き場所はゲーム枠の「下」である。
   以前はパンくずのすぐ下、つまりゲーム枠より前にあった。9本のピルは
   スマホでは3行に折り返して約180px を占め、ヘッダー・見出し・メタバーと
   合わせるとゲーム枠が1画面目から押し出されていた。
   遊び終わった直後に次を選ぶ場所でもあるので、下にあるほうが役目にも合う。 */
.game-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 13px 14px;
    margin-block: 22px 14px;
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}

.game-switch-title {
    margin: 0;
    flex: none;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-sub);
}

.game-switch-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0; padding: 0;
}

.game-switch-list a {
    display: block;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--game-accent) 40%, var(--surface));
    border-radius: 999px;
    background: var(--surface);
    font-size: .875rem;
    font-weight: 600;
    color: var(--game-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* 以前は現在地とホバーだけに色を付け、ふだんは灰色のピルだった。
   枠より上にあった頃はそれで十分だったが、下に移って「次に遊ぶものを
   選ぶ場所」になったので、ゲームの色が常に並んで見えるほうがよい。
   面は白のまま（薄く色を敷くと文字が 4.5:1 を割る）。 */
.game-switch-list a:hover {
    background: color-mix(in srgb, var(--game-accent) 10%, var(--surface));
    border-color: var(--game-accent);
    color: var(--game-accent);
}
.game-switch-list a[aria-current="page"] {
    background: var(--game-accent);
    border-color: var(--game-accent);
    color: #fff;
    font-weight: 700;
}

/* 横スクロールにせず折り返す。スマホでも全ゲームが一覧できる方が回遊しやすい。
   ゲーム枠より下にあるので、ここが3行に伸びても遊ぶ妨げにならない。 */
@media (max-width: 560px) {
    .game-switch { padding: 11px 11px; }
    .game-switch-list a { padding: 7px 12px; font-size: .82rem; }
}

/* =========================================================
   5. パンくず
   ========================================================= */
.breadcrumb { margin: 14px 0 4px; font-size: .82rem; color: var(--text-mute); }
.breadcrumb ol {
    display: flex; flex-wrap: wrap; gap: 6px;
    list-style: none; margin: 0; padding: 0;
}
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--border-strong); }
.breadcrumb a { color: var(--text-sub); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* =========================================================
   6. ゲーム画面
   ========================================================= */
/* 見出しの左にゲーム固有色の帯を立てる。トップページのカードが同じ色の
   左帯を持っているので、そこから来た人に「同じゲームのページを開いた」と
   分かるようにするための対応づけ。ゲーム枠からは離れているうえ、
   プレイ中は body.playing が --game-accent ごと灰色に倒す。 */
.game-head {
    margin-bottom: 12px;
    padding-left: 13px;
    border-left: 4px solid var(--game-accent);
}

.game-title {
    margin: 0 0 5px;
    font-size: 1.45rem;
    letter-spacing: .01em;
}

/* ゲームの説明文。ゲーム枠より下、「遊び方」の先頭に置いてある。
   枠の中のスタート前オーバーレイに同じ内容の案内が出るので、
   枠より上に置いてゲーム画面を1画面目から押し出す価値がない。 */
.game-lead {
    margin: 0 0 4px;
    color: var(--text-sub);
    font-size: .93rem;
    line-height: 1.7;
}

/* のこり時間をゲージ側へ移したので、ここに残るのはスコア・レベル・
   自己ベストだけになった。数が減って寂しくなったぶん、地色にゲーム固有色を
   ごく薄く敷いて、カードや見出しと同じ系統に見えるようにしてある。
   派生元を --game-accent にしておくことで、プレイ中は自動で無彩色になる。 */
.game-meta {
    display: flex;
    /* 外側は折り返さない。折り返すと操作のかたまりが2行目に落ち、
       スマホの高さ予算（§12-1）を1行ぶん食う。折り返してよいのは
       中の .game-meta-stats だけ。 */
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 12px;
    padding: 9px 13px;
    background: var(--surface);
    background: color-mix(in srgb, var(--game-accent) 6%, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
/* 統計のかたまり。数が増えたときに折り返すのはこちらだけ。 */
.game-meta-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 操作のかたまり（音アイコン・終了する）。ゲーム枠の中に重ねていたものを
   2026-09-12 にここへ出した。枠の中に置くと、面を敷き詰めるゲームで盤面の
   右上を覆い、なぞる操作まで奪ってしまうためである（build/README.md 参照）。
   縮まない・折り返さない。プレイしていないあいだは中身が両方 display:none
   になるが、:empty は効かない（要素自体は在る）ので、かたまりごと消して
   gap のぶんの余白が右端に残らないようにする。 */
.game-meta-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}
body:not(.playing) .game-meta-controls { display: none; }

/* 遊び始めたあとは読む意味のない静的な情報なので、プレイ中だけ隠す。
   自己ベストと「こさ」と「めくった数」は隠さないこと。遊んでいる最中に
   動く／意味のある数字である（指示書 §8-1）。 */
body.playing .game-meta-item[data-meta="playtime"] { display: none; }

.game-meta-item { display: flex; align-items: baseline; gap: 7px; }
.game-meta-label { font-size: .74rem; color: var(--text-mute); letter-spacing: .05em; }
.game-meta-value {
    font-family: var(--font-mono);
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text);
}

.level-badge {
    font-family: var(--font-mono);
    background: var(--surface-sub);
    padding: 3px 9px;
    border-radius: 5px;
    font-size: .82rem;
    border: 1px solid var(--border);
    color: var(--text-sub);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}

/* ゲーム枠のまわりに中間グレーの帯を置き、白背景との明暗差が
   低コントラストの縞模様の見え方に影響しないようにしている */
.game-stage {
    background: var(--game-band);
    padding: 10px;
    border-radius: var(--radius-lg);
}

.game-container {
    position: relative;
    width: 100%;
    height: min(64vh, 500px);
    min-height: 320px;
    background-color: var(--game-gray);
    border: 1px solid #6f6f6f;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, .15);
    /* canvas 上のスワイプでページが動かないようにする */
    touch-action: none;
}
.game-container.is-playing { border-color: var(--accent); }

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.game-overlay {
    /* オーバーレイはゲーム枠（無彩色のグレー）の上に出る。地（黒）用の
       白い文字だと灰色に溶けるので、明るい面と同じ扱いにする（2026-09-04）。 */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 結果画面は正誤の帯・自己ベスト・1問ごとの四角などが積み上がって
       縦に伸びる。中央揃え（justify-content: center）のままだと、
       狭い画面であふれたときに上端と下端が均等に切れてしまい、
       いちばん見せたい主役の数字が見えなくなっていた。上詰めにして、
       あふれた分は下側だけがスクロールで隠れるようにしている。 */
    justify-content: flex-start;
    /* 白一色ではなく、中央だけ濃く端を透かす。ui.js が枠の背景に
       そのゲームの構図をうっすら描いており、真っ白で覆うと隠れてしまう。
       文字が乗る中央の濃さは以前と変えていないので、可読性は落ちない。
       非対応ブラウザのために、直前に単色を置いてある。 */
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
    background: rgba(255, 255, 255, .93);
    background: radial-gradient(ellipse 74% 84% at 50% 46%,
        rgba(255, 255, 255, .80) 0%,
        rgba(255, 255, 255, .76) 52%,
        rgba(255, 255, 255, .48) 100%);
    z-index: 20;
    text-align: center;
    padding: 20px;
    /* 結果画面は正誤の帯や「次はこれ」が入って縦に伸びる。
       枠内に収まらない端末でも読めるようにスクロールさせる。 */
    overflow-y: auto;
}
/* 待機画面（.intro）は短いことが多いので、中央揃えに近い見た目を保つ。
   overflow の心配が無い分だけ、上の余白を足して視覚的な中心に寄せる。

   2026-09-02: 覆いをここだけ薄くした。ui.js が枠の背景にそのゲームの構図を
   描いているが（STAGE_ALPHA = 0.75）、その上に .game-overlay が中央80%の白を
   重ねるため、実機ではほとんど見えていなかった。開いた瞬間に「どんなゲームか」が
   絵で分かるようにするための仕掛けなので、見えなければ意味がない。
   結果画面の覆いは変えていない。あちらは数字を読ませる画面で、可読性が優先。

   【polish-1・§3】上の薄い覆いだと、周辺（特に隅）は中間グレーの構図が
   ほぼそのまま透けて見え、その上に乗る文字が読みにくいという指摘が出た。
   ここを不透明に近い「ほぼ白」（#f4f4f4。真っ白は避ける。理由は下の
   is-starting の説明を参照）に変え、可読性を優先した。副作用として
   ゲームの構図プレビューはほとんど見えなくなる。開いた瞬間の楽しさより
   文字の読みやすさを優先するという、この指示書での判断である。 */
.game-overlay:has(> #game-result > .intro) {
    justify-content: center;
    /* 2-1e: 「ガイドつきではじめる」を足すと、枠の低いページ（流れる向き・ちいさくなる）で
       中身が枠を超える。center のままだと上端が切れてスクロールでも戻れないので、
       あふれたときだけ上詰めになる safe center にする（非対応ブラウザは上の center のまま） */
    justify-content: safe center;
    background-color: #f4f4f4;
    transition: background-color .25s ease;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* スタートを押した瞬間、待機画面の地の色（ほぼ白）から遊んでいるときの
   中間グレー（--game-gray）へ、0.25秒かけて変える（polish-1・§3）。
   真っ白から中間グレーへ唐突に切り替わると、canvas 周辺の明るさが
   急変したように見え、直後の数問が見えにくくなる懸念があるため
   （白い面を見た直後は目がそちらに順応している）。
   core.js の init() が .is-starting を付けてから0.25秒後に非表示にする。
   :has() を含めて specificity をそろえ、確実に上のルールへ勝てるようにしてある。 */
.game-overlay.is-starting:has(> #game-result > .intro) {
    background-color: var(--game-gray);
}

/* --- 終了直後の誤タップよけ ------------------------------------
   ゲームは時間切れで予告なく終わる。答えるために連打していた指の
   真下に結果画面が出るので、そのままでは1タップで「次はこれ」や
   「これまでの成績を見る」に当たり、別のページへ飛んでしまっていた。

   core.js が終了時に .is-guard を付け、0.8秒後に外す（RESULT_GUARD_MS）。
   そのあいだのタップは溜めずに捨てる。あとから実行しては同じことになる。
   結果を静かに出して、押せるようになる頃合いを見た目でも伝える。
   ---------------------------------------------------------------- */
.game-overlay.is-guard { pointer-events: none; }
.game-overlay.is-guard > #game-result { animation: resultFadeIn .5s ease-out both; }

@keyframes resultFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.overlay-note { margin: 0 0 18px; color: var(--text); font-size: .9rem; }

/* --- スタート前の待機画面 ---------------------------------------
   もとは「ゲーム時間 3分」の1行とボタンだけで、9ゲームどれを開いても
   同じ画面に見えていた。ゲーム枠そのものは無彩色から動かせないので、
   遊ぶ前に見えるこの面にゲーム名・識別色・何をするゲームかを出して、
   どのゲームを開いたのかを分かるようにする。

   オーバーレイはスタートすると display:none になり、そのとき初めて
   body.playing が付く。つまりここに色があってもプレイ中は見えない。
   結果画面（.result-next-card など）が色を使えているのと同じ理由。

   【polish-1・§3】置く要素をゲーム名・説明の一文・難易度自動追従の一言・
   操作の図・スタートボタンの5つだけに絞った。番号と英語表記
   （.intro-no）、1プレイ時間と自己ベストのカード（.intro-stats。
   バーへ一本化した）、これまでの最高（.intro-maxlv）、あそび方への
   導線（.intro-howto）は削除した。
   ---------------------------------------------------------------- */
.intro { max-width: 32em; }
.intro-name {
    margin: 0 0 6px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--text);
}
.intro-name::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin: 7px auto 0;
    border-radius: 2px;
    background: var(--game-accent);
}
/* 2-1g・§1: 待機画面が枠の高さに収まらない端末（十字ボタンのゲームなど）が
   あったため、見出しの下線と文のあいだを詰めた。文字の大きさ・行間は変えない */
@media (max-width: 720px) {
    .intro-name { margin-bottom: 4px; }
    .intro-name::after { margin-top: 5px; }
}
/* 文字色は --text-mute（薄いグレー）ではなく --text を使う
   （polish-1・§3。「薄いグレーの文字にしないこと」）。 */
/* 【2026-09-05 A-16】大きさと幅を上げた。実測点検（docs/font-size-audit.md）
   で、この2つがサイトで最も小さい文字（375pxで 11.5px と 10.2px）だと
   分かったため。**読ませたい文ほど小さいという逆転が起きていた。**

   この2つは思いつきで置いた文ではない。intro-lead は backlog A-3
   （「説明を読まないので遊び方を教えてほしい」＝身内以外から得た唯一の
   実ユーザー観察）への対処として polish-1 で待機画面に置いたもの、
   intro-adapt は A-2 / A-6（competitor-research.md §8「難易度の自動追従を、
   もっと前面に出す。これが唯一の明確な差別化である」）の実装である。
   **「前面に出す」つもりの文が、いちばん奥に置かれていた。**

   max-width も 320px から min(92%, 520px) に上げた。1440px では待機画面の
   枠が 906×498px あるのに、中身が 320px 幅に固定されていた（実測）。
   .intro の 32em が上限として効くので、実際は 471px 前後になる。

   @media (max-width: 480px) で小さくしていたのもやめた。狭い画面ほど
   読みにくいので、小さくする方向が逆だった。運営者と3案を実物の大きさで
   並べて案2を選んだもの（375px と 1440px で描画して確認済み）。 */
.intro-lead {
    max-width: min(92%, 520px);
    margin: 0 auto 10px;
    font-size: 1.06rem;
    line-height: 1.75;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
}
@media (max-width: 720px) {
    .intro-lead { margin-bottom: 6px; }
}
/* 「何をするゲームか」（intro-lead）と役割を分けるため、こちらは
   一段小さく・控えめにする（Step 5・§5-2）。役割の差はそのままに、
   絶対値だけを上げた（.68rem → .88rem）。 */
.intro-adapt {
    max-width: min(92%, 520px);
    margin: 0 auto 14px;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--text);
    opacity: .78;
    letter-spacing: .01em;
}
@media (max-width: 720px) {
    .intro-adapt { margin-bottom: 6px; }
}

.btn {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.btn-start {
    background: var(--accent);
    color: #fff;
    padding: 15px 34px;
    font-size: 1.05rem;
    letter-spacing: .04em;
    box-shadow: var(--shadow-lg);
    min-height: 52px;
    /* Step 4a-fix6: 結果画面で正解数のすぐ下に移したため、
       以降に続く要素（1問ごとの結果・バッジなど）との間隔を持たせる */
    margin-bottom: 14px;
}
.btn-start:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn-start:active { transform: translateY(0); }
/* 2-1g・§1: 待機画面のスタートボタンの下の余白だけ詰める（結果画面のボタンは変えない） */
@media (max-width: 720px) {
    .intro .btn-start { margin-bottom: 6px; }
}

/* 遊びながらその場で効果音だけを切るボタン（2026-09-04）。
   音の設定（.sound-panel）はゲーム枠より下にあり、スマートフォンでは
   画面の外にある。ゲームは2分で終わるので、うるさいと感じた人が下まで
   スクロールして戻ってくるころには終わっている。そのため、すぐ押せる
   場所にもう1つ置いてある。

   2026-09-12 に、ゲーム枠の中（暗い地）から数値の行（明るい地）へ移した。
   半透明の黒（rgba(28,28,28,.55)）は暗い地に重ねる前提の指定で、明るい地の
   上では白文字が 4.08:1 まで落ちる。前提が変わったので、同じページの同じ
   明るい面に既にある .sound-panel button（効果音 ON / BGM ON）と同じ作法に
   そろえた。無彩色であることは枠の外でも保っている。 */
.sound-btn {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--surface-sub);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--text-sub);
    cursor: pointer;
}
.sound-btn svg { width: 20px; height: 20px; }
.sound-btn .sound-btn-off { display: none; }
.sound-btn[aria-pressed="false"] .sound-btn-on { display: none; }
.sound-btn[aria-pressed="false"] .sound-btn-off { display: block; }
/* 消している状態。かつては文字色を薄くして表していたが、明るい地の上では
   薄い灰色が 2.97:1 まで落ちてしまう（指示書 §8-2 の 4.5:1 を満たせない）。
   文字色は保ったまま、地を一段明るくして沈ませる。消えていることは
   スピーカーに×の付いたアイコン（.sound-btn-off）が形で示している。 */
.sound-btn[aria-pressed="false"] { background: var(--surface); }
body.playing .sound-btn { display: flex; }

/* 「終了する」。.sound-btn と同じ理由で、明るい面の上の作法にそろえてある。
   滅多に押さないボタンなので、不透明の黒（13:1）にして画面の主役に
   してしまわないこと。 */
.stop-btn {
    display: none;
    padding: 8px 14px;
    min-height: 36px;
    background: var(--surface-sub);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--text-sub);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.stop-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* core.js が style 属性で直接 block / none を書くので、動きはそちらが決める。
   ここは JS が走る前の初期状態を .sound-btn とそろえるためだけの指定。 */
body.playing .stop-btn { display: inline-flex; }

/* 進み具合のゲージ。ゲーム枠の内側の下端に、溝・ブロック・数字を
   ひとまとめに置いてある（Step 4a で「決まった数をこなすと終わる」形に
   変えた）。

   数字は以前ゲーム枠の上（.game-meta）に並べていた。遊んでいるあいだ
   視線はゲーム枠から動かないので、そこに出しても読まれていなかった。

   Step 4a-fix3 で、1本の連続したバーを10個のブロックに分けた。当時は
   決まった数をこなして終わる「問題数制」で、問題数の多いゲーム
   （motion 150問・snake 240問など）では1問あたり数pxしか伸びず、
   答えても進んだように見えなかったためである。Step 4a-fix5 で制限時間制
   （2分固定）に戻して以来、1秒ごとに約0.83%動くようになり、連続した
   バーのままでも常に動いて見えるようになった。区切りは「何割経過したか」
   以上の意味を持たなくなり、「区切りが不要に感じる」という所感が
   繰り返し出たため、Step 4a-fix7 で1本の連続バーに戻した
   （詳しい経緯は build/README.md「ゲージを10ブロックに割ってから
   1本に戻すまで」を参照）。

   バーの色だけはゲーム固有色（--gauge）を残している。body.playing が
   無彩色に倒すのは --game-accent 系で、--gauge はそこに入れていない。
   ゲーム枠の中で唯一の彩色だが、(1) 面積が小さく画面の下端にある、
   (2) 濃さや色相が時間で変化しない、(3) 縞模様の描かれる領域と重ならない、
   の3つを満たすので、順応で縞の見え方が変わることはない。
   check.js の [5] も、この1変数・この1セレクタだけを例外にしている。
   --gauge の無いページ（デイリー）では無彩色の #f2f2f2 に落ちる。

   lifeLimit（ライフ制。いまはどのゲームも使っていない）は、この
   見た目には対応させていない（questionLimit 専用）。 */
.progress-track {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 20px;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
    z-index: 10;
}
.progress-bar {
    position: absolute; inset: 0;
    z-index: 10;
}
.progress-bar-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0;
    background: var(--gauge, #f2f2f2);
    /* 1秒だと毎フレームの更新でトランジションが再開し続け、実際の残量から
       いつも遅れていた。追従を速くして、終わりぎわの切迫感を出す。 */
    transition: width .25s linear;
}
/* 数字と「ゴール」を右端にまとめて置く（Step 4a-fix4）。
   以前は数字を左端に固定していたが、ブロックは左から埋まるため、
   進捗が2割に満たないうちは埋まったブロックが数字の真下に隠れ、
   「ゲージが動いていない」ように見えていた（motion 150問・fade-in
   40問など、序盤が長いゲームほど症状が出やすかった）。右端に置けば
   隠れるのは最後の1割だけで、その頃にはもう完走が見えているぶん
   影響が小さい。数字と「ゴール」は .progress-end の中で横並び（flex）
   にし、どちらも幅の異なる文字列（`240 / 240` など）が来ても
   固定オフセットで重ならないようにしてある。 */
.progress-end {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 12;
    pointer-events: none;
}
/* 文字は Step 4a-fix2 で1〜2px大きくし、影を濃くして読みやすさを
   上げた（形式は変えていない）。 */
.progress-time {
    font-family: var(--font-mono);
    font-size: .9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
    white-space: nowrap;
}

/* 不正解のたびに残す印（Step 4a-fix → Step 4a-fix2 → Step 4a-fix3 →
   Step 4a-fix4 → Step 4a-fix7 で10ブロックの区切りをやめて1本のバーに
   戻した。経緯は build/README.md「不正解の印の見た目を4回変えた経緯」
   「ゲージを10ブロックに割ってから1本に戻すまで」にまとめてある）。
   core.js の addMissMark() が .progress-bar の子として .progress-miss を
   1つずつ足していく。バー全体に対する割合で左位置を決める。

   正答率が9割を超えるゲームが多く、ミスが近接することがある（実測:
   approach で140問中14ミスが隣り合って並んだ）。×どうしが重なって
   読めなくなるのを防ぐ密集判定は変えていない。core.js の addMissMark()
   が直前の印との間隔をバー全体の2.5%未満（旧・ブロック幅25%相当）と
   判定したときは何も描かない（×の間引きだけで表現する）。

   増えていく＝変化する印なので、--gauge が唯一の例外として認められている
   3条件（面積が小さい・変化しない・縞と重ならない）の「変化しない」を
   満たさない。だから色は使わず無彩色（白の半透明）にしてある。init() で
   リセットするまでプレイ中ずっと残る。 */
.progress-miss {
    position: absolute;
    top: 50%; left: 0;
    transform: translate(-50%, -50%);
    font-style: normal;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 0 2px rgba(0, 0, 0, .85);
    pointer-events: none;
    z-index: 11;
}

/* ゲージが何に向かっているかを文字で示す（Step 4a-fix2。所感「ゲージの
   意味が分からない」を受けて追加）。.progress-end の中で数字の右隣に
   並べる（Step 4a-fix4。「数字→ゴール」の順で読める）。無彩色の
   決まりが効く場所なので色は使わず、白の半透明にしてある。
   Step 4a-fix3 で「薄すぎて読めない」という指摘を受けて不透明度を
   上げた（.55 → .85）。バーが右端まで来たら役目を終えるので、
   core.js の loop() が display:none にして隠す。 */
.progress-goal {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    white-space: nowrap;
}

.levelup-text {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(0, 0, 0, .6);
    padding: 8px 24px;
    border-radius: 30px;
    pointer-events: none;
    opacity: 0;
    z-index: 25;
    letter-spacing: .1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
    white-space: nowrap;
}

@keyframes levelUpAnim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(20px); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}
.anim-levelup { animation: levelUpAnim 2s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
    .anim-levelup { animation-duration: .01ms; }
    .btn, .game-switch-list a { transition: none; }
    /* 明滅は止めるが、のこりが少ないことは太字で分かるようにしておく */
    .game-meta-value.is-urgent { animation: none; text-decoration: underline; }
    /* ゲージが伸びる動きも省き、即座に切り替える */
    .progress-bar-fill { transition: none; }
}

/* --- 結果表示 --- */
.result-title { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: .04em; }
.result-score {
    margin: 0 0 6px;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--amber);
    font-family: var(--font-mono);
    line-height: 1.3;
}
.result-score-label {
    display: block;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-mute);
    letter-spacing: .05em;
}

/* 「19 / 24」の分母。上の数字より一段小さくして、取った数を主役にする */
.result-score-of { font-size: 1.2rem; color: var(--text-sub); }
.result-record { margin: 0 0 8px; font-size: .9rem; color: var(--text-sub); }
.result-record.is-new { color: var(--amber); font-weight: 700; }
.result-acc { margin: 0 0 12px; font-size: 1rem; color: var(--text-sub); }
.result-acc span { font-size: .85rem; }

/* 結果画面のファーストビューから次のゲームへ行ける、2つの横並びボタン
   （polish-1・§2）。「つぎのゲームへ」（行き先を添えた主ボタン）を左、
   「もう一度あそぶ」（副ボタン）を右に置く。狭い画面でも折り返さず
   スクロールなしで見えるよう、.btn-start の余白を縮めて使う。 */
.result-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    margin: 0 0 14px;
}
.result-actions .btn {
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}
/* 「つぎのゲームへ」（主）は残りの幅いっぱいに伸びる。
   「もう一度あそぶ」（副）は中身の文字ぶんだけの幅で、折り返させない
   （幅を1:1で分けると「もう一度あそぶ」が「もう一度あそ／ぶ」のように
   割れて読みにくくなっていたための直し）。 */
.result-actions .result-next-btn {
    flex: 1 1 auto;
    min-width: 0;
}
.result-actions .btn.btn-sub {
    flex: 0 0 auto;
    white-space: nowrap;
}
.result-next-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.3;
    text-decoration: none;
}
.result-next-btn-main { font-size: .92rem; }
.result-next-btn-sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    font-weight: 400;
    opacity: .85;
}

/* 「もう一度あそぶ」を押す前に、次に何分かかるかが分かるように */

/* その回でどこからどこまで上がったか。スコアの数字だけだと、
   途中から始めた回に手応えが残らなかった。 */
.result-climb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 5px 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--game-accent) 10%, var(--surface));
    font-family: var(--font-mono);
    font-size: .92rem;
    font-weight: 700;
    color: var(--game-accent);
}
.result-climb-arrow { opacity: .6; }
.result-climb-note {
    font-family: var(--font);
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-mute);
}

/* 結果画面の「あそんだ記録を見る」「つぎにあそぶなら」。
   以前はゲーム枠内の結果オーバーレイの一部だったが、狭い画面では
   ゲーム枠の高さに収まらず見切れていたため、.play-area の下
   （ゲーム枠の外）に出した。build/README.md の「結果画面の構成を
   変えた理由」を参照。 */
.post-game { margin: 16px 0 0; text-align: center; }
.post-game[hidden] { display: none; }
.post-game .result-next { margin-inline: auto; }

/* 「これまでの成績を見る」。もう一度遊ぶ以外の行き先を1つ置いておく。
   記録ページに寄ってもらえると、翌日また来る理由になる。 */
.result-mypage { margin: 12px 0 0; font-size: .82rem; }
.result-mypage a {
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.result-mypage a:hover { color: var(--accent-dark); }

/* 続けて長く遊んだときだけ出る、ひと休みの案内。
   遊ぶのを止めるものではないので、「もう一度遊ぶ」より上に控えめに置く。
   ゲーム枠のすぐそばなので、彩度のある色は使わない。 */
.result-rest {
    margin: 14px 0 2px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
}
.result-rest-title {
    margin: 0 0 4px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
}
.result-rest-text {
    margin: 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--text-sub);
}
.result-rest-link { margin: 6px 0 0; font-size: .8rem; }
.result-rest-link a {
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ホーム画面に追加の案内。「あそんだ記録を見る」と同じ調子の、静かな1行。
   おまかせ2本（daily.html）には #post-game が無く、.play-area の直下に
   置かれるため、単独でも余白が付くように親要素にも margin を付けてある。 */
#post-game-a2hs {
    margin: 14px auto 0;
    max-width: 380px;
}
.result-a2hs {
    margin: 0;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--text-mute);
    text-align: center;
}

/* 待機画面の「ガイドつきではじめる」（2-1e）。.result-a2hs と同じ調子の静かな1行。
   2回目以降だけ core.js が hidden を外す。色は使わない。 */
.intro-guide-link {
    display: block;
    margin: 6px auto 0;
    padding: 2px 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--text-mute);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}
.intro-guide-link[hidden] { display: none; }
/* 2-1g・§1: 「ガイドなしではじめる／ガイドつきではじめる」の上の余白を詰める
   （いま6px。0〜4pxまで） */
@media (max-width: 720px) {
    .intro-guide-link { margin-top: 2px; }
}

/* 自己ベストを更新したときだけ出る帯。ここはゲーム枠の外（結果画面）
   なので色を使ってよい。プレイを再開した瞬間には消えている。 */
.result-ribbon {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 18px;
    border-radius: 999px;
    background: var(--amber);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.result-score-num { display: inline-block; min-width: 1.4em; }

/* 1問ごとの正誤。どこで崩れたかが一目で分かる。
   デイリーの 🟩🟥 と同じく正解が緑・不正解が赤。ゲーム固有色は使わない。
   赤いゲーム（うっすら見え）で正解が赤くなると意味が逆に読めてしまうため。
   色だけに頼らないよう、正解は塗りつぶし・不正解は枠線だけで区別している。 */
.result-marks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin: 0 0 14px;
    max-width: 260px;
    margin-inline: auto;
}
.result-mark {
    width: 9px; height: 9px;
    border-radius: 2px;
    border: 1px solid var(--danger);
    background: transparent;
}
.result-mark.is-ok { background: var(--accent); border-color: var(--accent); }
.result-marks-omit { color: var(--text-mute); font-size: .75rem; margin-right: 2px; }

.result-badge { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.result-badge-item {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent-dark);
    font-size: .8rem;
    font-weight: 700;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}

/* 「次はこれ」。遊び終えた人をそのまま別のゲームへ送る導線。
   これが無いと「もう一度遊ぶ」か離脱かの二択になってしまう。 */
.result-next { margin-top: 20px; width: 100%; max-width: 380px; }
.result-next-title {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--text-mute);
}
.result-next-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    margin: 0; padding: 0;
}
.result-next-card {
    display: block;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--game-accent);
    border-radius: 8px;
    background: var(--surface);
    text-decoration: none;
    color: var(--on-light);
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.result-next-card:hover { border-color: var(--game-accent); box-shadow: var(--shadow); color: inherit; }
.result-next-name { display: block; font-size: .92rem; font-weight: 700; line-height: 1.4; }
.result-next-tags { display: block; font-size: .68rem; color: var(--text-mute); line-height: 1.5; }

@media (max-width: 420px) {
    .result-next-list { grid-template-columns: 1fr; }
}

/* --- 画面の向きの案内 --- */
/* ゲーム枠と操作ボタンをひとまとめにした入れもの。
   ふだんは display: contents で、この div が無かったときと
   まったく同じ縦積みになる（枠 → ボタン）。
   スマホを横持ちにしたときだけ flex に切り替えて、ボタンを
   枠の横に逃がす。詳しくは「横持ち」の節を参照。 */
.play-area { display: contents; }

/* =========================================================
   7. タッチ操作ボタン
   スマホでは矢印キーが使えないため、これが無いと遊べない。
   タップ領域は最小 48px を確保する。
   ========================================================= */
.touch-pad {
    margin-top: 12px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.touch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 48px;
    min-height: 62px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 2px 0 var(--border-strong);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.touch-btn:hover { background: var(--accent-soft); border-color: var(--accent);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.touch-btn.is-pressed,
.touch-btn:active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
    transform: translateY(2px);
}
.touch-arrow { font-size: 1.5rem; line-height: 1; }
.touch-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; }

/* たて / よこ の2ボタン */
.touch-pad[data-mode="vh"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 420px;
    margin-inline: auto;
}
.touch-pad[data-mode="vh"] .touch-btn { min-height: 68px; }

/* 初めてのプレイの練習の1問で、押すボタンだけ黄色で光らせる（2-1c）。
   core.js の setGuideKey() が is-guide を付け外しする。黄色は「OK！ここからスタート」の帯と
   同じ #fbbf24（新しい色は増やさない）。canvas の答えの文字も同じ黄色で、色で結びつける。
   練習中だけの例外（build/README.md「色の使い方」の末尾）。 */
.touch-btn.is-guide,
body.playing .touch-btn.is-guide {
    background: #fbbf24;
    border-color: #fbbf24;
    color: #1f1f1f;
    --text: #1f1f1f;
    animation: touch-guide-pulse 1.2s ease-in-out infinite;
}
@keyframes touch-guide-pulse {
    0%, 100% { box-shadow: 0 2px 0 var(--border-strong), 0 0 0 3px rgba(251,191,36,.45); }
    50%      { box-shadow: 0 2px 0 var(--border-strong), 0 0 0 3px rgba(251,191,36,.9); }
}
@media (prefers-reduced-motion: reduce) {
    .touch-btn.is-guide,
    body.playing .touch-btn.is-guide {
        animation: none;
        box-shadow: 0 2px 0 var(--border-strong), 0 0 0 3px rgba(251,191,36,.9);
    }
}

/* 十字4方向。2ボタン版と同じく矢印の下に日本語ラベルを置くため、
   正方形ではなく縦にやや高いボタンにしている。 */
.touch-pad[data-mode="dpad"] {
    display: grid;
    grid-template-columns: repeat(3, 74px);
    grid-template-rows: repeat(3, 66px);
    gap: 8px;
    justify-content: center;
}
.touch-pad[data-mode="dpad"] .touch-btn { min-height: 66px; padding: 4px; }
.touch-pad[data-mode="dpad"] .touch-arrow { font-size: 1.35rem; }
.touch-pad[data-mode="dpad"] .touch-label { font-size: .72rem; }
.touch-pad[data-mode="dpad"] [data-key="ArrowUp"]    { grid-area: 1 / 2; }
.touch-pad[data-mode="dpad"] [data-key="ArrowLeft"]  { grid-area: 2 / 1; }
.touch-pad[data-mode="dpad"] [data-key="ArrowRight"] { grid-area: 2 / 3; }
.touch-pad[data-mode="dpad"] [data-key="ArrowDown"]  { grid-area: 3 / 2; }

.touch-hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--text-mute);
}
/* ゲームごとの一言（Step 4a-fix5）。ゲーム枠のすぐ下、操作方法の説明より
   上に置く。canvas の中には描かない（「動いてよいのは縞模様だけ」の
   原則を崩さないため）。競合A・Cとも、あそび方の一文をプレイ中も
   出しっぱなしにしているのに合わせた。 */
.touch-hint-game {
    margin-top: 10px;
    color: var(--text-sub);
    font-weight: 600;
}

/* =========================================================
   サウンドパネル
   ========================================================= */
.sound-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 14px;
    padding: 10px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .82rem;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.sound-panel button {
    min-height: 38px;
    padding: 6px 14px;
    background: var(--surface-sub);
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--text-sub);
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.sound-panel button:hover { background: var(--accent-soft); color: var(--accent-dark);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.sound-panel button[aria-pressed="true"] { background: var(--surface-sub); color: var(--text-mute);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.sound-panel label { display: flex; align-items: center; gap: 8px; color: var(--text-mute); }
.sound-panel input[type="range"] { width: 96px; accent-color: var(--accent); }

/* =========================================================
   8. 本文（記事・解説）
   ========================================================= */
.prose { max-width: 44em; margin-inline: auto; }
.prose h2 {
    margin: 44px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-soft);
    font-size: 1.32rem;
}
.prose h3 { margin: 30px 0 10px; font-size: 1.08rem; color: var(--accent-dark); }
.prose p { margin: 0 0 1.2em; }

/* --- 「スコアを伸ばすコツ」を畳む --------------------------------
   ゲームページの本文の4割ほどをこの箇条書きが占めていて、遊びに来た人には
   ただ長いだけの壁になっていた。中身は消さずに畳んである。読みたい人だけ
   開けばよく、HTMLには残るので検索エンジンからは今までどおり読める。

   summary の中に h2 を入れているのは、見出しの階層を保ったまま
   開閉させるため。h2 の下線と余白はここで打ち消す。
   ---------------------------------------------------------------- */
.tips { margin: 44px 0 1.3em; }
.tips > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-soft);
    cursor: pointer;
    list-style: none;
}
.tips > summary::-webkit-details-marker { display: none; }
.tips > summary > h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.32rem;
}
/* 開閉の向きを三角で示す。文字ではなく形にしてあるのは、
   「開く」「閉じる」の書き分けをJSなしで済ませるため。 */
.tips > summary::after {
    content: '';
    width: 0; height: 0;
    margin-left: auto;
    border: 6px solid transparent;
    border-top-color: var(--text-mute);
    transform: translateY(3px);
    transition: transform .15s;
}
.tips[open] > summary::after { transform: rotate(180deg) translateY(3px); }
.tips-cue {
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.tips > ul { margin-top: 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.5em; }
.prose li { margin-bottom: .5em; }
.prose strong { font-weight: 700; }

.prose blockquote {
    margin: 0 0 1.3em;
    padding: 12px 18px;
    border-left: 4px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--text-sub);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* 図版。画像自体の背景がゲーム画面と同じRGB128のグレーなので、
   紙面から浮かないよう枠は最小限にとどめている。 */
.prose figure {
    margin: 0 0 1.6em;
}
.prose figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}
.prose figcaption {
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--text-sub);
}
/* 単体の図は本文幅いっぱいだと大きすぎるので抑える */
.prose figure.fig-single img {
    max-width: 260px;
    margin-inline: auto;
}

.table-scroll { overflow-x: auto; margin: 0 0 1.4em; }
.prose table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--surface);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.prose th, .prose td {
    padding: 10px 13px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.prose th { background: var(--surface-sub); font-weight: 700; white-space: nowrap;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}

/* 目次 */
.toc {
    margin: 0 0 32px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.toc-title { margin: 0 0 8px; font-size: .88rem; font-weight: 700; color: var(--text-sub); }
.toc ol { margin: 0; padding-left: 1.3em; font-size: .93rem; }
.toc li { margin-bottom: .3em; }

.article-title { margin: 10px 0 8px; font-size: 1.72rem; }
.article-meta { margin: 0 0 26px; font-size: .82rem; color: var(--text-mute); }

/* =========================================================
   9. カード / 一覧
   ========================================================= */

/* ---------------------------------------------------------
   ヒーロー（2026-09-03 作り直し）

   暗い帯に白文字を乗せた1枚バナー（.daily-banner。ガボールパッチの盤面を
   敷き詰めた canvas に暗いベールをかけ、白い見出しとボタンを乗せる形）を
   廃止し、地は明るいまま（--bg）の3段組みに作り直した。

     左  見出し・チップ3つ・CTAボタン（.hero-head）
     中  動くデモ（ヘビ固定・.hero-stage）とキャラクターの置き場所
     右  あそんだ記録カード（.hero-rec。旧 .stat-band を統合）

   詳しい経緯・数値は docs/next-brief-2026-09-01.md を参照。
   <h1> はページに1つだけ、リンクの中には入れない（旧デザインからの
   判断を維持）。

   角は直角。押せる的はボタンだけなので、箱は丸めない。
   --------------------------------------------------------- */
.hero {
    position: relative;
    /* 飾りを画面幅（100vw）まで広げるため visible。はみ出しは
       .bg-deco--bleed 側の overflow: hidden が切っている
       （2026-09-04。docs/backlog.md A-14）。 */
    overflow: visible;
    background: var(--bg);
    padding: 34px 24px 38px;
}
/* ヒーローの飾りは中身（.hero-inner、z-index:2）より後ろに置く。 */
.hero > .bg-deco { z-index: 0; }
/* 背景の飾り（縞の丸・キラキラ）。もとはヒーロー専用の .hero-deco だった
   ものを .bg-deco として一般化し、サイト内の決められた場所にだけ、控えめに
   置けるようにしてある（docs/bg-deco-instructions.md）。文字とボタンの
   後ろに来ないよう z-index を中身より下に置き、クリックを奪わないよう
   pointer-events を切ってある。色は淡いオレンジ系で、サイトカラーそのもの
   （--accent）は使わない（面積が広いと主役のボタンと競合するため）。
   置く先の要素には必ず position: relative を付けること（付けないと
   画面全体に飛び散る）。トップのヒーロー以外は .bg-deco--clip を足して
   枠の外にはみ出させない。 */
.bg-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* 暗い地では、淡い色の飾りが光ってしまう。薄くして地になじませる（2026-09-04）。 */
.bg-deco span {
    opacity: .18;
    position: absolute;
    display: block;
    border-radius: 50%;
}
.bg-deco--clip { overflow: hidden; }

/* 本文枠（--wrap）の外へ出す修飾子。中央寄せの100vwに広げてから
   左右中央合わせに戻す。必ず .bg-deco--clip と併用する（はみ出し防止。
   docs/bg-deco-2-instructions.md §3）。

   中間の幅（本文枠とほぼ同じ）では、はみ出す余白そのものが無く、
   飾りが本文の上に戻ってきてしまっていた。1292px（本文枠1120px＋
   左右86pxずつ。飾りの最大66pxに余裕を足した値）を下回ったら、
   はみ出す飾りはまるごと非表示にする（運営者決定・下げないこと。
   docs/bg-deco-3-instructions.md §2）。 */
.bg-deco--bleed {
    left: 50%;
    right: auto;
    width: 100vw;
    transform: translateX(-50%);
    overflow: hidden;
}
/* 2026-09-04: 「1291px以下では飾りを出さない」という線引きは撤廃した。
   飾りを大きく薄い数個にしたので、狭い幅でも文字に重なって困らなくなった
   （docs/backlog.md A-14）。 */

/* 縞の丸。.site-logo-mark と同じ作り方。角度（--a）・縞の太さ（--w）・
   大きさ・色は、置く場所ごとに1つずつインラインで変える。 */
.bg-deco .gp {
    background: repeating-linear-gradient(
        var(--a, 45deg), transparent 0 var(--w, 4px), currentColor var(--w, 4px) calc(var(--w, 4px) * 2));
}
/* 縞のリング。中を丸く抜く。 */
.bg-deco .gp-ring {
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
            mask: radial-gradient(circle, transparent 54%, #000 55%);
}
/* まわりがふわっと消える縞。本物のガボールパッチに一番近い形。 */
.bg-deco .gp-soft {
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%);
            mask: radial-gradient(circle, #000 30%, transparent 72%);
}
/* 角丸四角の縞。 */
.bg-deco .gp-sq { border-radius: 26%; }

/* キラキラ。4方向にとがったダイヤ形（--spark-shape）。大きさは常に
   縞の丸より小さい極小のみ。 */
.bg-deco .sp {
    width: 14px;
    height: 14px;
    background-color: var(--c, #f5c542);
    -webkit-mask: var(--spark-shape) center / contain no-repeat;
            mask: var(--spark-shape) center / contain no-repeat;
    border-radius: 0;
}

@media print {
    .bg-deco { display: none; }
}

/* .hero-inner / .hero-cta* は section 13 の .hero-band にも同名クラスが
   ある（暗い帯側の旧デザイン。読みもの一覧・記録ページがまだ使っている）。
   等詳細度だとソース順で負けてしまうため、.hero 配下だけに効くよう
   .hero を頭に付けて詳細度を上げてある。 */
.hero .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    /* 400px/300px/330px は参照モックの実測値（1440px級での見え方）。
       固定 px のままだと 1082px（3列+gap）を下回る画面幅
       （1024×768・768×1024など、確認必須のサイズにも含まれる）で
       右列が枠の外へあふれ、.hero の overflow:hidden に切り取られて
       見えなくなってしまった。minmax(0, Npx) にして、比率を保ったまま
       縮められるようにしてある。1120px 以上ではこれまでどおり
       400/300/330px で並ぶ。 */
    grid-template-columns: minmax(0, 400px) minmax(0, 300px) minmax(0, 330px);
    gap: 26px;
    align-items: center;
}

/* --- 左列：見出し・チップ・CTA ------------------------------------ */
.hero-h1 {
    margin: 0 0 12px;
    color: var(--text);
    font-family: var(--font-display);
}
.hero-h1-l1 { display: block; font-size: 25px; font-weight: 800; }
.hero-h1-l2 { display: block; font-size: 45px; font-weight: 800; line-height: 1.1; }
.hero-h1 em { font-style: normal; color: var(--accent); }

/* 「登録不要」「すぐ遊べる」「完全無料」の3枚。見出しと同じ丸ゴシックは
   使わない（適用先は h1・ボタン・記録カード・ゲームタイル名だけ）。 */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 20px;
}
.hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 13px 5px 9px;
    color: var(--text);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}

/* 画面の小さなアイコン（build/data/ui-icons.js）。アイコン自身が色を持つ
   ので、ここでは大きさと縦位置だけを決める。文字より少しだけ大きくして、
   文字の中心に合わせている。 */
.ui-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}
.ui-icon-lg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-right: 6px;
}

.hero .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 13px 26px 13px 19px;
    box-shadow: 0 4px 0 #b84200, 0 10px 20px -8px rgba(184, 66, 0, .5);
    transition: transform .12s, box-shadow .12s;
}
.hero .hero-cta:hover,
.hero .hero-cta:focus-visible {
    color: #fff;
    transform: translateY(1px);
    box-shadow: 0 3px 0 #b84200, 0 8px 16px -8px rgba(184, 66, 0, .5);
}
.hero-cta-play {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.hero-cta-play::before {
    content: "";
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--accent);
}
.hero-cta-txt { display: flex; flex-direction: column; gap: 1px; }
.hero .hero-cta-main { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.25; }
.hero .hero-cta-sub { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; opacity: .9; }
.hero-cta-chev { padding-left: 4px; font-size: 1.3em; opacity: .75; }

/* --- 中列：動くデモ・キャラクター置き場 ---------------------------

   2026-09-03: 実際のプレイ画面に見た目を寄せた（運営者決定）。地の色を
   ゲーム中と同じ中間グレー（--game-gray）にしたぶん、明るいページの中で
   沈んで見えないよう、影を .shadow より少し強めている。 */
.hero-stage { position: relative; }
.hero-screen-link {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 30px -14px rgba(60, 30, 10, .45);
}
.hero-screen {
    display: block;
    width: 100%;
    height: 250px;
    background: var(--game-gray);
}
/* 押せる的だと常時伝わるよう、hover の無いスマホでも札を出しっぱなしにする */
.hero-screen-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #fff;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}

/* 「けした数」（実際のゲーム中の .game-meta-item と同じラベル・書き方）。
   ゲーム本体はこのバーを枠の上に置くが、ヒーローの枠は小さく上に余白が
   無いため、枠の中に暗い半透明の板を敷いて白文字を乗せる形にしている
   （文字が縞模様に埋もれないための処置。§4 参照）。値は本物の記録ではなく
   ui.js が架空の数字を書き換えているだけ（localStorageには触れない）。 */
.hero-screen-meta {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(0, 0, 0, .55);
    border-radius: 6px;
    padding: 4px 10px;
    pointer-events: none;
}
.hero-screen-meta-label {
    font-size: .68rem;
    color: rgba(255, 255, 255, .78);
    letter-spacing: .04em;
}
.hero-screen-meta-value {
    font-family: var(--font-mono);
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
}

/* 「残り時間」。実際の .progress-track（枠の下端いっぱいの暗い帯）と
   同じ位置・同じ書き方（ラベルは無く mm:ss のみ、白の太字＋影）。
   右下は「あそぶ ▶」の札が占めているため、文字はそちら側に流れないよう
   左端に置く。 */
.hero-screen-time {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    /* 左は、キャラクターのしっぽが画面の左下に重なるぶんだけ空けてある。
       10px のままだと 2:00 がしっぽに隠れる（2026-09-04）。 */
    padding: 0 10px 0 62px;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
    pointer-events: none;
}
/* キャラクター（しまリス）。運営者が生成AIで用意した透過PNG
   （docs/character-prompt.md）。指がゲーム画面のほうを向いている絵なので、
   左右を反転させないこと。書き出しは440px。ここでは132pxでしか使わないが、
   高精細の画面で粗くならない大きさに収めてある。 */
.hero-char {
    background-image: url("/assets/img/char-point.png");
    position: absolute;
    left: -76px;
    bottom: -20px;
    width: 132px;
    height: 132px;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

/* --- 右列：あそんだ記録カード -------------------------------------
   旧 .stat-band を統合。記録が無くても常に表示する（3段組みの右列が
   空になるとレイアウトが崩れるため）。状態の一文・週の丸・合計の行の
   出し分けは ui.js の setupHeroRec() が行う。 */
.hero-rec {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 15px 16px 13px;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.hero-rec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}
.hero-rec-title {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
}
/* サイトカラーではなく文字色にしてある（2026-09-04）。記録カードは
   「できたこと」を見せる場所で、押させたい主役ではない。押せることは
   下線で伝わる。トップの1画面にオレンジが集まりすぎていたための整理。 */
.hero-rec-link {
    flex: none;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.hero-rec-link::after { content: " →"; }
.hero-rec-status {
    margin: 0 0 12px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-sub);
}
/* 「今週は n 日あそびました」の n だけ、丸ゴシック・大きめで目立たせる。
   色はサイトカラーではなくピンク（2026-09-04・運営者決定）。あそんだ記録
   ページの同じ文（.week-stamp-lead strong）とも、この色でそろえてある。 */
.hero-rec-status strong {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: #e0507f;
}
/* 「あそびました」に添えるきらめき（ui.js が書き込む）。 */
.rec-spark {
    width: 17px;
    height: 17px;
    vertical-align: -3px;
    margin-left: 6px;
}
.hero-rec .week-stamp-row { margin: 0 0 4px; }
.hero-rec .week-stamp-box { width: 29px; height: 29px; }
.hero-rec-totals {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    font-size: .85rem;
    color: var(--text-sub);
}
.hero-rec-totals strong {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--text);
}
.hero-rec-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
}

/* 768〜1023px（タブレット幅）専用の2段組み。1024px以上の3段組み
   （minmax(0,400px) minmax(0,300px) minmax(0,330px)）をこの帯でそのまま
   縮めると、各列が実測300〜200px台まで潰れてh1・CTA・記録カードの
   見出しがそろって折り返す不具合が2026-09-03に見つかったため、
   専用のレイアウトに分けた。左に見出し・CTA、右にデモ画面を横並びに
   し、記録カードはその下に横幅いっぱいで置く（3列目として押し込まない）。
   767px以下の縦積みはここでは触らない。 */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero .hero-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "head stage"
            "rec  rec";
        gap: 22px 24px;
    }
    .hero-head  { grid-area: head; align-self: center; }
    .hero-stage { grid-area: stage; align-self: center; }
    .hero-rec   { grid-area: rec; }

    /* 45pxのままだと「無料ゲー／ム！」で折り返すため1段落とす */
    .hero-h1-l2 { font-size: 38px; }

    /* 「おまかせで2本あそぶ！」を1行に収める。まず余白を詰め、
       それでも収まらない環境向けに文字も1段小さくしておく */
    .hero .hero-cta { padding: 12px 18px 12px 14px; }
    .hero .hero-cta-main { font-size: 17px; white-space: nowrap; }
    .hero .hero-cta-sub { white-space: nowrap; }

    /* 「あそんだ記録」が「あそんだ記／録」で折り返さないように */
    .hero-rec-title { white-space: nowrap; }
    /* 横幅いっぱいになった分、週の丸は横に広げてよい（縦には伸ばさない） */
    .hero-rec { padding: 15px 22px 13px; }
    .hero-rec .week-stamp-row { max-width: 420px; }
}

/* 【2026-09-13・フェーズ1 の 1-4】1024〜1199px で
   「おまかせで2本あそぶ！」が2行に折り返していた。
   この幅ではヒーローの3列が minmax の下限まで縮んで 292px 均等になり、
   CTA の文字に使える幅が 183px しか残らない（19px で描くには 203px 必要。
   2026-09-13 に公開サイトを 1024×768 で実測）。
   1120px+ の余白では 400/300/330px に戻るので、この幅だけの処置にする。
   値は 768〜1023px のブロック（上）と同じものを使っている。 */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero .hero-cta { padding: 12px 18px 12px 14px; }
    .hero .hero-cta-main { font-size: 17px; white-space: nowrap; }
    .hero .hero-cta-sub { white-space: nowrap; }
}

@media (max-width: 767px) {
    .hero { padding: 22px 16px 26px; }
    .hero .hero-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* 画面 → 見出し → 記録 の順で見せる */
    .hero-stage { order: 1; }
    .hero-head  { order: 2; }
    .hero-rec   { order: 3; }

    .hero-h1-l1 { font-size: 21px; }
    .hero-h1-l2 { font-size: 35px; }

    .hero .hero-cta { padding: 12px 20px 12px 15px; }
    .hero .hero-cta-main { font-size: 17px; }
    .hero .hero-cta-sub { font-size: 11px; }
    .hero-cta-play { width: 25px; height: 25px; }
    .hero-cta-play::before { border-width: 5.5px 0 5.5px 9px; }

    .hero-screen { height: 200px; }

    /* キャラクターは画面の左隣に置く（画面に重ねない） */
    .hero-stage { padding-left: 108px; }
    .hero-char { width: 104px; height: 104px; left: 0; bottom: -14px; }

    /* スマホ（767px以下）では、HTML側で mob-hide を足した飾りだけを消す。
       トップのヒーロー・ゲーム一覧は docs/bg-deco-3-instructions.md §2 の
       幅の線引き（.bg-deco--bleed を1291px以下で非表示）に置き換わり、
       もう mob-hide を出さない。.hero-band（読みもの一覧・あそんだ記録の
       見出し帯）はいまも mob-hide を使っているため、このルール自体は残す
       （docs/bg-deco-2-instructions.md §0-1・§3、hero-band は据え置き）。 */
    .bg-deco .mob-hide { display: none !important; }

    .hero-rec-totals { justify-content: center; }
}

/* ---------------------------------------------------------
   グリッドの見出し（2026-09-02 <h1> に昇格 → 2026-09-02 <h2> に戻す）

   ヒーロー帯を廃止した直後は <h1> の置き場がなくなり、この9本一覧の
   見出しを間に合わせで <h1> に昇格させていた。ヒーローに正式な見出し
   （.hero-h1）ができたので、ここは本来の <h2> に戻す。
   見た目（.games-title）はタグを変えただけで、崩していない。
   --------------------------------------------------------- */
.games-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 14px;
    padding-left: 0;
    font-size: 1.32rem;
    color: var(--text);
}
/* 9マスのアイコンを付けたので、節の頭の縞の印（.section > h2::before）は
   出さない。両方あると印が2つ並んで見える（2026-09-04）。 */
.games-title::before { display: none; }
.games-title em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-style: normal;
    font-size: .78rem;
    font-weight: 400;
    color: var(--text-mute);
}
.ui-icon-title {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}
.ui-icon-sm {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   3分類 × 3本のゲーム一覧（2026-09-02 に3列の正方形タイル導入 →
   2026-09-03、運営者の指摘「何をするゲームかどこにも書かれていない」を
   受けて作り直した）。

   分類は build/data/games.js の GAMES.GROUPS（記事「10のゲームの違いと
   選び方」と同じ分け方。いまは4-3-3で、本数はそろえない）。見出し（.game-group-title）ごとに <ul class=
   "game-tiles"> を1つずつ出す（build.js の homePage() を参照）。

   出すのはサムネイル・アイコン・ゲーム名・一文・矢印。タグ・自己ベストは
   出さない（詳しいあそび方の違いは記事に残す）。番号（no）も出さない。
   games.js の no はゲームを管理する通し番号であって、難易度でもおすすめ順
   でもなく、一覧に出すと「順にやるものだ」という誤解を生むため。
   --------------------------------------------------------- */
.game-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
}
/* ボタン風の塗り・影は付けない（運営者の指摘）。文字だけの見出しで、
   左の細い印1本だけで「見出しである」ことを伝える。 */
.game-group-title::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--accent);
}

.game-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

/* 角丸のカード。以前（3列の正方形タイル時代）は直角だったが、
   白地のカードになったので他のカード類（.post-list など）と
   そろえて角を丸める。 */
.game-tile {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    text-decoration: none;
    color: var(--on-light);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 14px -10px rgba(80, 40, 10, .4);
    transition: box-shadow .15s, transform .15s;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.game-tile:hover,
.game-tile:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.game-tile canvas {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: 1 / 1;
    height: auto;
    background: var(--game-gray);
}

.game-tile-row {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
}

/* アイコンの地はゲーム固有色（--g、build.js の gameTile() が style= で
   渡す）をそのまま使う。図形はまだ仮のもの（build/data/game-icons.js）。 */
.game-tile-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--g);
}
.game-tile-icon svg { width: 20px; height: 20px; }

.game-tile-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.game-tile-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-tile-lead {
    font-family: var(--font);
    /* 【2026-09-05・A-16】12px → 13px。どれをあそぶか選ぶための文なのに、
       サイトの中でも小さいほうだった（docs/font-size-audit.md §3）。
       white-space: nowrap ＋ ellipsis なので、上げすぎると末尾が「…」で
       切れる。いちばん長い14字（「たて・よこを答えて群れを消す」）が
       375px で切れないことを確認したうえでの 13px である。 */
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* もとは「→」1文字だった（2026-09-04 に差し替え）。カードは全体がリンク
   なので、矢印は「押せる」以上のことを何も伝えていなかった。再生の三角に
   すると「ここから遊べる」と分かり、ヒーローの「あそぶ ▶」とも記号が
   そろう。地の色はそのゲームの色（--g、アイコンと同じ）。 */
.game-tile-play {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--g);
}
.game-tile-play svg { width: 18px; height: 18px; }

/* デスクトップ（768px以上）は横並び（768〜1023pxは2列、1024px以上は
   3列。§13のヒーロー3段組みが768〜1023pxで崩れる問題と合わせて、
   2026-09-03に列数を分けた）。サムネイルを上、下段にアイコン・名前・
   一文・矢印を横並びで置く（スマホは逆に、サムネイルを左に置いた横並び。
   全カードを縦に積むと長くなりすぎるため）。

   サムネイルは 2.7/1（正方形1/1のままだと、カード幅なりに縦へ伸びて
   ほぼ正方形になってしまう＝2026-09-03に発見された不具合）。中の絵は
   正方形の構図のまま描かれるよう、ui.js の paintPreview() 側で高さを
   基準にした正方形をカード中央に置く形にしてある（歪めて楕円にしない
   ための処置）。767px以下のサムネイル（.game-tile canvas の既定値、
   1/1のまま）はこの対象外＝変更しない。 */
@media (min-width: 768px) {
    .game-group-title { font-size: 16px; margin-bottom: 14px; }
    .game-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .game-tile { flex-direction: column; }
    .game-tile canvas { width: 100%; flex-basis: auto; aspect-ratio: 2.7 / 1; }
    .game-tile-row { padding: 11px 13px 13px; gap: 11px; }
    .game-tile-icon { width: 38px; height: 38px; border-radius: 12px; }
    .game-tile-icon svg { width: 22px; height: 22px; }
}
@media (min-width: 1024px) {
    .game-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .game-tiles > li:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ---------------------------------------------------------
   週のスタンプ帳（Step 4a-fix5 の週リングを置き換え。2026-09-02）。
   曜日を7つ並べ、あそんだ日には花丸のスタンプを押す。
   もとの丸いリングは中央に「n / 7」を出すだけで、「今週」という文字が
   aria-label にしかなく目に見えなかった（運営者の指摘）。曜日の文字と
   「今週は n 日あそびました」という文で、見ただけで意味が伝わるようにした。
   「連続日数」に戻していない点は変わらない（Step 4a-fix6。1日休むとゼロへ
   戻り、心が折れるため）。ゲーム枠の外（トップページ上部・あそんだ記録
   ページ）にしか置かないので、無彩色の決まりの対象外。 */
.week-stamp-lead { margin: 0 0 10px; font-size: .95rem; font-weight: 700; }
/* 数字の色はトップの記録カード（.hero-rec-status strong）とそろえてある
   （2026-09-04）。それまでは青（#1a6d8e、「追いかけ」の識別色の流用）で、
   同じ「今週は n 日あそびました」がページによって別の色になっていた。 */
.week-stamp-lead strong { font-family: var(--font-mono); color: #e0507f; }

.week-stamp-row {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.week-stamp-cell { flex: 1 1 0; min-width: 0; text-align: center; }
/* 【2026-09-05・A-16】.68rem（10.9px）は小さすぎた。曜日は「2 / 7 の意味が
   伝わらない」を解くために 2026-09-02 に足した文字なので、読めないと
   足した意味が無い（docs/font-size-audit.md §2）。7マス横並びなので、
   崩さない範囲で1段だけ上げる。 */
.week-stamp-dow { display: block; font-size: .8rem; color: var(--text-mute); }
/* 日曜だけ色を変える（暦の慣習）。スタンプの朱色ともマーカーの青とも
   別系統の色で、2か所限定の青には数えない。 */
.week-stamp-cell.is-sun .week-stamp-dow { color: #c0553f; }

.week-stamp-box {
    /* <span> は inline のままだと width/height が効かず、中の SVG が
       既定の 100% まで広がって巨大な丸になる（あそんだ記録ページで発生）。
       block にして、トップのヒーローと同じ大きさに揃える。 */
    display: block;
    width: 32px; height: 32px; margin: 2px auto 0;
}
/* 7マスを画面幅いっぱいに広げない（丸どうしが離れすぎるため）。
   ヒーロー側（.hero-rec）が 420px なのに合わせ、こちらも幅を抑える。 */
.week-stamp-book .week-stamp-row { max-width: 480px; margin-right: auto; }
.week-stamp-mark { display: none; width: 100%; height: 100%; }
.week-stamp-off { display: block; }
.week-stamp-off circle { stroke: var(--border); }
/* 今日はまだ押されていないマスにだけ、点線＋アクセント色で
   「ここに押せる」と伝える。スタンプ済みならそちらを優先して見せる。 */
.week-stamp-cell.is-today:not(.is-filled) .week-stamp-off circle {
    stroke: var(--accent);
    stroke-dasharray: 4 3;
}
.week-stamp-cell.is-filled .week-stamp-on { display: block; }
.week-stamp-cell.is-filled .week-stamp-off { display: none; }

.week-stamp-foot { margin: 0; font-size: .78rem; color: var(--text-mute); }
.week-stamp-foot strong { font-family: var(--font-mono); font-weight: 700; color: var(--text); }

@media (max-width: 640px) {
    .week-stamp-row { gap: 2px; }
    .week-stamp-box { width: 26px; height: 26px; }
}

/* 記事の強調。本文を落としたぶん、ここは少しだけ明るくして差を残す
   （2026-09-04。明るい面の中では --on-light がそのまま効くので、
   暗い地の上に出る .prose の中だけに限っている）。 */
.prose strong { color: #f0f3f8; }

/* カード内はすべて span で組んでいるので、明示的にブロックにする */
.post-list-title,
.post-list-desc { display: block; }

/* 記事一覧 */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post-list a {
    position: relative;
    display: block;
    padding: 16px 18px 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--on-light);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* 左端に色の帯。以前は白い角丸が縦に10個並ぶだけで、
   どこから読めばよいかの手がかりが何も無かった。
   ここは節の見出しと同じ縞模様も試したが、幅5pxでカードの高さいっぱいに
   引くと点線の枠が壊れているようにしか見えないので、べた塗りにしてある。 */
.post-list a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: var(--accent);
}
.post-list a:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    color: inherit;
}
.post-list-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 3px; }
.post-list a:hover .post-list-title { color: var(--accent-dark); }
.post-list-desc { font-size: .85rem; color: var(--text-sub); line-height: 1.65; }

/* 900px以上では2列にする。横幅が広いページで1列のまま伸びると、
   1行あたりの文字幅が間延びして読みにくいため。奇数件の最後の1件は
   1列ぶんの幅のまま残し、引き伸ばして2列ぶんの幅にはしない
   （grid-template-columns を固定2列にしているのはそのため）。 */
@media (min-width: 900px) {
    .post-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* 関連リンク */
.related { margin-top: 40px; }
.related h2 { margin: 0 0 12px; font-size: 1.08rem; }
.related + .related { margin-top: 28px; }

/* =========================================================
   10. 広告枠
   ゲーム枠との距離を必ず確保する。低コントラストの縞模様を見る課題なので、
   すぐ隣に派手な広告があると課題そのものが成立しなくなる。
   ========================================================= */
.ad-slot {
    margin-block: 32px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sub);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-mute);
    font-size: .74rem;
    letter-spacing: .1em;
    overflow: hidden;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* ゲームの直前・直後は特に広めに離す */
.ad-slot[data-slot="game-top"] { margin-bottom: 36px; }
.ad-slot[data-slot="game-bottom"] { margin-top: 40px; }

.ad-label {
    display: block;
    margin-bottom: 4px;
    font-size: .68rem;
    color: var(--text-mute);
    letter-spacing: .12em;
    text-align: center;
}

/* 実際の広告ユニット（ADSENSE_CLIENT設定時の.ad-wrap）。
   審査中は広告が入らず、Googleのスクリプトが確保した高さ（実測で
   280px前後）だけが空欄として残ってしまう。「スポンサーリンク」の
   表示は残したまま、その空欄だけを畳む。 */
.ad-wrap {
    overflow: hidden;
}
.ad-wrap ins.adsbygoogle {
    max-width: 100%;
}
/* 【2026-09-05】枠だけでなく「スポンサーリンク」のラベルごと消す。
   .ad-label は .ad-wrap の中にあるが、上の指定は <ins> しか畳まないため、
   広告が付かないとき「スポンサーリンク」の文字だけが宙に浮いていた。
   審査中は広告が一度も付かないので、全ページで起きていた。

   data-ad-status="unfilled" は、Googleのスクリプトが「今回は広告を
   付けなかった」と判断したあとに付ける印である。ページを開いた直後は
   この属性が無いので枠は見えており、Googleは今までどおり幅を測って
   広告を入れられる。**この指定で広告が出なくなることはない。**
   AdSenseのスクリプト・ads.txt・<ins> の中身には手を入れていない。 */
.ad-wrap:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Googleのスクリプトは広告が付かなかった<ins>に data-ad-status="unfilled"
   を付ける。これがGoogle公式の「空の広告枠を出さない」ための目印なので、
   ここで畳む（インラインの style="display:block" に勝つため !important
   が要る。AdSenseのスクリプト・ads.txt 自体には一切手を入れていない）。 */
.ad-wrap ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* =========================================================
   11. フッター
   ========================================================= */
/* 白いまま終わるとページの下端がぼやけて締まらないので、
   ヒーロー帯と同じ濃色で閉じる。ゲーム枠からは千数百px離れるため、
   遊んでいるあいだ視界に入ることはない。 */
.site-footer {
    margin-top: 56px;
    padding-block: 34px 40px;
    background: var(--deep);
    border-top: 1px solid #0e1614;
    font-size: .85rem;
    color: var(--on-deep-sub);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    list-style: none;
    margin: 0 0 18px; padding: 0;
}
.footer-nav a { color: var(--on-deep); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

/* 免責。全ページに常時掲載する */
.disclaimer {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    font-size: .8rem;
    line-height: 1.8;
    color: var(--on-deep-sub);
}

.copyright { margin: 0; font-size: .78rem; color: #7d918a; }

/* =========================================================
   12. ユーティリティ
   ========================================================= */
.lead { font-size: 1.03rem; color: var(--text-sub); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

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

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

   ページの上端に置く全幅の濃色バンド。背景には大きな縞模様が
   ゆっくり流れる（assets/js/hero.js が canvas を差し込む）。

   トップ・読みもの一覧・記録の3ページだけに出す。ゲームページと
   デイリーには出さない。ゲーム枠の近くに濃い面や動くものがあると、
   うっすらとした縞模様の見え方が変わってしまうため。
   build/check.js がこの約束を機械的に確認している。
   --------------------------------------------------------- */
/* 以前は #16211e の暗い緑一色だった。第一印象が「暗くて硬い」ものになり、
   遊びに来たページに見えないというのが地味さの一番の原因だったので、
   クリームから淡い橙へ抜けるグラデーションに置き換えてある。
   背景の縞模様（hero.js）は RGB128 のグレーなので、明るい地の上でも
   コントラストは立つ。 */
.hero-band {
    position: relative;
    overflow: hidden;
    /* 2026-09-04: 地を黒にしたとき、ここだけ明るいオレンジのままだと
       すぐ下の本文との境目が唐突で、ページが2枚に割れて見えた。
       オレンジのニュアンスを残した暗いグラデに置き換えている
       （運営者が案A・案Bの2案から選んだ）。中を流れる縞（.hero-art）は
       暗い地の上で金色に光り、ページの顔として立つ。 */
    background: linear-gradient(160deg, #221d29 0%, #2a2018 55%, #33261a 100%);
    color: var(--text);
    border-bottom: 1px solid #3a2f22;
}

.hero-band .hero-inner {
    position: relative;   /* 背景の縞模様より前に出す */
    z-index: 1;
    padding-block: 44px 40px;
}

.hero-band h1 {
    margin: 0 0 14px;
    font-size: 2.05rem;
    letter-spacing: .01em;
    color: var(--text);
}
.hero-band .lead {
    margin: 0;
    max-width: 46em;
    color: var(--text-sub);
}

/* --- 最初の一手 --------------------------------------------------
   トップを開いたとき「何を押せばよいか」が弱かった。読むもの（見出しと
   説明文）の直後に、行き先の決まった大きなボタンを1つだけ置く。

   文言に「かんたん」「やさしい」は使わない。ガボールパッチは刺激そのものが
   見分けにくく、操作が単純でも正答が易しいとは限らないため、登録の要否と
   所要時間という検証できる事実だけにしてある（build.js の PICKS も同じ方針）。
   ------------------------------------------------------------------ */
.hero-cta-row { margin: 22px 0 0; }

/* 帯が明るくなったので、ボタンは鮮やかな橙のベタ塗りにする。白抜きのままだと
   淡いクリームの上で輪郭が消え、いちばん押してほしいものがいちばん目立たない。

   面はサイトカラー、文字は白（運営者の決定：オレンジの面には白文字）。
   以前は白文字だと 4.5:1 を満たせないという理由で濃い茶文字にしていたが、
   「文字用に別の濃さを作らない」という決定にあわせてここも --accent
   そのままにした。白文字の実際のコントラストは約3.1:1で、地の文字色
   としての基準（4.5:1）には届いていない。 */
.hero-band .hero-cta {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    padding: 13px 26px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(254, 91, 0, .30);
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.hero-band .hero-cta:hover,
.hero-band .hero-cta:focus-visible {
    filter: brightness(1.08);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(254, 91, 0, .38);
}
.hero-band .hero-cta-main { font-size: 1.08rem; font-weight: 800; letter-spacing: .02em; }
/* 副文は白の不透明度を落として、主文との階調差を出す（別の橙は作らない）。 */
.hero-band .hero-cta-sub { font-size: .8rem; color: rgba(255, 255, 255, .88); }

/* --- 二番目の道：今日のチャレンジ ---------------------------------
   日替わりの周回は、戻ってきた人が自分で探しに来るもので、初めて来た人に
   選ばせるものではない。以前はここに白いカードを置いていたが、すぐ上の
   ボタンと塊の大きさが並び、さらに下の「この3つ」と合わせて押し先が
   3か所に散っていた。面を持たない1行のリンクに落とし、この帯で強いものを
   ボタン1つに絞ってある。 */
.hero-alt {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 14px 0 0;
    font-size: .86rem;
}
.hero-alt-link { font-weight: 700; }
.hero-alt-link::after { content: " →"; }
.hero-alt-note { color: var(--text-sub); }

/* --- 背景の縞模様 --- */
.hero-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}
/* hero.js が描き終えてから見せる。作っている途中でパッと出るのを避ける */
.hero-art.is-ready { opacity: 1; }

.hero-patch {
    position: absolute;
    /* 帯からはみ出した分は overflow: hidden が刈り取る */
    will-change: transform;
}

/* 位置と動きはCSSに任せる。canvas を描き直さないので、
   長時間ページを開いていても JavaScript は動かない。 */
/* 一番手前の1枚は帯のなかに丸ごと収める。すべてが端で切れていると
   「光の筋」に見えて、ガボールパッチだと分からなくなる。 */
.hero-patch-a { top: 50%; right:  7%; margin-top: -165px; animation: heroDriftA 54s ease-in-out infinite alternate; }
.hero-patch-b { top: 56%; right: 30%; animation: heroDriftB 43s ease-in-out infinite alternate; }
.hero-patch-c { top: -30%; right: -14%; animation: heroDriftC 67s ease-in-out infinite alternate; }

@keyframes heroDriftA {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-46px, 26px, 0) rotate(21deg); }
}
@keyframes heroDriftB {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(38px, -30px, 0) rotate(-26deg); }
}
@keyframes heroDriftC {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to   { transform: translate3d(-28px, 34px, 0) rotate(13deg); }
}

@media (max-width: 640px) {
    .hero-band .hero-inner { padding-block: 26px 24px; }
    .hero-band h1 { font-size: 1.5rem; margin-bottom: 10px; }
    .hero-band .lead { font-size: .92rem; }
    /* 狭い画面では横幅いっぱいの帯にする。指で押す的を大きくとるため */
    .hero-cta-row { margin-top: 16px; }
    .hero-band .hero-cta {
        display: flex;
        align-items: center;
        text-align: center;
        padding: 12px 18px;
    }
    .hero-band .hero-cta-main { font-size: 1rem; }
    /* 狭い画面ではボタンが横幅いっぱいになるので、二番目の道も中央にそろえる */
    .hero-alt { justify-content: center; margin-top: 12px; font-size: .82rem; }
    /* 小さい画面では一番大きなパッチだけ残す。3枚重なると
       文字の後ろが騒がしくなり、帯も高くなりすぎる */
    .hero-patch-b, .hero-patch-c { display: none; }
    .hero-patch-a { top: -30%; right: -18%; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-patch { animation: none; }
}

/* 更に古いヒーロー（濃色帯を使わないページ向け）。いまは使っていないが、
   固定ページを足したときのために残してある。
   2026-09-03: トップページの新ヒーローが .hero を使うことになったため、
   衝突を避けてこちらを .hero-plain に改名した（中身・用途は変えていない）。 */
.hero-plain {
    padding: 34px 0 8px;
}
.hero-plain h1 { margin: 0 0 12px; font-size: 1.9rem; letter-spacing: .01em; }
.hero-plain p { margin: 0 0 10px; color: var(--text-sub); }

.notice {
    padding: 14px 18px;
    background: var(--accent-soft);
    border: 1px solid #cfe2db;
    border-radius: var(--radius);
    font-size: .88rem;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}

/* --- レスポンシブ --- */

/* ナビの横スクロールだけは、下の 720px より広いところから効かせる。
   ヘッダーの項目が4つあるため、900px を下回るあたりで並びきらなくなる。
   body に overflow-x: hidden があるので、放っておくと右端の項目
   （「読みもの」）が切り落とされ、どうやっても押せない。
   とくに iPad の縦（768px）がちょうどこの谷間に入っていた。 */
@media (max-width: 900px) {
    .site-header-inner { gap: 10px; }
    .site-nav {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav ul { gap: 2px; }
    .site-nav a { padding: 7px 8px; font-size: .84rem; }
}

@media (max-width: 720px) {
    body { font-size: 15.5px; }
    .wrap { padding-inline: 13px; }
    .card { padding: 18px; }

    /* --- ゲーム枠より上を詰める ---------------------------------
       390×844 の端末（表示領域およそ780px）で、ゲーム枠の下端まで
       1画面に収めるための調整である。内訳は

         ヘッダー 52 ＋ パンくず 28 ＋ 見出し 40 ＋ メタバー 48
         ＋ ゲーム枠の余白 7 ＝ 175px

       で、ゲーム枠 min(54vh,440px) を足しても 596px に収まる。
       表示領域が 640px しかない小型端末でも 521px で収まる。

       ここを触るときは、必ず実機か Playwright で
       .game-container の getBoundingClientRect().bottom が
       innerHeight 以下であることを確かめること。 */
    .site-header-inner { min-height: 52px; }
    .breadcrumb { margin: 8px 0 4px; }

    .game-head { margin-bottom: 10px; }
    .game-title { font-size: 1.15rem; line-height: 1.4; }
    .article-title { font-size: 1.42rem; }
    .hero h1 { font-size: 1.55rem; }
    .prose h2 { font-size: 1.2rem; margin-top: 36px; }
    .site-nav a { padding: 7px 8px; font-size: .84rem; }

    /* 狭い画面ではナビが横に並びきらない。放っておくと body の
       overflow-x: hidden に切り落とされ、右側の項目にたどり着けなくなる。
       ナビだけ横スクロールにして拾えるようにする。項目が途中で切れて
       見えることが、そのまま「まだ右にある」という合図になる。 */
    .site-header-inner { gap: 10px; }
    .site-nav {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav ul { gap: 2px; }
    .game-stage { padding: 7px; }
    .ad-slot { margin-block: 26px; }

    /* スマホではゲーム枠と操作ボタンが1画面に収まる高さにする。
       十字4方向のページはボタンが大きいぶん枠を低くしている。 */
    .game-container { height: min(54vh, 440px); min-height: 260px; }
    [data-control="dpad"] .game-container { height: min(42vh, 380px); }

    .touch-pad[data-mode="dpad"] {
        grid-template-columns: repeat(3, 70px);
        grid-template-rows: repeat(3, 60px);
        gap: 7px;
    }
    .touch-pad[data-mode="dpad"] .touch-btn { min-height: 60px; }
    .touch-pad { margin-top: 10px; }
    .touch-hint { margin-top: 6px; }
    .sound-panel { margin-top: 10px; }

    /* メタバーも詰める。以前は 400px 以下でしか縮めていなかったが、
       ゲーム枠より上に残った数少ない要素なので 720px から効かせる。 */
    .game-meta {
        gap: 5px 14px;
        padding: 7px 12px;
        margin-bottom: 8px;
    }
    .game-meta-stats { gap: 5px 14px; }
    .game-meta-value { font-size: 1rem; }

    /* 幅 360px では、操作のかたまり（約101px）を横に並べると統計側が
       295→184px まで痩せ、折り返しが2行ぶん増える。何を隠しても足りない
       ので、狭い画面では横に並べるのをやめ、メタバーの中の独立した行に
       落とす（指示書 §8-1）。721px 以上は横1行のまま変わらない。 */
    .game-meta { flex-wrap: wrap; }
    .game-meta-stats { flex: 1 1 100%; }
    .game-meta-controls { flex: 0 0 100%; justify-content: flex-end; margin-left: 0; }

    /* 遊んでいるあいだ、統計は読まれない。ここは既にこのサイトが一度出した
       結論で、.progress-track のコメントに「数字は以前ゲーム枠の上に並べて
       いたが、遊んでいるあいだ視線はゲーム枠から動かないので読まれていな
       かった」と書いてある。必要な数字はすべて枠の中にある（正解数は左上の
       大きな数字、残り時間は下の帯、レベルは #levelup-text）。読まれない
       ものに場所を使わせず、プレイ中は操作だけの1行にする（指示書 §9-1）。
       スタート前は今までどおり全部見える。統計が読まれるのはそのときである。 */
    body.playing .game-meta-stats { display: none; }

    /* 行が1つ増えるぶん、操作そのものは小さくして高さの見積もり
       （§12-1 のメタバー 48）に近づける。 */
    .game-meta-controls { gap: 6px; }
    .stop-btn { min-height: 30px; padding: 5px 10px; font-size: .74rem; }
    .sound-btn { width: 30px; height: 30px; }
    .sound-btn svg { width: 17px; height: 17px; }
}

@media (max-width: 400px) {
    .site-logo { font-size: .98rem; }
    .game-title { font-size: 1.08rem; }
    .game-meta { gap: 6px 10px; padding: 9px 11px; }
    .game-meta-stats { gap: 6px 12px; }
    .game-meta-value { font-size: 1rem; }
}

/* =========================================================
   12-2. 横持ち（スマホを横にしたとき）

   【なぜ必要か】
   スマホを横にすると、画面の高さが 400px 前後まで縮む。
   縦積みのままだと、ゲーム枠（最低260〜320px）と操作ボタン
   （68px）を縦に並べた時点で画面からあふれ、答えるための
   ボタンが画面の外に出てしまって遊べなくなる。

   【どう直したか】
   ボタンをゲーム枠の「横」へ逃がし、高さを使わないようにした。
   縦持ちと縦長の画面には一切影響しない（.play-area は
   ふだん display: contents なので、この指定だけが切り替わる）。

   dvh はアドレスバーの伸縮を含んだ実際の高さ。古い端末向けに
   vh を先に書いて、対応していれば dvh で上書きされるようにする。
   ========================================================= */
@media (orientation: landscape) and (max-height: 600px) {
    .play-area {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    /* ゲーム枠だけが余った横幅を吸う。min-width:0 が無いと
       flex アイテムが縮まず、ボタンが画面外へ押し出される。 */
    .play-area > .game-stage { flex: 1 1 auto; min-width: 0; }
    .play-area > *:not(.game-stage) { flex: 0 0 auto; }

    /* 高さの下限（260〜320px）を外す。ここを残すと縮まない。
       十字4方向のページは縦持ち用に枠を低くしてあるが（42vh）、
       横持ちではボタンを横に逃がすぶん高さが空くので、他と同じ
       大きさに戻す。セレクタを揃えないと詳細度で負けて、
       このゲームだけ枠が半分の大きさになる。 */
    .game-container,
    [data-control="dpad"] .game-container {
        height: min(78vh, 420px);
        height: min(78dvh, 420px);
        min-height: 0;
    }

    .game-stage { padding: 6px; }

    /* 操作の説明文は縦持ちで読める。横持ちでは場所を譲る。
       ただしゲームごとの一言（.touch-hint-game）まで巻き込んで
       消していたのは意図ではない（Step 5・§4-2）。一言だけは残す。 */
    .touch-hint { display: none; }
    .touch-hint-game { display: block; margin-top: 6px; font-size: .74rem; }
    .touch-pad { margin-top: 0; }

    /* たて / よこ は横に2つ並べる余裕がないので縦に積む */
    .touch-pad[data-mode="vh"] {
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: none;
    }
    .touch-pad[data-mode="vh"] .touch-btn { min-height: 54px; min-width: 78px; }

    /* 十字は形を保ったまま一回り小さくする */
    .touch-pad[data-mode="dpad"] {
        grid-template-columns: repeat(3, 54px);
        grid-template-rows: repeat(3, 46px);
        gap: 5px;
    }
    .touch-pad[data-mode="dpad"] .touch-btn { min-height: 46px; }
    .touch-pad[data-mode="dpad"] .touch-arrow { font-size: 1.15rem; }
    .touch-pad[data-mode="dpad"] .touch-label { font-size: .66rem; }

    /* --- ゲーム枠より上を詰める（横持ち） -----------------------
       横持ちでは画面の高さが 390px 前後まで縮む。縦持ち用の詰め方
       （720px のブロック）は幅で効かせているので、横に倒すと幅が
       844px になって外れてしまう。ここで改めて詰め直す。

       パンくずはここだけ隠す。ヘッダーのナビとゲーム枠の下の切替バーが
       同じ行き先を持っているので、横持ちのあいだ消えても行き止まりにならない。

       説明文（.game-lead）はゲーム枠の下、「遊び方」の先頭へ移したので、
       ここで隠す指定はもう要らない。 */
    .site-header-inner { min-height: 44px; }
    .breadcrumb { display: none; }

    .game-head { margin-bottom: 7px; }
    .game-title {
        font-size: 1.05rem;
        line-height: 1.35;
        margin-bottom: 0;
    }

    .game-meta {
        gap: 4px 10px;
        padding: 5px 11px;
        margin-bottom: 7px;
    }
    .game-meta-stats { gap: 4px 12px; }
    .game-meta-value { font-size: .95rem; }

    /* 横持ちは高さがいちばん足りない持ち方で、このブロックは既に
       「操作ボタンを横へ逃がして高さを使わない」方針を取っている。その続き。
       プレイ中だけ統計を隠して、メタバーを操作の1行ぶんまで縮める。
       スタート前は見えるので情報は失われない。操作は隠さないこと
       （遊びながら押すものである）。指示書 §8-3。 */
    body.playing .game-meta-stats { display: none; }
    body.playing .game-meta { padding: 5px 12px; }

    /* 横持ちは幅 844px なので ≤720px のブロックが効かない。操作の縦を
       詰める指定だけ、ここで同じように入れ直す（指示書 §9-2）。
       これで枠の下端は 419 → 約405 になる。変更前（409.5）より良くなるが、
       390 には収まらない。横持ちのはみ出しは §12-2 の高さ配分の問題で、
       今回の範囲では直さない（docs/backlog.md に記録した）。 */
    .stop-btn { min-height: 30px; padding: 5px 10px; font-size: .74rem; }
    .sound-btn { width: 30px; height: 30px; }
    .sound-btn svg { width: 17px; height: 17px; }

    .sound-panel { margin-top: 8px; }
}

/* =========================================================
   13. 継続プレイ（難易度 / デイリー / 記録）
   ========================================================= */

/* --- 汎用ボタン（.btn-start 以外） --- */
.btn:not(.btn-start) {
    min-height: 40px;
    padding: 8px 18px;
    background: var(--accent);
    color: #fff;
    font-size: .88rem;
    text-decoration: none;
    text-align: center;
}
.btn:not(.btn-start):hover { background: var(--accent-dark); color: #fff; }
/* .btn:not(.btn-start) と詳細度を揃える必要があるため .btn を重ねている。
   .btn-sub だけだと詳細度が1つ足りず、上の緑の指定に負けてしまう。 */
.btn.btn-sub {
    background: var(--surface-sub);
    color: var(--text-sub);
    border: 1px solid var(--border-strong);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.btn.btn-sub:hover { background: var(--accent-soft); color: var(--accent-dark);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}

/* --- スタート前の待機画面に出す操作方法の図 ---
   .intro の中（色を使ってよい面）に置くインラインSVG。
   build.js の controlDiagram() が描き分ける。 */
.intro-control {
    display: flex;
    justify-content: center;
    margin: 2px 0 10px;
    color: var(--text-sub);
}
.intro-control svg { display: block; }
/* 2-1g・§1: 待機画面を枠の高さに収めるため、狭い画面では図と余白を詰める。
   56×56の四角い図（click・dpad）だけを対象にする。たて/よこの図（140×54）は
   正方形でないため対象にしない */
@media (max-width: 720px) {
    .intro-control { margin: 0 0 4px; }
    .intro-control svg[width="56"][height="56"] { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
    [data-control="dpad"] .intro-control { margin-bottom: 2px; }
}

/* --- 結果画面の追加行 --- */
.result-badge {
    margin: 0 0 10px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--amber);
}

/* --- 今日のチャレンジの結果 --- */
.daily-result {
    margin-block: 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.daily-result h2 { margin: 0 0 12px; font-size: 1.1rem; }
.daily-score {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px;
}
.daily-score span { font-size: .88rem; color: var(--text-sub); }
.daily-score strong { font-size: 2.2rem; color: var(--accent); font-family: var(--font-mono); }
.daily-score-of { font-size: 1rem; }
.daily-sub { margin: 0 0 14px; font-size: .9rem; color: var(--text-sub); }

/* 自分の数字を置く物差し。100問中いくつ、だけでは良し悪しが分からない。 */
.daily-compare { margin: 0 0 14px; font-size: .88rem; color: var(--text-sub); }
.daily-compare strong { color: var(--amber); }

/* 種目ごとの内訳。2行そろえて、どの種目で崩れたかを見せる。 */
.daily-rounds { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.daily-rounds li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .88rem;
}
.daily-round-no { flex: none; color: var(--text-mute); }
.daily-round-name { flex: 1 1 7em; }
.daily-round-score { flex: none; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
.daily-round-best { flex: 1 1 100%; font-size: .8rem; color: var(--amber); font-weight: 700; }
/* 1種目50問ぶんの○×が並ぶ。1行に収まらないので、名前と点数の下へ
   まとめて落として折り返す。flex:none のままだと横にあふれる。 */
.daily-marks {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    margin-top: 2px;
}

/* 主の導線。記録に残る各ゲームへ。 */
.daily-next { margin: 0 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.daily-next-note { font-size: .8rem; color: var(--text-mute); }

/* おさらい。記録に残らないことを、押す前に読める位置に書く。 */
.daily-retry { margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.daily-retry-note { font-size: .8rem; color: var(--text-mute); }

/* 2種目の進み具合。いま何種目めで、あと何が残っているかを常に出す。 */
.daily-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}
.daily-step {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-mute);
    font-size: .8rem;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.daily-step.is-now { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.daily-step.is-done { background: var(--accent-soft); border-color: var(--accent); color: var(--text-sub);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
/* 結果パネルは左揃えの箱なので、オーバーレイ用の中央寄せを打ち消す */
.daily-result .result-marks { justify-content: flex-start; margin-inline: 0; }
.daily-note {
    margin: 12px 0 0;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--text-mute);
}

/* --- デイリーの履歴 --- */
.daily-history-wrap { margin-block: 34px; }
.daily-history-wrap h2 { font-size: 1.1rem; margin: 0 0 12px; }
.daily-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.daily-history li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .88rem;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.daily-hist-date { flex: none; width: 5.5em; color: var(--text-mute); font-size: .82rem; }
.daily-hist-name { flex: 1 1 auto; }
.daily-hist-score { flex: none; font-weight: 700; color: var(--accent); }

/* --- 記録ページ：まとめ --- */
/* 「今週は n 日あそびました」「曜日のスタンプ」「3つの数字」を、ひとつの
   白い面にまとめる（2026-09-04・運営者の指示）。地を黒にしたことで、
   ここだけ小さなカードが宙に浮いて見えていた。 */
.mypage-week {
    padding: 18px 20px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.mypage-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.mypage-summary li {
    padding: 13px 12px;
    /* 白い面（.mypage-week）の中に置くので、地を一段だけ沈めて区切る */
    background: var(--surface-sub);
    border: 1px solid var(--border);
    /* 上端に橙の線を入れたカードで、数字そのものを主役にする。
       トップページでは同じ数字をヒーローの記録カード（.hero-rec）に
       落としてあるが、あちらは遊びに行く途中で通るだけの場所で、ここは
       記録を見に来たページなので、同じ数字でも見せる強さを変えてよい。 */
    border-top: 3px solid var(--accent-bright);
    border-radius: var(--radius);
    text-align: center;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.mypage-sum-label {
    display: block;
    font-size: .74rem;
    color: var(--text-mute);
    letter-spacing: .05em;
}
.mypage-sum-value {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-dark);
    line-height: 1.3;
}

/* --- 記録ページ：得点表 ---

   列がずれないよう、次の3つを守る。

   1. 寄せ方を「見出しと値」でそろえる。以前は th,td を一括で左寄せしたあと
      td だけ右寄せに上書きしていたため、thead のセル（th）だけ左寄せのまま残り、
      見出しの文字が列の左端、数値が右端に置かれて縦に揃わなかった。
   2. 1列目は本文側にだけ .score-mark（8px＋margin 8px＝16px）が入る。
      見出し側にも同じ分を足さないと、文字の開始位置が16pxずれる。
   3. 幅を colgroup で固定する。table-layout が auto のままだと列幅が中身依存になり、
      「—」だけの初期状態と数値が入ったあとで幅が変わってしまう。 */
.table-scroll { overflow-x: auto; }
.score-table {
    width: 100%;
    min-width: 420px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .9rem;
    background: var(--surface);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.score-table th, .score-table td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ゲーム名の列だけ左寄せ。見出しと本文で同じ扱いにする */
.score-table th:first-child,
.score-table td:first-child { text-align: left; }
/* 本文側の .score-mark と文字の開始位置をそろえる（13 + 16 = 29px） */
.score-table thead th:first-child { padding-left: 29px; }
.score-table thead th {
    background: var(--surface-sub);
    font-size: .78rem;
    color: var(--text-mute);
    letter-spacing: .04em;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.score-table tbody th { font-weight: 700; }
.score-table td { font-variant-numeric: tabular-nums; }

/* 遊んだゲームだけ印が色で埋まる。全色そろえたくなる作りにしてある。
   色だけの表現にしないよう、右側の数値欄が「—」かどうかでも分かる。 */
.score-mark {
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 8px;
    border-radius: 2px;
    border: 1px solid var(--border-strong);
    vertical-align: 1px;
}
.score-table tr.is-played .score-mark {
    background: var(--game-accent);
    border-color: var(--game-accent);
}
.score-table tr.is-played th a { color: var(--game-accent); }
.score-table .mypage-empty { text-align: center; color: var(--text-sub); padding: 26px 13px; }
.mypage-note { margin: 10px 0 0; font-size: .8rem; line-height: 1.7; color: var(--text-mute); }

/* --- 記録ページ：カレンダー --- */
.calendar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
}
.cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    /* 【2026-09-05・A-16】.64rem → .72rem。運営者の判断で「少しだけ」上げた。
       カレンダーは日付を読ませる部品ではなく「埋まっているかどうか」を
       見る部品なので、大きくしすぎない（docs/font-size-audit.md §2）。 */
    font-size: .72rem;
    color: var(--text-mute);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.cal-cell.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}
.cal-cell.is-today { outline: 2px solid var(--amber); outline-offset: 1px; }

/* --- 記録ページ：バッジ --- */
.badge-count { font-size: .82rem; font-weight: 400; color: var(--text-mute); }
.badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.badge {
    padding: 12px 14px;
    background: var(--surface-sub);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    opacity: .55;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.badge.is-owned {
    background: var(--surface);
    border-style: solid;
    border-color: var(--accent);
    opacity: 1;
    box-shadow: var(--shadow);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
}
.badge-name { display: block; font-weight: 700; font-size: .94rem; }
.badge.is-owned .badge-name { color: var(--accent); }
.badge-desc { display: block; margin-top: 2px; font-size: .78rem; line-height: 1.6; color: var(--text-sub); }

/* --- 記録ページ：めくり絵の図鑑 ---
   バッジと同じく、持っているものは実線の枠、まだのものは点線で薄く。
   絵は 4:5。狭い画面でも3枚が1行に並ぶ幅にしておく。 */
.picture-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.picture {
    padding: 6px 6px 8px;
    background: var(--surface-sub);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    text-align: center;
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text-mute);
}
.picture.is-owned {
    background: var(--surface);
    border-style: solid;
    border-color: var(--accent);
    box-shadow: var(--shadow);
    color: var(--text);
}
.picture-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius) - 4px);
}
.picture-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-strong);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-mute);
}
.picture-name { display: block; margin-top: 5px; font-size: .82rem; font-weight: 700; line-height: 1.4; }

/* 集めた絵はボタン（押すと大きく見られる）。見た目はカードのまま */
.picture-open {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
.picture-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: calc(var(--radius) - 4px); }

/* --- 記録ページ：図鑑の拡大表示 ---
   <dialog> 自体は余白も地も持たない。中身の外側を押すと、押された要素が
   <dialog>（か ::backdrop）になるので、mypage.js はそれを「外側」と見なして閉じる。
   絵は 4:5 のまま、画面の幅と高さの両方に収まる大きさにする。 */
.picture-view {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: visible;
}
.picture-view::backdrop { background: rgba(0, 0, 0, .78); }
.picture-view-figure { margin: 0; }
.picture-view-body {
    margin: 0;
    padding: 10px 10px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    --text: var(--on-light);
    color: var(--text);
}
.picture-view-img {
    display: block;
    width: min(480px, calc(100vw - 52px), calc((100vh - 190px) * 4 / 5));
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius) - 4px);
}
.picture-view-name { margin-top: 8px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.picture-view-close { display: block; margin: 10px auto 0; }

/* --- 記録ページ：持ち出し ---
   保存データの生の文字列をふだんから見せると威圧的なので折りたたむ。
   必要になるのは機種変更やブラウザの掃除の前だけで、頻度が低い。 */
.backup {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.backup > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: .94rem;
    color: var(--text-sub);
}
.backup > summary:hover { color: var(--accent); }
.backup > p { margin: 12px 0; font-size: .86rem; line-height: 1.75; color: var(--text-sub); }
.backup-area {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: .76rem;
    line-height: 1.6;
    resize: vertical;
}
.backup-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

@media (max-width: 640px) {
    /* スマホのファーストビューにゲームカードを入れるための切り詰め。
       上から順に「見出し・最初の一手・カード」まで一画面に収めたい。 */
    .hero { padding: 20px 0 4px; }
    .hero h1 { font-size: 1.45rem; margin-bottom: 8px; }
    .hero p { margin-bottom: 4px; font-size: .92rem; }
    .section { margin-block: 24px; }
    .section-note { margin: -2px 0 12px; font-size: .84rem; }
    .daily-result { padding: 16px; }
    .mypage-summary { grid-template-columns: repeat(2, 1fr); }
    .calendar { grid-template-columns: repeat(6, 1fr); }
    .cal-cell { font-size: .68rem; } /* 【2026-09-05・A-16】.58rem（9.3px）はサイト最小だった */
    .daily-history li { flex-wrap: wrap; gap: 4px 10px; }
    .daily-step { padding: 3px 9px; font-size: .74rem; }
    .daily-score strong { font-size: 1.9rem; }
}

/* スマートフォンと、縦に余裕のない画面では、結果画面が
   ゲーム枠からあふれて下が切れていた。行を減らすのではなく、
   ひとつずつ詰めて収める。「もう一度あそぶ」より下にある
   1問ごとの結果まで、スクロールせずに読めるようにする。
   （Step 4a-fix8） */
@media (max-height: 760px), (max-width: 500px) {
    .result-ribbon { margin-bottom: 6px; padding: 3px 12px; font-size: .74rem; }
    .result-title { font-size: 1.05rem; margin-bottom: 2px; }
    .result-score { font-size: 1.6rem; margin-bottom: 2px; }
    .result-record { margin-bottom: 4px; }
    .result-acc { margin-bottom: 6px; font-size: .92rem; }
    .btn-start { min-height: 46px; margin-bottom: 8px; }
    .result-actions { margin-bottom: 8px; }
    .result-actions .btn { min-height: 46px; }
    .result-next-btn-main { font-size: .84rem; }
    .result-marks { margin-bottom: 6px; }
    .result-badge { margin-bottom: 6px; }
    .result-badge-item { padding: 2px 10px; font-size: .74rem; }
    .result-marks { gap: 2px; max-width: 300px; }
    .result-mark { width: 7px; height: 7px; }
    .game-overlay { padding: 12px; }
    /* 2-1g・§1: 待機画面だけ上下の余白をさらに詰める（結果画面は変えない） */
    .game-overlay:has(> #game-result > .intro) { padding-top: 8px; padding-bottom: 8px; }
    /* 十字ボタンのゲーム（流れる向き）はゲーム枠自体が低い（42vh）ため、
       ぴったりに詰めるとブラウザごとの文字サイズの誤差で見切れかねない。
       ここだけもう少し余白を削って安全側に寄せる */
    [data-control="dpad"] .game-overlay:has(> #game-result > .intro) { padding-top: 6px; padding-bottom: 6px; }
}

/* さらに小さい画面（360×640 など）では、主役の数字を一段小さくする。
   （Step 4a-fix8。ここにあった .result-duration の非表示は、2026-09-04 に
   その行そのものを消したので不要になった） */
@media (max-height: 680px) {
    .result-score { font-size: 1.45rem; }
}

/* 十字ボタンのゲーム（流れる向き・追いかけ）は、ボタンの場所を取るぶん
   ゲーム枠が低い。いちばん小さい画面では、結果画面の1問ごとの印まで
   入りきらないので、ここだけ省く。正解数と正答率は残る。
   （Step 4a-fix8） */
@media (max-height: 680px) {
    [data-control="dpad"] .result-marks,
    [data-control="dpad"] .result-marks-omit { display: none; }
}

/* 十字ボタンのゲームは枠を 42vh に抑えてあるが、640px の画面では
   269px しかなく、結果画面が入りきらない。いちばん小さい画面のときだけ
   枠を少し高くする（遊んでいる最中も、枠・一言・十字ボタンは収まる）。
   （Step 4a-fix8） */
@media (max-height: 680px) {
    [data-control="dpad"] .game-container { height: min(48vh, 380px); }
}

/* =========================================================
   14. ガボールパッチの画像を作るページ（/gabor-patch-image.html）

   ゲームではないが、うっすらした縞を見ながら設定を決めるページなので、
   プレビュー枠（.maker-stage）はゲーム枠と同じ考え方で無彩色だけにする。
   地は --game-gray（RGB 128）、枠線も文字もグレーだけ。
   色を使ってよいのは枠の外の操作部分（.maker-controls）だけで、
   枠との間はすき間を空け、枠に隣り合う面には色を置かない。

   クラス名は .maker- で始める。.game-stage などゲーム枠の名前を借りると、
   build/check.js の [5] がこのページに無関係な検査をかけてしまう。
   ========================================================= */
.maker {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 880px;
    margin: 8px auto 12px;
}
.maker-head { margin-bottom: 18px; }

.maker-stage {
    padding: 20px;
    background: var(--game-gray);
    border: 1px solid #6e6e6e;
    border-radius: var(--radius-lg);
}
.maker-canvas {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    background: var(--game-gray);
}

.maker-controls {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    /* 明るい面の上の文字。地（黒）用の --text 系を戻す */
    --text: var(--on-light);
    --text-sub: var(--on-light-sub);
    --text-mute: var(--on-light-mute);
    color: var(--text);
}
.maker-field { margin: 0; padding: 0; border: none; min-width: 0; }
.maker-field:disabled { opacity: .5; }
.maker-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0;
    width: 100%;
    font-size: .88rem;
    font-weight: 700;
}
.maker-label output { font-variant-numeric: tabular-nums; color: var(--accent-dark); }
.maker-field input[type="range"] {
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.maker-field input[type="range"]:disabled { cursor: not-allowed; }
.maker-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.maker-choice { position: relative; }
.maker-choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.maker-choice span {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 14px;
    background: var(--surface-sub);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text-sub);
    cursor: pointer;
}
.maker-choice input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--on-light);
}
.maker-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.maker-field:disabled .maker-choice span { cursor: not-allowed; }
.maker-actions { display: grid; gap: 10px; }
.maker-controls .btn { min-height: 48px; font-size: .95rem; }
.maker-controls .btn:disabled { opacity: .55; cursor: not-allowed; }
.maker-note { margin: 0; font-size: .8rem; color: var(--text-sub); }

@media (max-width: 767px) {
    .maker {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .maker-stage { padding: 14px; max-width: 420px; width: 100%; margin-inline: auto; }
    .maker-controls { padding: 16px; }
}

/* =========================================================
   15. 記事に埋め込む錯視の体験デモ（/column/stripe-illusion.html）

   中身は site/assets/js/illusion-demo.js が作る。縞のすぐ隣に操作部分を
   置くので、枠の中はつまみ・ボタンも含めて無彩色だけにする
   （1-2 の画像作りページと違い、操作部分にもアクセント色を使わない）。

   クラス名は .demo- で始める。.game-stage などゲーム枠の名前を借りると、
   build/check.js の [5] がこのデモに無関係な検査をかけてしまう。
   ========================================================= */
.demo {
    display: grid;
    gap: 14px;
    max-width: 400px;
    margin: 0 auto 1.2em;
    padding: 16px;
    background: #262626;
    border: 1px solid #3a3a3a;
    border-radius: var(--radius-lg);
    color: #e0e0e0;
}
.demo:empty { display: none; }
.demo-stage {
    padding: 12px;
    background: var(--game-gray);
    border: 1px solid #6e6e6e;
    border-radius: var(--radius);
}
.demo-canvas {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    background: var(--game-gray);
}
.demo-controls { display: grid; gap: 12px; }
.demo-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 2px;
    font-size: .88rem;
    font-weight: 700;
    color: #e0e0e0;
}
.demo-label output { font-variant-numeric: tabular-nums; color: #ffffff; }
.demo-field input[type="range"] {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    accent-color: #bdbdbd;
    cursor: pointer;
}
.demo-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.demo-btn {
    min-height: 48px;
    padding: 8px 12px;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: #e0e0e0;
    background: #3a3a3a;
    border: 1px solid #6e6e6e;
    border-radius: var(--radius);
    cursor: pointer;
}
.demo-btn:hover { background: #474747; }
.demo-btn[aria-pressed="true"] { background: #d6d6d6; border-color: #d6d6d6; color: #1e1e1e; }
.demo-btn:focus-visible { outline: 2px solid #e0e0e0; outline-offset: 2px; }
.prose .demo-note { font-size: .88rem; color: var(--text-sub); }

@media (max-width: 767px) {
    .demo { padding: 12px; }
    .demo-stage { padding: 8px; }
}