/*
    リバーシの見た目（GAME-01 Step5 → Step7 で 8ビット化・2026-08-18）。

    🔴🔴 このサイトは 1rem = 10px（`layout201911.mobile/Main.css:81-85` の `font-size: 62.5%`）。
        ここは共有 CSS を読む側なので、**1rem = 16px のつもりで数字を書くと 6 割の大きさで出る**。
        Step4-6c で実際に踏んで本文が 9.5px になった。
        📌 Step7 からは**文字は px**（ドットフォントを整数倍で出すため）・**寸法は rem（10px 基準）**。

    🎮 8ビット化（Step7）の流儀＝**角丸ゼロ／影はぼかさない／枠は直線／パレットを絞る**。
       📌 2026-08-18 ユーザー要望「クドい」で控えめに＝枠 2px（`--games-line`）・影 3px（`--games-shadow`）が基本、
          **影は押せる物（札・ボタン）と盤・ポップアップだけ**。得点の箱・表・結果の箱には落とさない。
       書体・パレットの変数（`--games-*`）は `shared/layoutgames/Main.css` にある。
       🔴 **書体は JFドット東雲ゴシック12**（`--games-font-body`・標準／太字）＝判断24 最終。
          美咲 8×8 →東雲12 →一度撤去（本体の書体）→**東雲12 に戻した**という経緯（2026-08-18）。
          `@font-face` は `shared/layoutgames/Main.css`。**文字の大きさは 12 の倍数**（12・24・36）が基本。
       🔴 適用範囲は**ゲームの中身だけ**（ユーザー判断22）。ヘッダー・パンくず・フッターには当てない
          ＝このファイルは `.reversi_*` にしか当てていないので、構造上それらには届かない。

    🔴 盤は画像を使わず CSS だけで描く（設計6＝資産を増やさない／電波の弱い場所で使う前提）。

    ⚠️ ダークテーマは持たない（設計9）。将来サイト全体をダークにする時、
       **このファイルを明示的に対象へ入れること**（分離ページには改修が自動で届かない）。
*/

/* ── 得点表示 ─────────────────────────────── */

/*
    🎨 得点は**1本の帯**（Step7 洗練・2026-08-18）＝箱を2つ並べるより静か。
       盤と同じ上限幅（42rem）に揃え、真ん中の縦線で黒と白を分ける。
    📌 押せない物なので影は落とさない（影は「押せる」の合図に取っておく）。
*/
.reversi_hud {
    display: flex;
    width: 100%;
    max-width: 42rem;
    margin: 1.2rem auto 1rem;   /* 📌 盤と同じく中央（左寄せも試したが「寄っちゃった」＝ユーザー却下・2026-08-18） */
    border: var(--games-line) solid var(--games-ink);
    background: var(--games-paper);
    box-sizing: border-box;
    font-family: var(--games-font-body);
}

.reversi_score {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 1rem 0.6rem;
}

.reversi_score.is_white {
    border-left: var(--games-line) solid var(--games-ink);
}

.reversi_score_label {
    font-size: 12px;
    color: var(--games-grey-dark);
    letter-spacing: 0.04em;
}

/* 数字は大きく（32px）＝ファミコンのスコア表示の気分 */
.reversi_score_value {
    font-family: var(--games-font-body);
    font-size: 24px;
    font-weight: bold;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.reversi_score.is_black .reversi_score_value { color: var(--games-ink); }
.reversi_score.is_white .reversi_score_value { color: var(--games-grey-dark); }

.reversi_status {
    margin: 0 0 1.2rem;
    text-align: center;
    font-family: var(--games-font-body);
    font-size: 16px;
    /*
        🔑 手番・パス・勝敗はここにしか出ない＝文言が伸び縮みするたびに盤が上下すると
           打つ場所を見失う。**高さを固定して**レイアウトの揺れを止める。
    */
    min-height: 2.4rem;
}

/* ── 盤 ───────────────────────────────── */

.reversi_board_wrap {
    display: flex;
    justify-content: center;
    /* 🔑 盤の影（右下 3px）が親からはみ出さないよう、影の分だけ余白を取る */
    padding: 0 0.3rem 0.3rem 0;
}

/*
    🔑 盤は**正方形を保ったまま画面幅に追従**させる。
       車内で片手で持つ前提なので、横幅いっぱいに広げつつ
       縦に長すぎて指が届かない形にはしない（上限 42rem = 420px）。
    🎮 枠は太い墨色・角丸ゼロ・硬い影。マスの隙間は盤の濃い緑（罫線に見える）。
*/
.reversi_board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 3px;
    width: 100%;
    max-width: 42rem;
    aspect-ratio: 1 / 1;
    padding: 3px;
    background: var(--games-green-dark);
    border: 3px solid var(--games-ink);
    border-radius: 0;
    box-shadow: var(--games-shadow);
    box-sizing: border-box;
}

/*
    マスは `<button>`＝キーボードでも触れる。
    ⚠️ ブラウザ既定のボタン装飾（背景・枠・角丸・フォント）を全部落とす。
       落とし忘れると端末ごとに盤の見え方が変わる。
*/
.reversi_cell {
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: var(--games-green);
    font: inherit;
    color: inherit;
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
}

/*
    打てるマスだけ触れる感じを出す（打てない所を押しても何も起きないため）。
    📌 **さりげなく**（2026-08-18 ユーザー要望）＝マスの色は盤より一段だけ明るくするに留める。
       Step7 直後の明るい緑（`--games-green-light`）は「光っている」ように見えて盤がうるさかった。
*/
.reversi_cell.is_playable {
    cursor: pointer;
    background: #2eb45d;
}

/*
    🔑 打てる場所の印は**小さい四角**（Step7 で丸→四角＝ドット絵の流儀）。
       色だけで示すと、色の見分けが付きにくい人には何も伝わらない（形でも示す）。
*/
.reversi_cell.is_playable::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    height: 18%;
    transform: translate(-50%, -50%);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.28);   /* 薄い印＝形は残す（色弱の人にも届く）が主張はしない */
}

.reversi_cell:focus-visible {
    outline: 3px solid var(--games-sky);
    outline-offset: -3px;
}

/* 直前に置かれた石の位置。相手がどこへ打ったか分からなくなるのを防ぐ（黄色の太い枠） */
.reversi_cell.is_last {
    box-shadow: inset 0 0 0 2px var(--games-yellow);
}

/* ── 石 ───────────────────────────────── */

/*
    🕹️ 石＝**16×16 のドット絵**（Step9-5・2026-08-19）。SVG を data URI で `background-image` に埋める＝
       画像ファイル無し・通信ゼロ・指紋の管理も不要（`GamesCssTests` の `url()` 検査は `data:` を除外済み）。
    🔑 `shape-rendering="crispEdges"`＝拡大しても縁を**にじませない**（階段のまま）。
       Step7 までは `border-radius:50%` の丸＝縁がアンチエイリアスで滑らかで、看板（一覧の絵）の石と質感が違った。
    🔴 data URI の `#` は必ず `%23`（生の `#` は URL のフラグメント＝Firefox で絵が消える）。
       作り直す時は `docs/tasks/GAME-01/verify/pixel-disc.py`（16×16 の升目から SVG を吐く）。
    📌 黒＝ベタ＋左上にハイライト3ドット／白＝白地＋右下に影の1周＋黒の輪郭1周。色は Step7 の2色と同じ。
*/
:root {
    --reversi-disc-black: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%231a1a1a%22 d=%22M5 0h6v1h-6zM3 1h10v1h-10zM2 2h12v1h-12zM1 3h14v1h-14zM1 4h14v1h-14zM0 5h16v1h-16zM0 6h16v1h-16zM0 7h16v1h-16zM0 8h16v1h-16zM0 9h16v1h-16zM0 10h16v1h-16zM1 11h14v1h-14zM1 12h14v1h-14zM2 13h12v1h-12zM3 14h10v1h-10zM5 15h6v1h-6z%22/%3E%3Cpath fill=%22%236a6a6a%22 d=%22M5 3h1v1h-1zM4 4h2v1h-2zM3 5h2v1h-2z%22/%3E%3C/svg%3E");
    --reversi-disc-white: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%23ffffff%22 d=%22M5 0h6v1h-6zM3 1h10v1h-10zM2 2h12v1h-12zM1 3h14v1h-14zM1 4h14v1h-14zM0 5h16v1h-16zM0 6h16v1h-16zM0 7h16v1h-16zM0 8h16v1h-16zM0 9h16v1h-16zM0 10h16v1h-16zM1 11h14v1h-14zM1 12h14v1h-14zM2 13h12v1h-12zM3 14h10v1h-10zM5 15h6v1h-6z%22/%3E%3Cpath fill=%22%23d4d4d4%22 d=%22M13 3h1v1h-1zM13 4h1v1h-1zM14 5h1v1h-1zM14 6h1v1h-1zM14 7h1v1h-1zM14 8h1v1h-1zM14 9h1v1h-1zM14 10h1v1h-1zM13 11h1v1h-1zM13 12h1v1h-1zM3 13h2v1h-2zM11 13h2v1h-2zM5 14h6v1h-6z%22/%3E%3Cpath fill=%22%231a1a1a%22 d=%22M5 0h6v1h-6zM3 1h2v1h-2zM11 1h2v1h-2zM2 2h1v1h-1zM13 2h1v1h-1zM1 3h1v1h-1zM14 3h1v1h-1zM1 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM14 11h1v1h-1zM1 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM13 13h1v1h-1zM3 14h2v1h-2zM11 14h2v1h-2zM5 15h6v1h-6z%22/%3E%3C/svg%3E");
}

.reversi_disc {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    /*
        既定は「石が無い」＝見えない。
        🔑 `display:none` ではなく `opacity` で消すのは、
           石が置かれた時に**大きさの計算をやり直させない**ため（古い端末でのカクつき防止）。
    */
    opacity: 0;
    transition: opacity 0.12s linear;
}

.reversi_cell.is_black .reversi_disc {
    opacity: 1;
    background-image: var(--reversi-disc-black);
}

.reversi_cell.is_white .reversi_disc {
    opacity: 1;
    background-image: var(--reversi-disc-white);
}

/* ── 操作 ─────────────────────────────── */

/*
    🕹️ ボタンの共通の型（Step7）＝白地・太い枠・硬い影。押すと影の分だけ沈む。
       `.reversi_button`（もう一度）／`.reversi_undo`（待った）／`.reversi_resign`（投了）／
       `.reversi_records_reset`（リセット）が同じ型を持ち、**色だけで役割を分ける**。
    🔴 指で押す的は 44px 以上（この単位では 4.4rem）。
       車内で片手・揺れる場所で押す前提なので、既定より大きめに取る。
*/
.reversi_button,
.reversi_undo,
.reversi_resign,
.reversi_records_reset {
    min-height: 4.4rem;
    padding: 0 1.8rem;
    border: var(--games-line) solid var(--games-ink);
    border-radius: 0;
    background: var(--games-paper);
    color: var(--games-ink);
    box-shadow: 2px 2px 0 var(--games-ink);
    font-family: var(--games-font-body);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.reversi_button:active,
.reversi_undo:enabled:active,
.reversi_resign:active,
.reversi_records_reset:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.reversi_button:focus-visible,
.reversi_undo:focus-visible,
.reversi_resign:focus-visible,
.reversi_records_reset:focus-visible,
.reversi_level_card:focus-visible,
.reversi_modal_link:focus-visible,
.reversi_back_link:focus-visible {
    outline: 3px solid var(--games-sky);
    outline-offset: 2px;
}

/* 「もう一度対戦する」＝主役のボタンだけ盤の緑で塗る */
.reversi_button {
    padding: 0 2rem;
    background: var(--games-green);
    color: var(--games-paper);
}

/* ── 入口（/games/reversi）の強さのカード・Step6-3b ── */

/* ⏸️ `.reversi_lead` は Step7 で撤去（リード文ごと・2026-08-18 ユーザー判断） */

/*
    🎨 レベルは**5列のタイル**（Step7 洗練・2026-08-18）＝ファミコンのセレクト画面。
       393px でも 5 枚入る（1枚 ≒ 62px）。flex+wrap だと行ごとに札の幅が変わって落ち着かない。
    🪜 段が10になった（Step7-6）ので **5列×2行**になる＝1行目が 1〜5、2行目が 6〜10。
       🔑 **行の意味が揃う**＝上の行が「うっかりする相手」、下の行が「読む相手」。
    ⚠️ 共有 CSS が ul に付ける既定（点・字下げ）を必ず消す。消し忘れると、カードの左に点が並ぶ。
*/
.reversi_levels {
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0 0.3rem 0.3rem 0;   /* 影（右下）の分の余白 */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.8rem;
    max-width: 42rem;   /* 盤・帯と同じ上限＝PC で横に伸びすぎない */
}

/* 📌 `li` は「升目」かつ「カードの器」＝`flex` にして中の `a` を伸ばし、丈を揃える */
.reversi_level_item {
    display: flex;
}

.reversi_level_card {
    flex: 1;
    position: relative;   /* sr-only の `.reversi_level_name` の基準 */
    /*
        🔴 指で押す的は 44px 以上（この単位では 4.4rem）。
           カードは的そのものなので、余裕を持って高くする。
           車内で片手・揺れる場所で押す前提。
    */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 6.4rem;
    padding: 0.8rem 0.2rem 0.6rem;
    border: var(--games-line) solid var(--games-ink);
    border-radius: 0;
    background: var(--games-paper);
    box-shadow: var(--games-shadow);
    color: var(--games-ink);
    text-decoration: none;
    font-family: var(--games-font-body);
}

/* 選択中は白黒反転＝ファミコンのメニューのカーソル */
.reversi_level_card:hover {
    background: var(--games-ink);
    color: var(--games-paper);
}

.reversi_level_card:active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

/* 打ちかけの段は地を薄い緑に＝一覧の中で目が止まる（枠は変えない＝静かに） */
.reversi_level_card.is_in_progress {
    background: #eefaf1;
}

.reversi_level_card.is_in_progress:hover {
    background: var(--games-ink);
}

/* 小さく「レベル」・大きく番号（見た目専用・`aria-hidden`） */
.reversi_level_word {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--games-grey-dark);
}

.reversi_level_card:hover .reversi_level_word {
    color: var(--games-paper);
}

.reversi_level_num {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/*
    🖥️ PC（768px 以上）は**一段大きく**（2026-08-18 ユーザー要望）。
    📌 ドットフォントなので **12 の倍数**で上げる（12→24→36）。半端な値にすると輪郭がぼける。
    📌 スマホ側は据え置き＝狭い画面で大きくすると 5 枚のタイルが1列に収まらなくなる。
*/
@media (min-width: 768px) {
    .reversi_level_card { min-height: 8rem; }
    .reversi_level_word { font-size: 12px; }
    .reversi_level_num { font-size: 36px; }

    .reversi_status { font-size: 20px; }
    .reversi_score_label { font-size: 14px; }
    .reversi_score_value { font-size: 36px; }
    .reversi_level_badge { font-size: 16px; }

    .reversi_button,
    .reversi_undo,
    .reversi_resign { font-size: 20px; }

    .reversi_back_link { font-size: 20px; }

    .reversi_records h2 { font-size: 24px; }
    .reversi_records_table { font-size: 16px; }
    .reversi_records_table thead th { font-size: 14px; }
    .reversi_records_reset { font-size: 16px; }

    .reversi_modal_title { font-size: 28px; }
    .reversi_modal_side_label { font-size: 14px; }
    .reversi_modal_side_value { font-size: 48px; }
    .reversi_modal_score { font-size: 16px; }
    .reversi_modal_link { font-size: 16px; }
}

/*
    🔴 「レベル1」の文字列は**読み上げと JS のため**に残す（`Home.js` の `nameOf`／
       `GamesShellTests` の `>レベルN<`）。見た目からは外す（sr-only）。
*/
.reversi_level_name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
    「続きから」の印（Step6-5e）。**レコード表に出てこない情報**なので、
    段の説明や成績を外したあともここだけは残す。
    📌 反転（hover）した時も読めるよう、色は緑の明るい方にする。
*/
.reversi_level_state {
    font-size: 10px;
    line-height: 1;
    color: var(--games-green);
    white-space: nowrap;
}

.reversi_level_card:hover .reversi_level_state {
    color: var(--games-green-light);
}

.reversi_level_state[hidden] { display: none; }

/* ── 対局画面（/games/reversi/play）の見出しの札・Step6-3b ── */

/*
    🔴 選択 UI を対局画面から外したので、**何と戦っているか**はここでしか分からない。
       見出しより小さく、でも読み飛ばせない大きさにする。
*/

.reversi_back {
    margin: 2rem 0 0;
    text-align: center;
    font-family: var(--games-font-body);
}

/*
    🔴 指で押す的は 44px 以上（この単位では 4.4rem）。
       文字リンクは既定だと文字の高さぶんしか的が無く、揺れる車内では押せない。
*/
.reversi_back_link {
    display: inline-block;
    min-height: 4.4rem;
    line-height: 4.4rem;
    padding: 0 1.6rem;
    font-size: 16px;
    color: var(--games-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.reversi_noscript {
    margin: 1rem 0;
    padding: 1rem;
    border: var(--games-line) solid var(--games-red);
    border-radius: 0;
    background: #fff0f0;
    font-family: var(--games-font-body);
    font-size: 14px;
}


/* ── 待った（Step6-4c）────────────────────── */

/*
    🎛️ 盤の下の操作列（Step6-5c）。盤と同じ幅の帯を作り、**両端に振り分ける**。
    🔴 `space-between` が肝＝危ない方（投了）と気軽な方（待った）を**画面の端まで離す**。
       隣り合わせにすると、揺れる車内で押し間違えて対局が終わる。
*/
.reversi_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: 42rem;   /* 盤と同じ上限 */
    /*
        🔴 `border-box` が無いと、下の media で足す padding が **42rem の外側に膨らむ**
           （content-box が既定のため）。実測で操作列が 503px になり、
           「内側に寄せたつもりの待った」がハンバーガーの 5px 手前まで戻っていた。
           盤（`.reversi_board`）と同じ数え方に揃える。
    */
    box-sizing: border-box;
    margin: 1.6rem auto 0;
}

/*
    🔴🔴 **共有レイアウトのハンバーガー（`#open_hamburger_menu_button`）は
       画面右下に固定**（`right:15px; bottom:15px; 50px角; z-index 100001`）。
       ページを開いた直後、「待った」がちょうどその真下に来て**押せなかった**
       （2026-08-18 に 393px 実測＝x300-378 と x328-378 が重なっていた）。
    🔑 回避＝**狭い画面だけ操作列を内側に寄せる**。7rem あればハンバーガーの
       占有帯（右端 6.5rem）から外れる。左も同じだけ寄せて左右対称を保つ。
    📌 しきい値 768px は**発明ではなく鏡写し**＝ハンバーガー自身が
       `layoutmain` の `(min-width: 768px)` で消される、その補集合。
       共有側が境界を動かしたらここも追従が要る。
*/
@media (width < 768px) {
    .reversi_actions {
        padding: 0 7rem;
    }
}

/*
    🔴 押せない時は**見た目でも押せないと分かる**ようにする。
       見た目が変わらないと「押したのに何も起きない」＝壊れていると思われる。
       8ビット流＝灰色にして**影を落とさない**（浮いていない＝押せない）。
*/
.reversi_undo:disabled {
    color: var(--games-grey-dark);
    border-color: var(--games-grey-dark);
    background: #f0f0f0;
    box-shadow: none;
    cursor: default;
}

/* ── ポップアップ（Step5-9 → Step6-4a で復活）─────── */

/*
    🔴🔴 **この節は 2026-08-15（`dc3a89f`）に丸ごと消えていた**。
       ポップアップは `hidden` を外すだけで出る作りなので、CSS が無くても
       **例外もエラーも出ず、テストも全部緑のまま**——ただし
       **覆いかぶさらずにページの一番下へ普通の文章として出る**。
       ⇒ 2026-08-17 にユーザーが画面を見て「変なとこに出てる」と気付いた。
       📌 見張り＝`GamesCssTests`（ビューが使う `reversi_*` の全クラスに規則が在ること）。

    📌 `hidden` が付いている間は出さない。属性を消すだけで出るので、
       JS 側は表示・非表示を1行で切り替えられる。
*/
.reversi_modal[hidden] { display: none; }

.reversi_modal {
    /* 🔴 `fixed` がこの部品の本体＝これが無いと「覆い」ではなく「段落」になる。 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    font-family: var(--games-font-body);
}

.reversi_modal_panel {
    position: relative;
    width: 100%;
    max-width: 34rem;
    /* 🔴 上と同じ理由＝padding を 34rem の内側で数える。無いと狭い画面で覆いからはみ出す。 */
    box-sizing: border-box;
    padding: 2.4rem 2rem 2rem;
    border: 3px solid var(--games-ink);
    border-radius: 0;
    background: var(--games-paper);
    text-align: center;
    /* ぼかした影は使わない＝ウィンドウの縁取り＋硬い影（RPG のメッセージ枠） */
    box-shadow: 5px 5px 0 var(--games-ink);
}

.reversi_modal_title {
    margin: 0 0 1.4rem;
    font-family: var(--games-font-body);
    font-size: 24px;
    font-weight: bold;
    line-height: 1.25;
}

/* ── 結果の箱（Step6-6b）───────────────────── */

/*
    🏁 得点は**文章にしない**＝1本の紐に流し込むと、狭い画面で
       「／レベル2」が途中で折り返す（2026-08-18 にユーザーのスクショで発覚）。
       石のアイコン＋大きい数字の箱にし、レベルは下の行へ分離した。
*/
.reversi_modal_result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin: 0 0 1.4rem;
}

.reversi_modal_result[hidden] { display: none; }

.reversi_modal_side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 10rem;
    padding: 1rem 1.2rem 0.8rem;
    border: var(--games-line) solid var(--games-grey);
    border-radius: 0;
    background: var(--games-paper);
}

/* 🏆 勝った側だけ枠を盤の緑にする＝タイトルを読まなくても一目で分かる */
.reversi_modal_side.is_winner {
    border-color: var(--games-green);
    background: #eefaf1;
}

/* 石のアイコン＝盤の石と**同じドット絵**（同じ変数）で「同じ物」だと分からせる */
.reversi_modal_disc {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
}

.reversi_modal_side.is_black .reversi_modal_disc {
    background-image: var(--reversi-disc-black);
}

.reversi_modal_side.is_white .reversi_modal_disc {
    background-image: var(--reversi-disc-white);
}

.reversi_modal_side_label {
    font-size: 12px;
    color: var(--games-grey-dark);
}

.reversi_modal_side_value {
    font-family: var(--games-font-body);
    font-size: 36px;
    font-weight: bold;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.reversi_modal_vs {
    font-family: var(--games-font-body);
    font-size: 16px;
    color: var(--games-grey-dark);
}

/* レベル・記録の断りなど**1行で済む補足**の置き場（お知らせモードでは本文になる） */
.reversi_modal_score {
    margin: 0 0 1.8rem;
    font-size: 14px;
    line-height: 1.7;
    color: var(--games-ink);
}

.reversi_modal_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.reversi_modal_actions[hidden] { display: none; }

.reversi_modal_link {
    display: inline-block;
    min-height: 4.4rem;
    line-height: 4.4rem;
    font-size: 14px;
    color: var(--games-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/*
    ✕ ボタン。⚠️ 右上の小さい印は押しにくいので、**見た目より広い当たり判定**を持たせる
       （揺れる車内で片手で閉じる前提）。
*/
.reversi_modal_close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 4.4rem;
    height: 4.4rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--games-font-body);
    font-size: 24px;
    line-height: 1;
    color: var(--games-grey-dark);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* レベルの札＝黒地に白抜き・16px（見出しの脇の小さな看板） */
.reversi_level_badge {
    display: inline-block;
    margin-left: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 0;
    background: var(--games-ink);
    font-family: var(--games-font-body);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    color: var(--games-paper);
    vertical-align: middle;
    letter-spacing: 0.04em;
}

/* ── 投了（Step5-17）──────────────────────── */

/*
    🔴 盤とも「新しい対局」とも離す＝誤タップで投了させられるのを防ぐ。
       目立たせる必要のないボタンなので、色は控えめ（灰の字）にする。
       📌 文字の大きさは待ったと同じ＝**差を付けるのは色だけ**。
          大きさまで変えると「小さい方が押せないボタン」に見える。
*/
/* ⏸️ `.reversi_resign_wrap` は Step6-5c で撤去（投了は待ったと同じ操作列に入った）。 */

.reversi_resign {
    color: var(--games-grey-dark);
}

/* ── レコード表（Step5-18）─────────────────── */

.reversi_records {
    margin: 3.2rem 0 2rem;
    padding-top: 1.6rem;
    border-top: var(--games-line) solid var(--games-ink);
    font-family: var(--games-font-body);
}

.reversi_records h2 {
    margin: 0 0 1.2rem;
    font-family: var(--games-font-body);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.25;
}

/*
    📌 表の横スクロールは**保険として残す**が、8列になった今（Step6-5a で
       最短勝利を外した）は 393px でも収まる。
    🔴 9列時代の `min-width: 42rem` は**撤去済み**＝残しておくと、収まるのに
       わざと画面からはみ出して「最大石差」から先が見切れる（2026-08-18 実測）。
*/
.reversi_records_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*
    📊 レコード表もドットフォント（ユーザー判断23）。東雲 14px。
    📌 PC では**広げすぎない**＝1200px いっぱいに8列を散らすと、
       行を目で追えないほど列間が空く（2026-08-18 実測）。
       60rem あれば全列が読みやすく収まり、狭い画面では width:100% が勝つ。
*/
.reversi_records_table {
    width: 100%;
    max-width: 60rem;
    border-collapse: collapse;
    font-size: 14px;
}

/*
    📊 **1行おきに薄く塗る**（2026-08-18 ユーザー要望）＝10行あるので、目が横に滑って
       隣の段の数字を読む事故が起きる。**罫線ではなく地の色で行を追わせる**のが表の作法。
    🔴 罫線は引かない＝縞と罫線を両方やると、8ビットの絞った見た目の中でうるさくなる。
       境目は**見出しの下の太線1本**だけに任せる。
*/
.reversi_records_table th,
.reversi_records_table td {
    padding: 0.9rem 0.6rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.reversi_records_table tbody tr:nth-child(even) th,
.reversi_records_table tbody tr:nth-child(even) td {
    background: #f4f4f4;
}

.reversi_records_table thead th {
    border-bottom: var(--games-line) solid var(--games-ink);
    color: var(--games-grey-dark);
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.04em;
    padding-bottom: 0.6rem;
}

/*
    🎯 **勝率だけ濃く**＝10段ぶんの数字が並ぶ中で、目的の1列を決めておくと迷わない
       （対戦・勝・負・分は勝率を出すための材料で、読むのは最後の1列）。
*/
.reversi_records_table tbody td:last-child {
    font-weight: bold;
    color: var(--games-ink);
}

/*
    ⚪ **まだ遊んでいない段は薄く**（JS が `is_empty` を付ける）。
       10段のうち大半が「0 — — — —」になるので、**遊んだ段だけが浮かび上がる**ようにする。
    🔴 薄いのは色だけ＝行そのものは残す（段が在ることの案内になる・設計どおり）。
*/
.reversi_records_table tbody tr.is_empty th,
.reversi_records_table tbody tr.is_empty td {
    color: #9a9a9a;
    font-weight: normal;
}

/* 行の見出し（レベル名）だけ左寄せ＝列の頭（thead 1列目）も同じ側に揃える */
.reversi_records_table tbody th,
.reversi_records_table thead th:first-child {
    text-align: left;
}

.reversi_records_table tbody th {
    font-weight: bold;
}

/*
    合計＝上に太線・太字。地を塗らない（塗ると表の中で一段うるさい）。
    ⏸️ **合計の行自体は 2026-08-18 に非表示**（`Home.js` 参照）＝今この規則は当たる相手が居ない。
       🔴 **消さない**＝行を戻した瞬間に見た目が要る（規則だけ先に消すと、戻した時に
          「なぜか合計行だけ普通の行に見える」という気付きにくい形で崩れる）。
*/
.reversi_records_table tbody tr.is_total th,
.reversi_records_table tbody tr.is_total td {
    border-top: var(--games-line) solid var(--games-ink);
    border-bottom: none;
    font-weight: bold;
}

/* ⏸️ `.reversi_records_note` は Step7 で撤去（断り書きごと・2026-08-18 ユーザー判断） */

/*
    🔴 表とリセットの間はしっかり空ける（2026-08-18 ユーザー要望）＝
       表のすぐ下に置くと、**表の一部（最後の行の続き）に見える**。
       取り返しのつかない操作なので、**目でも指でも表と切り離す**。
*/
.reversi_records_reset {
    margin-top: 2.4rem;
}

/*
    🔴 リセットは取り返しがつかない。赤の字にはするが赤で塗りつぶさない。
       押す意味がある時（記録が1件以上ある時）だけ JS が出す。
*/
.reversi_records_reset[hidden] { display: none; }

.reversi_records_reset {
    padding: 0 1.6rem;
    border-color: var(--games-red);
    color: var(--games-red);
    box-shadow: none;   /* 取り返しのつかない操作＝浮かせない（押したくなる姿にしない） */
    font-size: 14px;
    font-weight: normal;
}