/* ============================================================
   しわけまる v7 — 見た目の正本（v6の意匠 × 現行のゲーム）

   ⭐ ここは「見た目」だけを持つ。⛔ ふるまいは `_ui.js` と各ゲームのHTML。
   🔴 クラス名と変数名は現行（games/_ui.css）と1つも変えていない。
      → だから4本のゲームは中身を1文字も直さずに、この1枚だけで見た目が変わる。
   ⚠️ これは本番とは別物。本番（app/・games/）には触れていない。
   ============================================================ */

/* ⭐ ロゴの書体（2026/09/16）。⛔ ロゴだけに使う——ほかの文字には当てない。
   🔴 catch-ta.html が持っていたものを、ホームからも使えるようにここへ移した
      （1つの事実は1か所。⚠️ catch-ta.html 側の重複は消してある）。 */
@font-face{font-family:'ShiwakeBrush';src:url(data:font/woff2;base64,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) format('woff2');font-display:swap;}

:root{
  /* --- 面と文字（v6） --- */
  --bg:#f6f4ef;          /* 画面の下地 */
  --panel:#f0ece3;       /* 一段沈んだ面（チップ・解説の箱） */
  --paper:#ffffff;       /* いちばん上の面（カード・表） */
  --paper-line:#eae5db;
  --ink:#1d1a15;         /* 本文 */
  --text:#1d1a15;
  --muted:#6b665e;       /* 補助の文字。⭐ 2026/09/28 #8b857c から濃くした（WCAG AA 4.5:1 に届かなかった → TODO C15。あゆむさん「濃くしてOK」） */
  --faint:#8b857c;       /* いちばん薄い文字。⭐ 2026/09/28 #b7afa0 から一段濃くした（同上。⚠️ まだ 4.5:1 には届かない＝薄い段を残すため） */
  --line:#eae5db;        /* 罫・枠 */
  --track:#ece7dd;       /* 棒の下地 */

  /* --- 主役の色。v6は藍ではなく墨を主役にする --- */
  --ai:#1d1a15;          /* 主要ボタン・見出し */
  --shu:#d94f38;         /* 注意・虫食いの ? ・印 */
  --shu-ink:#b33a25;     /* 字に使う朱（2026/10/04 BOXパズルの「期首」「期末」）。⭐ 薄いベージュの見出しの上でも濃さ 4.96（--shu は 3.43 で基準 4.5 に届かない） */
  --kin:#d99a2b;         /* 強調・つながりの印 */

  --ok:#3d8a52;          /* 正解 */
  --ng:#d94f38;          /* 不正解 */
  --mid:#d99a2b;         /* ふつう */

  /* --- 塗った面の上の文字・薄い色の面（2026/09/30 ナイトモードのために変数にした）---
     ⭐ 昼の値は、それまで各所に直書きしていた色そのもの（→ 昼の見た目は変わらない）。
     ⭐ 夜の値は下の :root[data-theme="dark"] の1か所。⛔ ゲームの側に暗い色を直書きしない。 */
  --on-fill:#fff;        /* --ai・--ok・5要素の色などで塗ったボタンや札の上の文字 */
  --ronten:#b13a2a;      /* 論点の強調（.qtext .ronten・科目キャッチの札の強調） */
  --tint-ok:#e2f4e5;     /* 正解の薄い面（BOXパズルのマス） */
  --tint-ng:#f8ddd6;     /* 不正解の薄い面（BOXパズルのマス・正解表の苦手） */
  --tint-kin:#fdf6e8;    /* つながり・強調の薄い金の面（.is-linked・.is-boxlink） */
  --tint-head:#f6ead0;   /* 表の見出しの薄い面（BOXパズルの一覧表・単語マスターの例） */

  /* --- 簿記の6区分。⭐ 現行と同じ値のまま（意味が変わるため変えない） --- */
  --asset:#2f6690;       /* 資産 */
  --liability:#c0492f;   /* 負債 */
  --equity:#44764a;      /* 純資産 */
  --revenue:#7a5a9e;     /* 収益 */
  --expense:#8a660f;     /* 費用 */
  --profit:#96591c;      /* 当期純利益・当期純損失 */
  --koguchi:#4f5d7d;     /* 科目キャッチのこたえの「小口現金の分類」（2026/10/11 灰色がかった紺。白い字で 6.6） */

  /* --- 丸み（v6。現行より一段大きい） --- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* --- 影。⭐ v6は「沈む影」をやめて、細い枠と薄い影で立たせる --- */
  --shadow-btn:0 1px 2px rgba(29,26,21,.10);
  --shadow-card:0 1px 2px rgba(29,26,21,.06);
  --shadow-press:0 1px 2px rgba(29,26,21,.06);
  --shadow-panel:0 2px 8px rgba(29,26,21,.08);
  --shadow-focus:0 0 0 3px rgba(217,79,56,.20);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;

  /* ⭐ 2026/10/06：xs〜lg を1段大きくした（11・13・15・17 → 12・14・16・18。見やすさの案5 → 見た目の見本 12章） */
  --font-size-xs:12px;
  --font-size-sm:14px;
  --font-size-md:16px;
  --font-size-lg:18px;
  --font-size-xl:21px;
  --font-size-2xl:26px;
  --font-size-3xl:34px;
  --font-size-4xl:52px;
  /* ⭐ 2026/10/09：幅の狭い画面で縮む大きさ（上限は元の段・430px で元の段と同じ）。プレイのタブの札の数字だけが使う（ゲームの中の見た目の監査 2） */
  --font-size-fit-2xl:min(var(--font-size-2xl),6.4vw);
  --font-size-fit-xl:min(var(--font-size-xl),5vw);
  --font-size-fit-lg:min(var(--font-size-lg),4.4vw);
  /* ⭐ 2026/10/06：1段大きくしたとき（上の xs〜lg）に、元の大きさのまま残す所の値。
     ruby＝ふりがなの固定（11px・正本の決まり）／fig-…＝BOXパズルの図の中（1段大きくすると 390×763 に収まらない → 見た目の見本 12-1） */
  --font-size-ruby:11px;
  --font-size-fig-sm:13px;
  --font-size-fig-md:15px;
  --font-size-fig-lg:17px;

  /* 🔴 v6は明朝をやめて、全部この1書体にする */
  --font-serif:'Zen Kaku Gothic New',"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;
  --font-sans:'Zen Kaku Gothic New',"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic",sans-serif;

  --tap-min:44px;
  --bar-h:8px;
  --border-w:1px;        /* ⭐ v6は太枠をやめる（2px → 1px） */

  /* ===== 案B「あかるい学習アプリ」の値（2026/10/05 あゆむさん「Bがいいな！」→ docs/UI設計/見た目の見本.md 7章）=====
     ⭐ 1回目（2026/10/05）：使うのは index.html の5つのタブだけ（index.html の <style> が、タブの中に限って --bg などへ当てはめる）。
        ⛔ ここに足しただけでは、4本のゲーム・科目キャッチ・重ねて出る画面（登録・確認・お祝い）の見た目は変わらない。
     ⭐ 2回目でゲームの中にも当てるときは、上の --bg・--ai などをこの値に置き換え、--b- の付いた名前は消す。
     ⭐ 色の役割：藍（--b-brand）＝主ボタンと選択中／山吹（--b-sun）＝ランクとごほうび／緑＝正解・済み／ゲームの5色＝プレイ・記録・ミッションの印。
        ⛔ 5区分の色（--asset など）は変えない。
     ⭐ ゲームの5色は、上に白い小さい字を置いても濃さ 4.5:1 に届く値（見本の値より濃い。貸借タイムアタックだけ見本のまま）。
        〔見本〕科目キャッチ #F47B20（白い字との濃さ 2.73）・BOXパズル #12A594（3.07）・仕訳チャレンジ #E5488A（3.73）・精算表 #2E90E6（3.36） */
  --b-bg:#EEF4FF;        /* 下地（空色がかった白） */
  --b-paper:#ffffff;     /* 白い面 */
  --b-ink:#1B2440;
  --b-muted:#3A4462;     /* ⭐ 2026/10/06 濃くした（〜10/06 #55607E・見やすさの案5） */
  --b-faint:#5F6A88;     /* ⭐ 2026/10/06 濃くした（〜10/06 #8792B0） */
  --b-line:#D3DDF2;
  --b-row:#EEF2FB;       /* 白い面の中の行の区切り */
  --b-rule:#8493BD;      /* ⭐ 2026/11/03 こたえの表と図の線（白地と 3.05:1＝ローカルデザインシステムの「線は地と 3:1 以上」）。あゆむさん「それぞれのゲームのこたえ　で、罫線やかこみの枠が薄かったり見づらかったり、途切れていたりするので見やすく改善してほしい。太くはしないこと」。⛔ 太さは変えず色だけ。〔〜11/03〕--b-line（1.36:1）・--b-row（1.12:1） */
  --b-track:#DCE5F7;
  --b-brand:#2F62E0;     /* 藍（塗る色。上の字は白） */
  --b-brand-d:#1D43AB;   /* 藍の段差 */
  --b-brand-t:#E1EAFF;   /* 藍の薄い面 */
  --b-brand-tx:#2F62E0;  /* 藍の字・印（夜は明るくする） */
  --b-sun:#FFB627;
  --b-sun-d:#D48806;
  --b-ok:#1FA05A;
  --b-flame:#F26B21;     /* 連続日数の炎（続いているとき） */
  --b-sky:#CFE1FF;       /* ホームの舞台：空 */
  --b-moon:#FFE9AE;      /* ホームの舞台：しわけまるの後ろの丸 */
  --b-hill:#A9C8FA;      /* ホームの舞台：丘 */
  --b-on:#ffffff;        /* 塗った面の上の字 */
  --b-wash:rgba(255,255,255,.22);   /* 塗った面の上の、白い薄い面（札の印の地・ランクの印の地） */
  --b-c-ta:#6A5AE0;    --b-c-ta-d:#4A3BB5;
  --b-c-catch:#BC5409; --b-c-catch-d:#8F3F06;
  --b-c-box:#0C8375;   --b-c-box-d:#085F55;
  --b-c-jr:#CF3A7A;    --b-c-jr-d:#A0265B;
  --b-c-ws:#2177C5;    --b-c-ws-d:#17578F;
  --b-c-vs:#1B2440;    --b-c-vs-d:#070B1A;
  --b-c-any:#66708D;   --b-c-any-d:#4C5570;
  --b-radius-sm:10px;
  --b-radius-md:14px;
  --b-radius-lg:18px;
  --b-radius-xl:24px;
  --b-step:0 5px 0 var(--b-line);          /* 押せる物の段差（白い物） */
  --b-step-c:0 5px 0 var(--cd);            /* 押せる物の段差（色の札。--cd はその札の濃い色） */
  --b-step-sm:0 3px 0 var(--b-line);
  --b-step-tag:0 2px 0 var(--tg-d, var(--b-sun-d));   /* ⭐ 2026/11/04 プレイの札の左上の印（NEXT／CLEAR／PERFECT!）の段差。CLEAR は使う側で --tg-d をその札の濃い色に */
  --b-knob:0 2px 0 rgba(27,36,64,.18);
  /* ⭐ 2026/10/06：書体は見出し・本文・数字とも BIZ UDPゴシック（見やすさの案5。あゆむさん「今はポップさじゃなくてミヤサを優先したい」「5実装しようか」→ 見た目の見本 12章）。
     〔〜10/06〕見出し Mochiy Pop One・本文 M PLUS Rounded 1c（丸文字）・数字 Fredoka。留学生に丸文字は読みづらい、で替えた。
     ⭐ 太さは 400 と 700 の2つだけ。800・900 の指定は 700 で出る。⛔ 丸ゴシック（Hiragino Maru Gothic ProN）は代わりの書体にも入れない */
  --b-font-disp:'BIZ UDPGothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --b-font-body:'BIZ UDPGothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --b-font-num:'BIZ UDPGothic','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
}

/* ===== ナイトモード（2026/09/30 新設）=====
   ⭐ あゆむさん 2026/09/30「設定　ナイトモード」。オン・オフは _テーマ.js が <html data-theme="dark"> で切り替える。
   ⭐ 変えるのは色の変数だけ（形・寸法は昼と同じ）。⛔ 画面ごとに別の暗い色を作らない——ここ1か所。
   ⚠️ 5要素の色（資産〜費用）は、暗い下地で読める明るさまで上げる（色相は昼と同じ）。 */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16140f;
  --panel:#211e18;
  --paper:#2a2620;
  --paper-line:#3a352c;
  --ink:#f1ece2;
  --text:#f1ece2;
  --muted:#c2baac;
  --faint:#9a927f;
  --line:#3a352c;
  --track:#332f27;
  --ai:#f1ece2;
  --shu:#ff7a61;
  --shu-ink:#ff7a61;
  --kin:#f0b54a;
  --ok:#6cc383;
  --ng:#ff7a61;
  --mid:#f0b54a;
  --asset:#6fa8d6;
  --liability:#f08a70;
  --equity:#86c28c;
  --revenue:#b89be0;
  --expense:#d9b24e;
  --profit:#dd9a5a;
  --koguchi:#9aa7c7;     /* 夜の「小口現金の分類」（暗い字で 7.7） */
  --on-fill:#16140f;     /* ⭐ 夜は塗った面が明るくなるので、上の文字は暗くする */
  --ronten:#ff8f78;
  --tint-ok:#1f3325;
  --tint-ng:#3d2621;
  --tint-kin:#352b19;
  --tint-head:#2e2920;
  --shadow-btn:0 1px 2px rgba(0,0,0,.4);
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-press:0 1px 2px rgba(0,0,0,.35);
  --shadow-panel:0 2px 8px rgba(0,0,0,.45);
  /* ⭐ 案Bの夜（2026/10/05 あゆむさん「全部おすすめで」＝紺の地に、同じ藍と山吹）。⭐ ゲームの5色・山吹・緑は昼と同じ（上の字が白のまま読める） */
  --b-bg:#0E1530;
  --b-paper:#1A2348;
  --b-ink:#EEF2FF;
  --b-muted:#B7C1E0;
  --b-faint:#8E9AC0;
  --b-line:#2B376A;
  --b-row:#263060;
  --b-rule:#5C6CAA;      /* こたえの表と図の線（夜の白い面 #1A2348 と 3.03:1） */
  --b-track:#313D73;
  --b-brand-d:#16348A;
  --b-brand-t:#24336B;
  --b-brand-tx:#8FB0FF;
  --b-sky:#1B2A5C;
  --b-moon:#3A4A8A;
  --b-hill:#24356E;
  --b-c-vs:#2A3666;
  --b-knob:0 2px 0 rgba(0,0,0,.4);
}
/* ⭐ 2級の夜（2026/11/01 あゆむさん「ナイトモードの色調少し変えてわかりやすいように」→ 選んだのは「紫寄りの紺」）。
   上の紺の色を、明るさと鮮やかさはそのままに色相だけ 24度 紫の側へ回した（228度→252度）。⭐ ゲームの5色・山吹・緑・赤・藍のボタンは3級と同じ。
   ⭐ <html data-kyu="2"> は _テーマ.js が付ける（設定の kyu2）。昼の色は級で変えない。
   ⚠️ 下地（--b-bg）はブラウザの上の帯の色として _テーマ.js にも書いてある（変えたら両方） */
:root[data-theme="dark"][data-kyu="2"]{
  --b-bg:#150E30; --b-paper:#231A48; --b-ink:#F1EEFF; --b-muted:#BDB7E0; --b-faint:#968EC0; --b-line:#382B6A;
  --b-row:#332660; --b-track:#3F3173; --b-brand-d:#26168A; --b-brand-t:#31246B; --b-brand-tx:#9B8FFF; --b-sky:#261B5C;
  --b-moon:#4A3A8A; --b-hill:#31246E; --b-c-vs:#362A66; --b-fixed:#2A1F56; --b-off:#473A78; --b-off-d:#382B6A;
}

/* 🔴 2026/09/16 あゆむさん「2回画面をタッチして画面を拡大しないようにしてほしい」（全ゲーム）。
   ⛔ `maximum-scale=1` は iOS Safari が無視する（アクセシビリティのため）。
      ⚠️ 5本には書いてあったが、それだけでは止まらない。
   ⭐ `touch-action:manipulation` がダブルタップの拡大だけを止める
      （⭐ 指2本の拡大は残る——**読めない人が拡大する道は塞がない**）。 */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html,body{height:100%;margin:0;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--font-size-md);line-height:1.8;
  display:flex;flex-direction:column;align-items:center;
  min-height:100%;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.num,.sans{font-family:var(--font-sans);font-feature-settings:"tnum";}
.hidden{display:none !important;}

/* ルビ：この3つは必ず組で入れる（現行からそのまま引き継ぐ）
   🔴 ふりがなは流れの外に出す（`rt` を `position:absolute`）。
      2026/08/08 あゆむさん「ふりがなはあくまでもさぶ。メインは下の漢字。
      ふりがなに合わせてメインの漢字の位置を変えないこと」
   ⭐ はみ出す向きは右だけ（ふりがなの左端を漢字の左端に揃える）。
   🔴 中央に置いてよいのは、文字そのものが中央にある部品だけ。
      ⛔ ここを全部 translateX(-50%) にすると、本文中のふりがなが隣の字に重なる。 */
/* 🔴 2026/08/28 あゆむさん「ふりがなのふる位置がほぼ全部ずれている＆
      対象の漢字から離れてて見づらいから、もう少し近づけて」
   ⛔ それまでは `left:0`（＝ふりがなの左端を漢字の左端にそろえる）が既定で、
      **中央に置くのは一部の部品だけ**だった。
      → ⚠️ 読みが漢字より広い語（売上→うりあげ）で、右へ最大3.3pxはみ出していた。
   ⭐ いまは全部まとめて中央ぞろえにする（例外を作らない）。
      🔴 「漢字の位置を動かさない」という決めごとは守られている
         ——動かしているのは、ふりがなの側だけ。 */
/* 🔴 2026/08/28 あゆむさん「ふりがなが左づめ？になっているかな。もっと漢字の近くに寄せて。
   全部のふりがなについて」「これ場所はゲーム内で全て統一させた方がいいのかな」
   ⭐ 統一する。⛔ それまでは `em` で指定していたので、
      **文字の大きさが違うゲームごとに、すき間が変わっていた**
      （実測：単語マスター 5.2px / 仕訳 3.2px / BOX -1.5px＝くっついていた）。
   → 🔴 `px` で決め打ちすれば、どの画面でも同じ見えかたになる。 */
/* 🔴 2026/08/28 あゆむさん「まだ全部のゲームでふりがなが左揃えになってる。
   漢字の場所に対し、ふりがなが左にある」

   ⭐ ふりがなの位置は、ブラウザに任せる（`position` で動かさない）。
      🔴 ブラウザのルビは、はじめから漢字の真上に中央ぞろえで置く。
      ⛔ `position:absolute` で自前に置くと、置く基準がずれたときに
         **左へ流れる**。実際そうなっていた。
   ⚠️ もともと `absolute` にしていたのは「ふりがなに合わせて漢字を動かさない」ため
      （2026/08/08 あゆむさん「ふりがなはあくまでもさぶ」）。
      → ⭐ それは `ruby-align:center` と `rt` を小さく保つことで足りる。
   🔴 ここで決めるのは大きさ・濃さ・行間だけ。6本ともこの1か所から取る。 */
/* 🔴 `display:inline-block` にしない。
   ⛔ inline-block にすると、箱の幅が**広いほうのふりがなに合わせて広がり**、
      漢字がその左端に寄る＝「ふりがなが右にずれて見える／漢字が左に寄る」。
      実測：漢字「前期」は30pxなのに、箱が59pxになっていた（2026/08/28）。
   ⭐ 既定の `ruby` のままにすれば、ブラウザが漢字の真上に中央ぞろえで置く。 */
/* 🔴 2026/08/28（4回目の修正）あゆむさん
   「ふりがなの位置が酷いし小さすぎて見えないし、どの漢字に対応しているのか全くわからない」

   ⭐ 原因：**ふりがなが漢字より広いと、ブラウザは「漢字＋ふりがな」の対ごと中央に置く。**
      → 漢字の側が左右に押し出され、ふりがなが別の漢字の上にあるように見える。
   ⛔ CSSだけでは直らない（幅は文字ごとに違うので、比率では決められない）。
      → 🔴 `SW.fitRuby()` が、**広すぎるふりがなだけ**を漢字の幅まで縮める（_ui.js）。
   ⚠️ 小さくしすぎない。⭐ 既定は .58em（17px の本文なら約10px）で、
      縮める下限も .42em で止める（読めなくなるため）。 */
/* 🔴 2026/08/30：`position:static` と `left:auto` を明記した。
   ⛔ ゲーム側に `rt{left:50%}` のような古い指定が残っていると、
      **Safari では効いてふりがなだけが画面の左端に落ちる**
      （Chrome は無視するので、手元では気づけない）。
   ⭐ ここで打ち消しておけば、どのゲームでも同じ見えかたになる。 */
/* 🔴 2026/10/20：ruby の position:relative を外した（あゆむさん「ふりがなが見えてない、隠れてる」「開き直したらふりがなが消えた」・iPhone 11 Pro）。
   ⛔ 〔8/30〜10/20〕ruby{position:relative} だった（rt の古い left:50% を打ち消したときに一緒に入った。rt を static にしたので、それ以後は何も位置を決めていない）。
      位置の指定がある語は WebKit で別の層として描かれ、語の箱の外（上）にはみ出したふりがなが、上半分だけ描かれたり、開き直すと消えたりした（こたえの問題文の1行目）。
   ⭐ 外しても置き方は1px も変わらない（WebKit・Chrome で全部のふりがなの位置を前後で比べた）。⚠️ 語群のボタンは journal.html で自分の position:relative と top を持つ */
ruby{line-height:2.0;ruby-align:center;}
rt{position:static;left:auto;right:auto;top:auto;transform:none;
  font-size:.58em;line-height:1.15;letter-spacing:-.03em;
  font-weight:500;color:var(--muted);
  ruby-position:over;text-align:center;}
.wrap-anywhere{overflow-wrap:anywhere;}

/* ============================================================
   画面の骨格
   ============================================================ */
.wrap{
  width:100%;max-width:430px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 20px);
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin:0 0 var(--space-3);}
.ttl{font-size:var(--font-size-md);font-weight:700;letter-spacing:.02em;color:var(--ink);text-align:center;flex:1;}
.ttl small{display:block;font-size:var(--font-size-xs);color:var(--faint);letter-spacing:.08em;font-weight:400;}
.hud{display:flex;gap:6px;}
.foot{margin-top:auto;padding-top:var(--space-4);text-align:center;
  font-size:var(--font-size-xs);color:var(--faint);letter-spacing:.04em;}

/* ============================================================
   部品
   ============================================================ */

/* --- チップ --- */
.chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:5px 12px;text-align:center;min-width:52px;}
.chip b{display:block;font-size:10px;color:var(--faint);letter-spacing:.06em;font-weight:600;}
.chip span{font-size:var(--font-size-md);font-weight:700;font-feature-settings:"tnum";}
.tag{display:inline-block;font-size:var(--font-size-xs);color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:3px 10px;letter-spacing:.02em;}

/* --- ボタン。⭐ v6は面で押す（影で浮かせない） --- */
.btn{display:block;width:100%;border:none;border-radius:var(--radius-lg);
  background:var(--ai);color:var(--on-fill);font-size:var(--font-size-lg);font-weight:700;
  padding:15px 20px;cursor:pointer;font-family:inherit;letter-spacing:.02em;
  box-shadow:var(--shadow-btn);min-height:var(--tap-min);
  transition:opacity .12s ease,transform .12s ease;}
.btn:active{transform:scale(.985);opacity:.9;}
.btn:disabled{background:var(--faint);box-shadow:none;cursor:default;}
.btn-next{background:var(--ok);box-shadow:var(--shadow-btn);}
/* 🔴 2026/09/19 あゆむさん第13報「全てのゲームでこのようなUIは統一させて。
   ボタンとボタンがくっつき合うことはない」。
   ⛔ 実測：科目キャッチの「はじめる」と「正解表」の隙間は 0px だった。
   ⭐ 縦に並んだボタンの間を 10px 空ける（6本とも同じ規則で効く）。
   ⚠️ `style="margin-top:..."` を直書きしている所は、そちらが勝つ（既に空いている）。 */
.btn + .btn{margin-top:10px;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--radius-md);padding:13px;font-size:var(--font-size-sm);font-weight:600;box-shadow:none;}
/* 🔴 2026/09/17：`min-height:0` で **35px** になっていた——⛔ 自分で決めた押せる最小
   （`--tap-min` 44px）を下回る。⚠️ 隣の「一時停止」は 44px なので、並ぶと高さも揃わない。
   ⭐ 44px にして、見た目の細さは padding で保つ。 */
.btn-back{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:7px 14px;font-size:var(--font-size-sm);font-weight:700;color:var(--muted);cursor:pointer;
  width:auto;min-height:var(--tap-min);box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* 🔴 2026/09/17 あゆむさん「「ホームへ戻る導線を家アイコンにする」　これで統一させたい」。
   ⭐ 上部バーの左（← ホーム／やめる）を、家のアイコン1つにそろえる。
   ⛔ 遊んでいる最中の確認（「やめますか？」）と結果画面の「ホームへ」は文字のまま
      （同日あゆむさんの指定。答えが文字のほうが分かるため）。
   ⭐ 右の一時停止（.btn-pause）と同じ正方形にする——⛔ ここだけ丸みを変えない。 */
.btn-back.is-home{padding:0;width:var(--tap-min);border-radius:var(--radius-sm);font-size:17px;}

/* --- カード（選ぶもの） --- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:15px;font-size:var(--font-size-md);font-weight:600;color:var(--ink);cursor:pointer;
  text-align:left;font-family:inherit;line-height:1.6;min-height:var(--tap-min);
  box-shadow:var(--shadow-press);display:flex;align-items:center;gap:11px;width:100%;
  transition:border-color .12s ease,transform .12s ease;}
.card:active{transform:scale(.99);}
.card .no{flex:0 0 24px;height:24px;border-radius:var(--radius-circle);
  background:var(--panel);color:var(--muted);font-size:var(--font-size-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;}

/* --- パネル --- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:15px 16px;font-size:var(--font-size-md);line-height:1.9;}
.panel-strong{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);}
.panel-result{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:24px 20px;text-align:center;box-shadow:var(--shadow-panel);}
.note{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:var(--radius-md);padding:12px 14px;font-size:var(--font-size-sm);line-height:1.9;}
.note.is-correct{background:var(--panel);color:var(--text);border-left-color:var(--ok);}
.note.is-wrong{background:var(--panel);color:var(--text);border-left-color:var(--ng);}
.note .hd{font-weight:700;font-size:var(--font-size-md);margin-bottom:3px;}

/* --- 横棒 --- */
.bar{height:var(--bar-h);background:var(--track);border:none;
  border-radius:var(--radius-pill);overflow:hidden;margin:0 0 var(--space-3);}
/* ⭐ 時間だけ太く（8px では細くて気づけない）。
   ⚠️ 必ず .bar の「後」に置く——同じ強さなので、前に置くと .bar に負ける（2026/09/16 に踏んだ）。 */
.bar-time{height:12px;}
.bar > i{display:block;height:100%;width:100%;transform-origin:left center;border-radius:var(--radius-pill);}
/* 🔴 2026/09/16：時間の棒を見やすくした（あゆむさん第3報「時間のバーがなくなってる」→ C案）。
   ⛔ 金 #d99a2b は下地 #ece7dd に対して 1.98:1 で、図形の下限 3.0:1 に届いていなかった
      （⚠️ 消えてはいなかった——**薄くて見えなかった**。測って分かった）。
   ⭐ 朱（--shu #d94f38）は 3.32:1 で基準を満たす。⛔ 新しい色は増やさない。
   ⭐ 「残り時間が減っていく」ものなので、注意の色で正しい。 */
.bar-time > i{background:var(--shu);}
.bar-prog > i{background:var(--ink);}
.bar-anim > i{transition:transform .1s linear;}

/* --- 印 --- */
.seal{display:inline-block;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius-pill);font-size:var(--font-size-xs);font-weight:700;
  padding:4px 12px;letter-spacing:.10em;background:var(--panel);}

/* ============================================================
   ホームの型
   ============================================================ */
.home-head{text-align:center;margin:26px 0 18px;}
/* 🔴 2026/09/17：家アイコンにしたら、開始画面の戻るボタンが真ん中に寄った。
   ⛔ 原因は上の `text-align:center`——**幅いっぱいの「← ホーム」では気づけなかった**
      （⭐ 文字のときは箱が横に広く、中央寄せでも左端に見えていた）。
   ⭐ 題は中央のまま、ボタンだけ左に戻す。 */
.home-head .btn-back.is-home{display:flex;margin-right:auto;}
.home-title{font-size:var(--font-size-3xl);font-weight:700;letter-spacing:.01em;margin:0;color:var(--ink);}
.home-lead{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:15px var(--space-4);font-size:var(--font-size-md);line-height:1.95;margin-bottom:var(--space-2);}
.home-note{font-size:var(--font-size-sm);color:var(--muted);line-height:1.8;margin:10px 2px var(--space-4);}
/* 🔴 2026/08/28 あゆむさん「これらの間は適切に作って。くっつけないで幅は統一」
   ⭐ 題 → 記録 → はじめる の間隔を、ここ1か所で決める。
   ⛔ 各ゲームのHTMLに直書きしない（3本だけ余白が付いていて、ずれていた）。 */
.home-best{display:flex;gap:10px;margin:0 0 18px;}
.home-best > *{min-width:0;}
.home-best div{flex:1 1 0;min-width:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:13px 9px;text-align:center;}
.home-best b{display:block;font-size:10px;color:var(--faint);letter-spacing:.02em;white-space:nowrap;font-weight:600;}
.home-best span{font-size:var(--font-size-xl);font-weight:700;color:var(--ink);font-feature-settings:"tnum";}

/* ============================================================
   問題を大きく見せる箱
   ============================================================ */
.ask{text-align:center;font-size:var(--font-size-sm);color:var(--muted);margin:0 0 var(--space-2);line-height:1.7;}
.ask b{color:var(--ink);font-size:var(--font-size-md);}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:22px var(--space-4);text-align:center;box-shadow:var(--shadow-card);}
.qtext{font-size:var(--font-size-2xl);font-weight:700;line-height:1.75;letter-spacing:.01em;
  color:var(--ink);overflow-wrap:anywhere;}
/* ⭐ 論点の強調（2026/09/15 あゆむさん）。⛔ 太字にはしない——ふりがなの位置がずれるため。
   ⭐ 色は科目キャッチの朱色と同じ。 */
.qtext .ronten{color:var(--ronten);font-style:normal;}
.qmeta{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:var(--space-3);}

/* ============================================================
   結果の型
   ============================================================ */
.panel-result h2{margin:var(--space-2) 0 2px;font-size:var(--font-size-xl);letter-spacing:.02em;}
.panel-result .sub{font-size:var(--font-size-sm);color:var(--muted);letter-spacing:.06em;margin-bottom:10px;}
.scorebig{font-size:var(--font-size-4xl);font-weight:700;text-align:center;color:var(--ink);
  line-height:1;margin:12px 0 2px;font-feature-settings:"tnum";}
.scorebig small{font-size:var(--font-size-md);color:var(--muted);font-weight:600;}
.recap{text-align:left;margin-top:16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:13px;font-size:var(--font-size-sm);line-height:1.8;color:var(--muted);}
.recap b.hd{display:block;font-size:var(--font-size-sm);color:var(--ink);margin-bottom:var(--space-2);}
/* ⚠️ `display:block` を明示する（見本帳の `.row` は横並びなので、書かないと横に並ぶ） */
.recap .row{display:block;line-height:2;padding:8px 0;border-top:1px solid var(--line);}
.recap .row:first-of-type{border-top:none;}
.recap .row .f{display:block;font-weight:700;color:var(--ink);}
.recap .row .t{display:block;color:var(--ok);font-weight:700;padding-left:1.1em;text-indent:-1.1em;}
.recap .row .ar{font-size:var(--font-size-xs);margin-right:3px;}

/* ============================================================
   財務諸表（B/S・P/L）
   ============================================================ */
.doc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);}
.doc-h{display:flex;align-items:baseline;justify-content:center;gap:9px;padding:9px 10px;
  border-bottom:1px solid var(--line);background:var(--panel);}
.doc-h .jp{font-size:var(--font-size-md);font-weight:700;letter-spacing:.06em;}
.doc-h .en{font-size:var(--font-size-xs);color:var(--faint);letter-spacing:.12em;}
.doc-h .dt{font-size:var(--font-size-xs);color:var(--muted);font-weight:700;letter-spacing:.02em;}
.grid2{display:grid;grid-template-columns:1fr 1fr;}
.grid2 > .col:first-child{border-right:1px solid var(--line);}
.col{display:flex;flex-direction:column;}
.seg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 6px;min-height:48px;border-bottom:1px solid var(--line);position:relative;}
.seg:last-child{border-bottom:none;}
.seg .lab{font-size:var(--font-size-md);font-weight:700;letter-spacing:.02em;line-height:1.2;}
.seg .val{font-size:var(--font-size-xl);font-weight:700;font-feature-settings:"tnum";color:var(--ink);}
.seg.asset .lab{color:var(--asset);}
.seg.liability .lab{color:var(--liability);}
.seg.equity .lab{color:var(--equity);}
.seg.revenue .lab{color:var(--revenue);}
.seg.expense .lab{color:var(--expense);}
.seg.profit .lab{color:var(--profit);}
.flow{display:flex;align-items:center;justify-content:center;gap:7px;padding:4px 0;color:var(--muted);}
.flow .ar{font-size:var(--font-size-md);line-height:1;color:var(--faint);}
.flow .tx{font-size:var(--font-size-xs);letter-spacing:.04em;}

/* ============================================================
   状態（正解・不正解・つながり）
   ⚠️ 意味と色は固定。ゲームごとに変えない
   ============================================================ */
/* 🔴 2026/08/28 あゆむさん「あか：ミス、緑：正解 は分かりづらい。
   色ではなく記号で ❌(赤)、⭕️(緑) で答えを示そう」
   ⭐ 色を持つのは記号だけ。⛔ 面と枠は塗らない。 */
/* ⚠️ ⭕❌ は絵文字なので、そのままだと端末の色（⭕は赤）で出る。
   ⛔ `color` だけでは変えられない。
   → ⭐ `-webkit-text-fill-color` で塗り、白黒の字形（\uFE0E）を指定する。 */
.mk{font-size:17px;line-height:1;display:inline-block;font-weight:900;
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;}
/* ⭐ 2026/09/13 あゆむさん「全ゲーム緑の丸はもう少しわかりやすく太くしたい」：
   ◯ の字形は線が細く、font-weight では太くならない。→ 字を透明にして、枠線で丸を描く */
.mk.ok{color:transparent;-webkit-text-fill-color:transparent;width:1em;height:1em;box-sizing:border-box;
  border:.2em solid var(--ok);border-radius:50%;vertical-align:-.1em;}
.mk.ng{color:var(--ng);-webkit-text-fill-color:var(--ng);}
/* 記号が乗る丸は、下地を消して記号だけ見せる */
.card .no:has(.mk){background:transparent;}
.is-answer{border-color:var(--ok);}
.is-picked{border-color:var(--ng);}
.is-answer .no,.is-picked .no{background:transparent;}

/* ⚠️ 旧クラスは、まだ使っている画面のために残す（面は塗らない形に変えてある） */
.is-correct{border-color:var(--ok);}
.is-wrong{border-color:var(--ng);}
.is-dim{opacity:.4;}
.is-linked{box-shadow:inset 0 0 0 2px rgba(217,154,43,.55);background:var(--tint-kin);}
.is-blank{background:var(--panel);}

/* はじまりのカウントダウン（3・2・1・GO!）。
   🔴 2026/08/31 あゆむさん「カウントダウン（3・2・1）これは全てのゲームで表示したい」。
   ⭐ 6本ともここから取る（動かすのは `_ui.js` の `SW.countdown`）。
   ⚠️ 数字は画面いっぱいに大きく——⛔ 小さいと「始まる合図」にならない。 */
.sw-count{position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:var(--b-veil);backdrop-filter:blur(2px);
  pointer-events:none;}
.sw-count.hidden{display:none !important;}
.sw-count-n{display:grid;place-items:center;min-width:150px;height:150px;border-radius:75px;
  background:var(--b-count-bg);color:var(--b-count-ink);box-shadow:var(--b-step-count);
  font-size:96px;font-weight:700;line-height:1;font-family:var(--b-font-num);font-feature-settings:"tnum";}
@keyframes swCountPop{
  0%{transform:scale(.4);opacity:0;}
  30%{transform:scale(1.15);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ============================================================
   登録画面のための2つ（2026/09/06・v7 の段3）
   .sw-overlay … 画面全体を覆う重ね画面（カウントダウンの .sw-count と同じ発想。中身は .wrap で組む）
   .field      … 文字を入れる欄（学籍番号）。⚠️ 6本で入力欄はここだけ
   ============================================================ */
.sw-overlay{position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;
  display:flex;justify-content:center;align-items:flex-start;}
.sw-overlay.hidden{display:none !important;}
.field{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--radius-md);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:var(--font-size-xl);font-weight:700;
  letter-spacing:.08em;text-align:center;padding:12px 14px;margin:10px 0 0;font-feature-settings:"tnum";}
.field:focus{outline:none;border-color:var(--ai);}

/* ⭐ ゲームをやめるかの確認（2026/09/15 あゆむさん「ホームボタンを押したら
   ゲームをやめるかの確認画面(つづけるorホームに戻る)」）。
   🔴 z-index は 90——⛔ 結果画面(70)とカウントダウン(80)より上に出す。
      ⚠️ 下に隠れると「押しても何も起きない」ように見える。 */
.sw-confirm{position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--b-veil);backdrop-filter:blur(2px);}
.sw-confirm.hidden{display:none !important;}
.sw-confirm-box{background:var(--b-paper);color:var(--b-ink);border-radius:var(--b-radius-xl);
  padding:22px 20px 20px;width:100%;max-width:320px;text-align:center;
  font-family:var(--b-font-body);font-weight:700;}
.sw-confirm-box h2{margin:0 0 6px;font-size:var(--font-size-lg);font-weight:700;}
.sw-confirm-box p{margin:0 0 16px;font-size:var(--font-size-sm);color:var(--muted);}
.sw-confirm-box .btn{margin-top:8px;}

/* --- 数字キー（テンキー）------------------------------------------------
   🔴 2026/09/17 あゆむさん「このようなUIの差や表記揺れがあれば統一するか提案してほしい。
      app内のUIは原則統一って伝えてると思うので」→「A BOXに揃える」。
   ⛔ それまでは 仕訳・BOX・精算表 の3本が **別々に `.pad button` を書いていて、
      高さ（46/56px）・角丸（8/12px）・文字の太さ・影・すき間（5/6px）が食い違っていた**
      （実測で確かめた）。⭐ BOX の形を正本にして、ここに1つだけ置く。
   ⚠️ 各ゲームの `<style>` からは消す——⛔ 残すと、あとから書いた方が勝って元に戻る。 */
/* 🔴 2026/10/04 あゆむさん「数字のテンキーとGOの部品自体を全体的に小さくしてみようか。」（BOXパズルをスクロールなしにするため）。
   ⛔ それまでは 高さ 46px・数字 21px・すき間 6px。⭐ 3本（BOX・精算表・仕訳）とも同じ形のまま小さくする。
   ⭐ GO（.pad ~ .btn）も下で同じく小さくした。 */
.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.pad button{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius-md);
  min-height:40px;font-size:var(--font-size-lg);font-weight:700;color:var(--ink);cursor:pointer;
  font-family:var(--font-sans);font-feature-settings:"tnum";box-shadow:var(--shadow-press);}
.pad button:active{transform:translateY(2px);box-shadow:none;}
/* ⭐ とりけしは右端に縦1行（2026/08/11 あゆむさん指定）。
   ⭐ 2026/11/01 から 0 は右上・とりけしは右の下2段（あゆむさん「0ととりけし　のボタンの位置をそれぞれ逆へ。ボタンサイズは変えない(boxなど他も)」）。
      0 が GO！の真上から離れる（「0押した時にgo押されてしまう」）。〔08/11〜11/01〕とりけしが右の上2段・0 が右下（GO！の真上） */
.pad button.del{grid-column:4;grid-row:2 / span 2;writing-mode:vertical-rl;text-orientation:upright;
  font-size:var(--font-size-md);letter-spacing:.16em;justify-self:stretch;}
.pad button.fn{font-size:var(--font-size-md);color:var(--muted);}
/* ⭐ テンキーの下の GO（つぎの問題へ）も小さくする（2026/10/04・上と同じ指示）。⛔ それまでは高さ約51px（.btn の既定）
   ⛔ `.padarea` と書かない——3本の <style> にも `.padarea` があり、検査⑬（同じクラス名が別のものを指していないか）が止める。
   ⭐ 3本とも GO と「わからない」はテンキー（.pad）と同じ親の中で後ろにある（テンキーを隠しているときも並びは同じ）。 */
.pad ~ .btn{padding:10px 20px;min-height:40px;}

/* --- アイコンの書体（MSym）------------------------------------------------
   🔴 2026/09/17 あゆむさん「すべてに共通して一時停止は漢字ではなくアイコンを使用してほしい」。
   ⛔ それまで新4本には書体が無く、文字（「一時停止」）で置いていた。
   ⭐ **ここに1つだけ置く**——⛔ 4本の `<style>` に貼らない（**同じ9KBが4つぶら下がる**）。
      ⚠️ `_ui.css` は6本とも読んでいるので、**1つ置けば6本に届く**（読み込みも1回で済む）。
   ⚠️ 中身は `catch-ta.html` に入っているものと同じ（38字だけの部分書体）。
      ⛔ 収録が無い字は出ない——**使う前に、その字が入っているか確かめること。**
         （2026/09/17 実測の一覧：U+E034 一時停止／U+E9B2 家／U+E8B8 歯車／U+F889 トロフィー ほか） */
@font-face{font-family:'MSym';font-style:normal;font-weight:500;font-display:block;src:url(data:font/woff2;base64,AAEAAAAOAIAAAwBgR1NVQi45NEUAAAPYAAAB7k9TLzJhzF8TAAACMAAAAGBTVEFUexBt8wAAApAAAABsY21hcD03bC4AAAL8AAAA3Gdhc3AAAAAQAAAA9AAAAAhnbHlm2r2bjwAACBwAABLSaGVhZDB0nZEAAAFgAAAANmhoZWEH5gcLAAABPAAAACRobXR4CZwG0gAAAZgAAABMbG9jYXJdduEAAAHkAAAATG1heHAASAFuAAAA/AAAACBuYW1lNSxgewAABcgAAAJUcG9zdAADAAEAAAEcAAAAIHByZXBoBoyFAAAA7AAAAAe4Af+FsASNAAABAAH//wAPAAEAAAAlAW0AIgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAABAAAEIP+gAAADwP/t/+oD1gPAAAAAAAAAAAAAAAAAAAAAAQABAAAAAvhSSV7MRF8PPPUAAgPAAAAAAObMqPEAAAAA5sy4Ff/t/6UD1gPZAAAABgACAAAAAAAAA8AAyABwAJgASAAhAJgASgBIAEEARgC5AJgAYgBVAAAAAABtAEAAbQBtAG0AQABtADsAbQBvAGMAbQBFAG0AbQA4AC8AYQAYAAcALgAAACcAwwE2AcoCrQL/A6IEIARzBL0FBAVHBbQGhgaGBqEG1QcOBy8HRQdZB5AHpwe+B9oH6QgPCCoIVAh5CKMI5Aj2CRgJQQldCWkABAPAAfQABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUKAQMBAgICAgIAAAABEAAAAAAAAAAAAAAAR09PRwDAACD4iQQg/6AAAAQmAFsAAAABAAAAAAPAA8AAAAAgACsAAQABAAgABAAAABQABAAAADQAAkZJTEwBAAAAR1JBRAEBAAFvcHN6AQIAAndnaHQBAwADACwAIAAUAAgAAQADAAABBwH0AAAAAQACAAIBCwAYAAAAAQABAAIBCgAAAAAAAQAAAAIBCgAAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAMgAAAAuACAABAAOACAAXwBpAHAAdQB3AHngNOJr4/fkHeVk6IrouOmy6fzqGepn6vbrQ+vM+In//wAAACAAXwBhAGsAcgB3AHngNOJr4/fkHeVk6IrouOmy6fzqGepn6vbrQ+vM+In////u/8X/rv+t/6z/q/+qH9YdoBwSG+sapRd7F1UWUxYGFesVnBURFMkUNQd9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAKACQAMgACREZMVAAObGF0bgAOAAQAAAAA//8AAQAAAAFybGlnAAgAAAABAAAAAQAEAAcAAAADAYABCAAMAAEABAAAAAgAAQDiAAcAqgCcAIQAbABcACgAFAABAAQACQAHABMAHgAeAA8AFwAbAAMAIgAUAAgACAAFACAAIwAZABMABgAGACIAHAAeABIAHwANAAgAEwAgACAAFwAbABUAHwABAAQACgAFAA8AIQAfABMAAQAEAAQACQATABsAIQAkABAAHAAcABgAAQAEAAkACQAPABsAEgAfABEADwAdABMAAQAEAAUABAAcABoAEwADACQAFAAIAAMABQAPABIAFQATAAcABwAPABkADwAbABEAEwALAAkADwAeACQAEQAWAA8AHgAgAAEABwAQABYAGQAaAB0AHwAgAAEABAAAAAgAAQBmAAMARAAoAAwAAQAEAAIACwAdABkAHAAPABIAJAAUABcAGQATAAEABAAFAAsAHAAaABMAJAAUABcAGQAZABMAEgABAAQAAQAOAA8AGQATABsAEgAPAB4AJAAaABwAGwAgABYAAQADABEAFgAhAAEABAAAAAgAAQAqAAEACAABAAQADAAOABcAIAAbABMAHwAfACQAEQATABsAIAATAB4AAQABABQAAAAAAA4ArgADAAEECQAAAGABRgADAAEECQABAD4BCAADAAEECQACAA4A+gADAAEECQADAFAAqgADAAEECQAEAD4BCAADAAEECQAFABoAkAADAAEECQAGADoAVgADAAEECQEAAAgATgADAAEECQEBAAoARAADAAEECQECABgALAADAAEECQEDAAwAIAADAAEECQEHAAwAFAADAAEECQEKAAwACAADAAEECQELAAgAAAAyADQAcAB0AE4AbwByAG0AYQBsAE0AZQBkAGkAdQBtAFcAZQBpAGcAaAB0AE8AcAB0AGkAYwBhAGwAIABTAGkAegBlAEcAcgBhAGQAZQBGAGkAbABsAE0AYQB0AGUAcgBpAGEAbABTAHkAbQBiAG8AbABzAFIAbwB1AG4AZABlAGQALQBNAGUAZABpAHUAbQBW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) format('woff2');}

/* ⭐ ふりがなを出さない設定（sw_settings の furigana が false・_テーマ.js が <html class="sw-nofuri"> を付ける・2026/10/11）。
   ⭐ <ruby> の読み（<rt>）は全部ここで消す。<rt> でない読みの字は _app_v7.css（科目キャッチ・貸借TA） */
html.sw-nofuri rt{display:none;}
/* ⭐ 2026/10/26 プレイの札とはじめる前の画面のふりがな（_ui.js の addFuri）。読み（sw-rt）は漢字（sw-furi）の真上に重ね、横は漢字からはみ出してよい
      ＝<ruby> のように漢字の間を押し広げない（「プレイ　回数」と空いた）。上の余白は読みの高さだけ取る。色は周りの字と同じ（青いボタンの白い字の上でも読める）。
   ⭐ 大きさは 9〜11px（ふりがなの決まり 11px が上限・小さい字の上は 9px）。要素の名前が独自なのは、span などの決まりに当たらないため（_ui.js の注） */
sw-fw{display:inline;}
sw-furi{position:relative;display:inline-block;padding-top:calc(clamp(9px,.6em,11px) * 1.15);text-indent:0;}
sw-rt{position:absolute;left:50%;top:0;transform:translateX(-50%);font-size:clamp(9px,.6em,11px);line-height:1.15;font-weight:700;
  letter-spacing:0;white-space:nowrap;color:inherit;pointer-events:none;}
html.sw-nofuri sw-furi{padding-top:0;}
html.sw-nofuri sw-rt{display:none;}
/* ⭐ 語のまとまり。この中では折り返さず、まとまりの間で折り返す（2026/10/11 あゆむさん「文脈や単語の塊を認識した上でどこで改行するのが適切か判断した上で改行してほしい」）。
   ⛔ word-break:auto-phrase は iPhone の Safari で効かないので使わない */
.sw-ph{display:inline-block;}
.mi{font-family:'MSym';font-weight:normal;font-style:normal;font-size:1.15em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;vertical-align:-0.15em;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}

/* --- 一時停止のボタン（2026/09/17 あゆむさん「D揃える」→ 同日「アイコンを使用してほしい」）---
   ⛔ それまでは科目キャッチ・貸借TAの2本にしか無く、新4本には入口が無かった。
   ⭐ 置き場は各ゲームの header の右端。大きさは押せる最小（--tap-min）を満たす。
   ⚠️ 中身はアイコン1文字なので、幅は高さと同じにして正方形にする。 */
.btn-pause{background:var(--panel);color:var(--muted);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:0;font-size:17px;font-weight:700;
  font-family:inherit;cursor:pointer;min-height:var(--tap-min);width:var(--tap-min);
  flex:0 0 auto;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;}
.btn-pause:active{transform:scale(.97);}

/* --- 入口の確認（2026/09/29）---------------------------------------------
   ⭐ 学校コードが無い・知らないコードで開いたときの案内画面。仕組みは _入口.js。
   🔴 あゆむさん「アプリ自体が shiwakemaru.com で誰でも開けます　これってよくないよね？自社資産保全の面から」→「1〜3をやる」
   ⭐ html に sw-gated が付いたときだけ効く。⛔ _入口.js が読めなければ何も隠さない（今までどおり遊べる）。 */
html.sw-gated body > *:not(#sw-gate){display:none !important;}
/* ⭐ 案Bの2回目の後半（2026/10/05）：上に空と日と丘の絵＋正座のしわけまる・案内の文は QR コードの印と白い面に（見本 9-4 の割り当て・docs/UI設計/見た目の見本.md 10-2） */
#sw-gate{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0;padding:0 24px calc(env(safe-area-inset-bottom,0px) + 14px);text-align:center;background:var(--b-bg);color:var(--b-ink);font-family:var(--b-font-body);}
.sw-gate-hero{position:relative;flex:none;width:calc(100% + 48px);max-width:430px;height:330px;margin:0 -24px;overflow:hidden;border-radius:0 0 40px 40px;background:#CFE1FF;}
.sw-gate-sun{position:absolute;left:50%;top:70px;width:230px;height:230px;margin-left:-115px;border-radius:50%;background:#FFE9AE;}
.sw-gate-hill{position:absolute;left:-15%;right:-15%;bottom:-96px;height:150px;border-radius:50%;background:#A9C8FA;}
.sw-gate-hero .sw-ico-cloud{position:absolute;left:28px;top:40px;font-size:74px;color:#ffffff;opacity:.9;}
.sw-gate-hero .sw-ico-cloud + .sw-ico-cloud{left:auto;right:42px;top:86px;font-size:56px;}
:root[data-theme="dark"] .sw-gate-hero{background:#22305E;}
:root[data-theme="dark"] .sw-gate-sun{background:#3D4C86;}
:root[data-theme="dark"] .sw-gate-hill{background:#2B3A70;}
:root[data-theme="dark"] .sw-gate-hero .sw-ico-cloud{opacity:.25;}
.sw-gate-mascot{position:absolute;left:50%;bottom:14px;height:196px;transform:translateX(-50%);}
.sw-gate-brand{margin-top:20px;font-family:'ShiwakeBrush','Hiragino Mincho ProN','Yu Mincho',serif;font-size:var(--font-size-3xl);
  font-weight:400;letter-spacing:.04em;line-height:1.1;color:var(--b-ink);}
.sw-gate-card{display:flex;align-items:center;gap:12px;width:100%;max-width:382px;margin-top:18px;padding:16px;border-radius:24px;background:var(--b-paper);text-align:left;}
.sw-gate-qr{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px;background:var(--b-brand-t);color:var(--b-brand-tx);font-size:34px;}
.sw-gate-msg{margin:0;font-size:15px;font-weight:800;line-height:1.8;}
.sw-gate-en{margin:14px 0 0;font-size:13px;font-weight:500;line-height:1.6;color:var(--b-muted);max-width:26em;}
#sw-gate .sw-copy{margin-top:auto;padding-top:20px;}   /* 著作権の表示は画面の下に */

/* --- 著作権の表示（2026/09/29・ホームと入口の案内画面）--- */
.sw-copy{margin:18px 0 4px;font-size:var(--font-size-xs);color:var(--faint);text-align:center;line-height:1.6;}

/* --- 素材の印（2026/10/03）-------------------------------------------------
   ⭐ あゆむさん 2026/10/03「A素材決定」「Bも採用」。出どころは https://freegameui.net/ （CC0 1.0・クレジット不要）。
   ⭐ 素材は白一色の形 → mask にして background（currentColor）で塗る。⭐ 色は置いた場所の color を継ぐ（ナイトモードも変数のまま）。
   ⭐ 形（--sw-ico）は下の区画。⛔ 区画は手で直さない（tools/v7素材/素材の印をCSSに入れる.py が書く。元の SVG は 素材/freegameui/）。
   ⚠️ 名前は sw-ico——科目キャッチに別の .ico（スタンプ）があるので、ぶつけない。
   使い方：<span class="sw-ico sw-ico-flame" aria-hidden="true"></span>（大きさは font-size） */
.sw-ico{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.12em;background:currentColor;
  -webkit-mask:var(--sw-ico) center/contain no-repeat;mask:var(--sw-ico) center/contain no-repeat;}
/* ▼素材の印（tools/v7素材/素材の印をCSSに入れる.py が書く。⛔ 手で直さない） */
.sw-ico-rank-bronze{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M22 16 L106 16 L106 68 Q106 92 88 106 Q76 114 64 116 Q52 114 40 106 Q22 92 22 68 Z M64 22 L66.4 29.3 L74 29.3 L68 33.7 L70.4 41 L64 36.6 L57.6 41 L60 33.7 L54 29.3 L61.6 29.3 Z M44 52 L54 52 L54 92 L44 92 Z M59 52 L69 52 L69 92 L59 92 Z M74 52 L84 52 L84 92 L74 92 Z'/%3E%3C/svg%3E");}
.sw-ico-rank-silver{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M64 16 L105.6 40 L105.6 88 L64 112 L22.4 88 L22.4 40 Z M64 29 L94.3 46.5 L94.3 81.5 L64 99 L33.7 81.5 L33.7 46.5 Z'/%3E%3Cpath fill='white' d='M64 42 L69.3 56.7 L84.9 57.2 L72.6 66.8 L76.9 81.8 L64 73 L51.1 81.8 L55.4 66.8 L43.1 57.2 L58.7 56.7Z'/%3E%3C/svg%3E");}
.sw-ico-rank-gold{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M22 16 L106 16 L106 68 Q106 92 88 106 Q76 114 64 116 Q52 114 40 106 Q22 92 22 68 Z M40 44 L40 76 Q40 80 44 80 L84 80 Q88 80 88 76 L88 44 L76 56 L64 38 L52 56 Z'/%3E%3C/svg%3E");}
.sw-ico-rank-platinum{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M113.89 43.34 L84.66 14.11 L43.34 14.11 L14.11 43.34 L14.11 84.66 L43.34 113.89 L84.66 113.89 L113.89 84.66 Z M100.96 48.69 L79.31 27.04 L48.69 27.04 L27.04 48.69 L27.04 79.31 L48.69 100.96 L79.31 100.96 L100.96 79.31 Z'/%3E%3Cpath fill='white' d='M64 34 L89.98 79 L38.02 79 Z'/%3E%3Cpath fill='white' d='M64 94 L89.98 49 L38.02 49 Z'/%3E%3C/svg%3E");}
.sw-ico-rank-diamond{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M64 14 L96 40 L104 46 L64 100 L24 46 L32 40 Z M64 28 L84 44 L64 60 L44 44 Z'/%3E%3Crect x='57' y='98' width='14' height='12' fill='white'/%3E%3Crect x='46' y='106' width='36' height='12' rx='2' fill='white'/%3E%3C/svg%3E");}
.sw-ico-rank-master{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cg transform='translate(0,-3.5)'%3E%3Cpath d='M22.3,118C11.18,90.6,5.62,61.37,11.18,37.62l27.8,32.88,25.02-47.5,25.02,47.5,27.8-32.88c5.56,23.75,0,52.98-11.12,80.38H22.3Z' fill='white'/%3E%3Cpath d='M12,31c-4.42,0-8,3.58-8,8s3.58,8,8,8,8-3.58,8-8-3.58-8-8-8ZM64,17c-4.97,0-9,4.03-9,9s4.03,9,9,9h0c4.97,0,9-4.03,9-9s-4.03-9-9-9ZM116,30c-4.42,0-8,3.58-8,8s3.58,8,8,8,8-3.58,8-8-3.58-8-8-8Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");}
.sw-ico-flame{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' d='M64 10 C58 28 30 46 26 72 C22 96 40 118 64 118 C88 118 106 96 102 72 C98 46 70 28 64 10Z M64 64 C56 76 42 88 42 100 C42 112 52 118 64 118 C76 118 86 112 86 100 C86 88 72 76 64 64Z' fill='white'/%3E%3C/svg%3E");}
.sw-ico-sparkle{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256' fill='none'%3E%3Cpath d='M128,44 C128,98.56 135.44,106 190,106 C135.44,106 128,113.44 128,168 C128,113.44 120.56,106 66,106 C120.56,106 128,98.56 128,44 Z' fill='white'/%3E%3Cpath d='M66,160 C66,185.8 70.2,190 96,190 C70.2,190 66,194.2 66,220 C66,194.2 61.8,190 36,190 C61.8,190 66,185.8 66,160 Z' fill='white'/%3E%3Cpath d='M190,162 C190,182.64 193.36,186 214,186 C193.36,186 190,189.36 190,210 C190,189.36 186.64,186 166,186 C186.64,186 190,182.64 190,162 Z' fill='white'/%3E%3C/svg%3E");}
.sw-ico-bolt{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpolygon fill='white' points='82,4 24,58 52,58 20,124 104,70 76,70'/%3E%3C/svg%3E");}
.sw-ico-trophy{--sw-ico:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1' data-name='%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 128 128'%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: %23fff; %7D .st1 %7B fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st1' d='M32,10h64v6c0,32-8,46-18,56h-4v16h8v8h12v22h-60v-22h12v-8h8v-16h-4c-10-10-18-24-18-56v-6ZM46,24h36c0,18-4,30-10,38h-16c-6-8-10-20-10-38Z'/%3E%3Cpath class='st0' d='M96,14h0c4,0,7,1,14,8,6,7,7,18,1,26-4,6-14.92,9.58-21.92,6.58l2-5c13,2,17.92-12.58,16.92-16.58-2-12-12.04-13.02-12.04-13.02l.04-5.98Z'/%3E%3Cpath class='st0' d='M32,14h0c-4,0-7,1-14,8-6,7-7,18-1,26,4,6,15.33,9.42,22.33,6.42l-2-5c-13,2-18.33-12.42-17.33-16.42,2-12,12.04-13,12.04-13l-.04-6Z'/%3E%3C/svg%3E");}
.sw-ico-heart{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill='white' d='M64 113 C61 111 11 75 11 45 C11 27 25 14 43 14 C53 14 61 20 64 27 C67 20 75 14 85 14 C103 14 117 27 117 45 C117 75 67 111 64 113Z'/%3E%3C/svg%3E");}
.sw-ico-heart-broken{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath d='M64 118 C58 108 10 72 10 42 C10 20 26 10 44 10 C54 10 60 16 64 26 L56 44 L70 62 L54 82 L64 118Z' fill='white'/%3E%3Cpath d='M64 26 C68 16 74 10 84 10 C102 10 118 20 118 42 C118 72 70 108 64 118 L62 82 L78 62 L64 44 L64 26Z' fill='white'/%3E%3C/svg%3E");}
.sw-ico-fire{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill='white' d=' M 46 118 C 37 103 40 94 46 86 C 52 77 54 69 54 69 C 54 69 58 75 57 85 C 65 75 66 60 65 54 C 84 68 92 97 81 118 C 141 84 98 32 90 26 C 91 36 91 45 86 50 C 80 14 58 8 58 8 C 60 26 47 45 36 59 C 35 53 35 48 31 41 C 30 54 21 63 18 76 C 15 93 21 105 46 118 Z '/%3E%3C/svg%3E");}
.sw-ico-timer{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M 64,24 A 46,46 0 1,0 64,116 A 46,46 0 1,0 64,24 Z M 64,35 A 35,35 0 1,1 64,105 A 35,35 0 1,1 64,35 Z'/%3E%3Crect x='56' y='10' width='16' height='16' rx='3' fill='white'/%3E%3Cpath fill='white' d='M 61,67 L 67,73 L 88,52 L 82,46 Z'/%3E%3Ccircle cx='64' cy='70' r='5' fill='white'/%3E%3C/svg%3E");}
.sw-ico-ring{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Ccircle cx='64' cy='64' r='50' stroke='white' stroke-width='14' fill='none'/%3E%3C/svg%3E");}   /* ⭐ 2026/11/05 線を細く（あゆむさん「もう少しサイズ小さく、線ほそく」）。〔11/05 の昼〕太さ 24・外の半径 60 */
.sw-ico-cross{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath d='M27 27 L101 101 M101 27 L27 101' stroke='white' stroke-width='14' stroke-linecap='round'/%3E%3C/svg%3E");}   /* ⭐ 2026/11/05 線を細く（丸と同じ太さ 14）。〔11/05 の昼〕太さ 20 の角ばったバツ */
.sw-ico-hourglass{--sw-ico:url("data:image/svg+xml,%3Csvg viewBox='-32 -32 64 64' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs/%3E%3Cg%3E%3Cpath stroke='none' fill='%23FFFFFF' d='M-11.8 -0.65 Q-17.65 -7.6 -18 -18 -18 -18.45 -18.3 -18.7 -18.6 -19 -19 -19 L-20.1 -19 -20.7 -19.25 -21 -20 -21 -26 -20.7 -26.65 -20.65 -26.7 -20 -27 20 -27 20.75 -26.7 21 -26 21 -20 20.8 -19.25 20.75 -19.2 20.1 -19 19 -19 Q18.6 -19 18.3 -18.7 18 -18.45 18 -18 17.65 -7.6 11.85 -0.65 L11.6 0 11.85 0.65 Q17.65 7.6 18 18.05 18 18.45 18.3 18.75 L19 19 20.1 19 20.75 19.3 21 20 21 26 20.8 26.75 20.75 26.8 20 27 -20 27 -20.7 26.75 -21 26 -21 20 -20.7 19.35 -20.65 19.3 Q-20.45 19 -20.1 19 L-19 19 -18.3 18.75 Q-18 18.45 -18 18.05 -17.65 7.6 -11.8 0.65 L-11.6 0 -11.8 -0.65 M4.15 -0.8 Q4.35 -1.65 5 -2.15 L5.2 -2.4 Q11.6 -8.3 12 -17.95 L11.9 -18.45 11.5 -18.85 11 -19 -10.95 -19 -11.45 -18.85 -11.8 -18.45 -11.95 -17.95 Q-11.6 -8.2 -5.05 -2.3 L-5 -2.25 -4.95 -2.2 Q-4.35 -1.65 -4.1 -0.8 L-4 0 -4.1 0.85 -4.15 1.05 -4.8 2.1 -5 2.25 Q-11.6 8.15 -11.95 18 L-11.8 18.5 -11.45 18.85 -10.95 19 11 19 11.5 18.85 11.9 18.5 12 17.95 Q11.6 8.15 5.05 2.25 4.4 1.7 4.15 1.05 L4.15 0.85 4 0 Q4 -0.4 4.15 -0.8 M-4 -10 L4 -10 Q4.85 -10 5.45 -9.4 6 -8.85 6 -8 6 -7.15 5.45 -6.55 L1.45 -2.55 Q0.85 -2 0 -2 -0.85 -2 -1.4 -2.55 L-5.4 -6.55 Q-6 -7.15 -6 -8 -6 -8.85 -5.4 -9.4 -4.85 -10 -4 -10 M-8.6 16 Q-7.6 9.85 -3.6 5.7 L-3.25 5.4 Q-2.2 4.3 -1.65 3 L1.65 3 Q2.2 4.3 3.3 5.4 L3.35 5.4 3.35 5.45 Q7.6 9.6 8.65 16 L-8.6 16'/%3E%3C/g%3E%3C/svg%3E");}
.sw-ico-coin{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' d='M 10 64 A 54 54 0 1 0 118 64 A 54 54 0 1 0 10 64 Z M 18 64 A 46 46 0 1 0 110 64 A 46 46 0 1 0 18 64 Z' fill='white'/%3E%3Cpolygon points='36,32 48,32 70,62 58,62' fill='white'/%3E%3Cpolygon points='92,32 80,32 58,62 70,62' fill='white'/%3E%3Crect x='58' y='58' width='12' height='38' fill='white'/%3E%3Crect x='40' y='62' width='48' height='10' fill='white'/%3E%3Crect x='40' y='78' width='48' height='10' fill='white'/%3E%3C/svg%3E");}
.sw-ico-receipt{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cg transform='translate(0,7)'%3E%3Cpath fill-rule='evenodd' d='M28 10 L100 10 L100 104 L92 96 L84 104 L76 96 L68 104 L60 96 L52 104 L44 96 L36 104 L28 96 Z M40 30 L88 30 L88 38 L40 38 Z M40 48 L78 48 L78 56 L40 56 Z M40 66 L70 66 L70 74 L40 74 Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");}
.sw-ico-calc{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d=' M22 14 C22 10.686 24.686 8 28 8 L100 8 C103.314 8 106 10.686 106 14 L106 114 C106 117.314 103.314 120 100 120 L28 120 C24.686 120 22 117.314 22 114 Z M30 18 L98 18 L98 42 L30 42 Z M30 52 L46 52 L46 64 L30 64 Z M56 52 L72 52 L72 64 L56 64 Z M82 52 L98 52 L98 64 L82 64 Z M30 68 L46 68 L46 80 L30 80 Z M56 68 L72 68 L72 80 L56 80 Z M82 68 L98 68 L98 80 L82 80 Z M30 84 L46 84 L46 96 L30 96 Z M56 84 L72 84 L72 96 L56 96 Z M82 84 L98 84 L98 96 L82 96 Z M30 100 L46 100 L46 112 L30 112 Z M56 100 L72 100 L72 112 L56 112 Z M82 100 L98 100 L98 112 L82 112 Z '/%3E%3C/svg%3E");}
.sw-ico-scale{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath d='M59 18L69 18L69 26L96 26L96 34L32 34L32 26L59 26Z M59 26L69 26L69 96L84 96L84 104L44 104L44 96L59 96Z' fill='white'/%3E%3Cpath d='M32 34L14 66C14 81 22 91 32 91C42 91 50 81 50 66L32 34Z M32 34L23 63C23 77 27 83 32 83C37 83 41 77 41 63L32 34Z' fill-rule='evenodd' fill='white'/%3E%3Cpath d='M96 34L78 66C78 81 86 91 96 91C106 91 114 81 114 66L96 34Z M96 34L87 63C87 77 91 83 96 83C101 83 105 77 105 63L96 34Z' fill-rule='evenodd' fill='white'/%3E%3C/svg%3E");}
.sw-ico-grid{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Crect x='10' y='10' width='32' height='32' fill='white'/%3E%3Crect x='48' y='10' width='32' height='32' fill='white'/%3E%3Crect x='86' y='10' width='32' height='32' fill='white'/%3E%3Crect x='10' y='48' width='32' height='32' fill='white'/%3E%3Crect x='48' y='48' width='32' height='32' fill='white'/%3E%3Crect x='86' y='48' width='32' height='32' fill='white'/%3E%3Crect x='10' y='86' width='32' height='32' fill='white'/%3E%3Crect x='48' y='86' width='32' height='32' fill='white'/%3E%3Crect x='86' y='86' width='32' height='32' fill='white'/%3E%3C/svg%3E");}
.sw-ico-book{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d=' M 10 22 Q 24 14 40 14 Q 56 14 64 26 Q 72 14 88 14 Q 104 14 118 22 L 118 106 Q 104 100 88 100 Q 72 100 64 110 Q 56 100 40 100 Q 24 100 10 106 Z M 62 30 L 66 30 L 66 106 L 62 106 Z '/%3E%3C/svg%3E");}
.sw-ico-shield{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill='white' d='M20,12 L108,12 L108,68 Q108,96 64,120 Q20,96 20,68 Z'/%3E%3C/svg%3E");}
.sw-ico-card{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M18 22 Q10 22 10 30 L10 98 Q10 106 18 106 L110 106 Q118 106 118 98 L118 30 Q118 22 110 22 Z M21 33 Q18 33 18 36 L18 92 Q18 95 21 95 L107 95 Q110 95 110 92 L110 36 Q110 33 107 33 Z' /%3E%3Cpath fill-rule='evenodd' fill='white' d='M25 64 A18 18 0 1 1 61 64 A18 18 0 1 1 25 64 Z M33 64 A10 10 0 1 1 53 64 A10 10 0 1 1 33 64 Z' /%3E%3Crect x='71' y='53' width='36' height='10' rx='5' fill='white'/%3E%3Crect x='71' y='71' width='24' height='10' rx='5' fill='white'/%3E%3C/svg%3E");}
.sw-ico-qr{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M10 10 H58 V58 H10 Z M18 18 H50 V50 H18 Z M26 26 H42 V42 H26 Z'/%3E%3Cpath fill-rule='evenodd' fill='white' d='M70 10 H118 V58 H70 Z M78 18 H110 V50 H78 Z M86 26 H102 V42 H86 Z'/%3E%3Cpath fill-rule='evenodd' fill='white' d='M10 70 H58 V118 H10 Z M18 78 H50 V110 H18 Z M26 86 H42 V102 H26 Z'/%3E%3Cpath fill='white' d='M70 70h8v8h-8Z M78 70h8v8h-8Z M94 70h8v8h-8Z M110 70h8v8h-8Z M86 78h8v8h-8Z M102 78h8v8h-8Z M110 78h8v8h-8Z M70 86h8v8h-8Z M86 86h8v8h-8Z M94 86h8v8h-8Z M78 94h8v8h-8Z M102 94h8v8h-8Z M110 94h8v8h-8Z M70 102h8v8h-8Z M78 102h8v8h-8Z M94 102h8v8h-8Z M86 110h8v8h-8Z M94 110h8v8h-8Z M102 110h8v8h-8Z'/%3E%3C/svg%3E");}
.sw-ico-cloud{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath d='M28 100 C28 100 14 96 10 86 C6 76 12 64 24 62 C22 54 26 44 36 42 C42 34 54 32 64 40 C70 30 82 26 94 32 C104 38 108 50 104 60 C112 60 122 68 122 80 C122 92 112 100 100 100 Z' fill='white'/%3E%3C/svg%3E");}
.sw-ico-puff{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256' fill='none'%3E%3Cpath d='M78,128A50,50 0 1,0 178,128A50,50 0 1,0 78,128ZM101.05,62.73A25.13,25.13 0 1,0 151.31,62.73A25.13,25.13 0 1,0 101.05,62.73ZM145.21,80.31A23.88,23.88 0 1,0 192.96,80.31A23.88,23.88 0 1,0 145.21,80.31ZM160.31,116.34A27.38,27.38 0 1,0 215.06,116.34A27.38,27.38 0 1,0 160.31,116.34ZM158.89,139.75A27.49,27.49 0 1,0 213.88,139.75A27.49,27.49 0 1,0 158.89,139.75ZM132.4,177.66A26.49,26.49 0 1,0 185.38,177.66A26.49,26.49 0 1,0 132.4,177.66ZM104.71,190.79A27.01,27.01 0 1,0 158.74,190.79A27.01,27.01 0 1,0 104.71,190.79ZM61.92,177.35A24,24 0 1,0 109.92,177.35A24,24 0 1,0 61.92,177.35ZM44.28,155.37A24.98,24.98 0 1,0 94.24,155.37A24.98,24.98 0 1,0 44.28,155.37ZM42.06,116.11A24.49,24.49 0 1,0 91.04,116.11A24.49,24.49 0 1,0 42.06,116.11ZM60.91,84.34A28.21,28.21 0 1,0 117.33,84.34A28.21,28.21 0 1,0 60.91,84.34Z' fill='white'/%3E%3C/svg%3E");}
.sw-ico-star{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-231 311-129q-18 11-37 9.5T241-132q-14-11-21.5-28t-2.5-37l45-192-150-130q-16-14-20-32t1-35q5-17 19.5-29t35.5-14l197-17 77-182q8-20 24-29t34-9q18 0 34 9t24 29l77 182 197 17q21 2 35.5 14t19.5 29q5 17 1 35t-20 32L698-389l45 192q5 20-2.5 37T719-132q-14 11-33 12.5t-37-9.5L480-231Z'/%3E%3C/svg%3E");}
.sw-ico-swirl{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath d='M64.0 61.0 L64.3 60.7 L64.6 60.4 L65.0 60.2 L65.5 60.0 L65.9 59.9 L66.4 59.8 L67.0 59.7 L67.5 59.8 L68.1 59.9 L68.7 60.0 L69.3 60.3 L69.9 60.6 L70.4 61.0 L71.0 61.5 L71.5 62.0 L71.9 62.6 L72.3 63.3 L72.7 64.0 L72.9 64.8 L73.2 65.6 L73.3 66.5 L73.3 67.4 L73.3 68.3 L73.1 69.3 L72.9 70.2 L72.6 71.2 L72.1 72.1 L71.6 73.1 L71.0 73.9 L70.2 74.8 L69.4 75.6 L68.5 76.3 L67.5 76.9 L66.4 77.5 L65.2 78.0 L64.0 78.3 L62.7 78.6 L61.4 78.7 L60.0 78.8 L58.7 78.7 L57.3 78.4 L55.9 78.0 L54.5 77.5 L53.2 76.9 L51.9 76.1 L50.6 75.2 L49.4 74.2 L48.3 73.1 L47.3 71.8 L46.4 70.4 L45.6 68.9 L44.9 67.4 L44.4 65.7 L44.0 64.0 L43.8 62.2 L43.7 60.4 L43.8 58.6 L44.0 56.7 L44.4 54.9 L45.0 53.1 L45.8 51.3 L46.7 49.5 L47.9 47.9 L49.1 46.3 L50.5 44.8 L52.1 43.4 L53.8 42.2 L55.7 41.1 L57.6 40.1 L59.7 39.3 L61.8 38.7 L64.0 38.3 L66.3 38.1 L68.6 38.1 L70.9 38.3 L73.2 38.7 L75.5 39.3 L77.8 40.1 L80.0 41.2 L82.1 42.4 L84.2 43.8 L86.1 45.5 L87.9 47.3 L89.5 49.3 L91.0 51.4 L92.3 53.7 L93.4 56.1 L94.2 58.7 L94.9 61.3 L95.3 64.0 L95.5 66.8 L95.5 69.6 L95.2 72.4 L94.6 75.1 L93.8 77.9 L92.8 80.6 L91.5 83.2 L89.9 85.8 L88.2 88.2 L86.2 90.4 L84.0 92.5 L81.6 94.4 L79.0 96.1 L76.2 97.6 L73.3 98.8 L70.3 99.8 L67.2 100.5 L64.0 101.0 L60.7 101.2 L57.5 101.1 L54.2 100.7 L50.9 100.0 L47.7 99.0 L44.6 97.7 L41.5 96.1 L38.6 94.3 L35.8 92.2 L33.2 89.8 L30.9 87.2 L28.7 84.4 L26.8 81.4 L25.1 78.2 L23.7 74.8 L22.6 71.3 L21.8 67.7 L21.3 64.0 L21.2 60.3 L21.4 56.5 L21.9 52.7 L22.7 49.0 L23.9 45.3 L25.4 41.7 L27.2 38.3 L29.4 35.0 L31.8 31.8 L34.6 28.9 L37.5 26.2 L40.8 23.8 L44.2 21.6 L47.9 19.8 L51.7 18.2 L55.7 17.0 L59.8 16.2 L64.0 15.7 L68.2 15.5 L72.5 15.8 L76.8 16.4 L81.0 17.4 L85.1 18.8 L89.1 20.5 L93.0 22.6 L96.7 25.0 L100.2 27.8 L103.4 30.9 L106.4 34.3 L109.1 37.9 L111.5 41.8 L113.6 46.0 L115.2 50.3 L116.6 54.7 L117.5 59.3 L118.0 64.0' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");}
.sw-ico-g-ta{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M71.87-111.87v-91H434.5V-645.8q-25.04-9.48-43.33-27.88-18.28-18.41-27.76-43.45H245.74l117.13 273.54q0 52.69-42.58 89.58-42.59 36.88-102.83 36.88-60.24 0-102.92-36.88-42.67-36.89-42.67-89.58l117.37-273.54h-77.37v-91h251.54q13.2-35.48 44.94-57.74 31.74-22.26 71.67-22.26 39.94 0 71.65 22.26 31.72 22.26 44.92 57.74h251.54v91h-77.37l117.37 273.54q0 52.69-42.58 89.58-42.59 36.88-102.83 36.88-60.24 0-102.92-36.88-42.67-36.89-42.67-89.58l117.13-273.54H596.59q-9.48 25.04-27.76 43.45-18.29 18.4-43.33 27.88v442.93h362.63v91H71.87Zm599.35-334.35h142.82l-71.41-165.63-71.41 165.63Zm-525.02 0h142.82l-71.65-165.63-71.17 165.63ZM480.07-724.3q16.21 0 27.11-11.15 10.91-11.14 10.91-27.28 0-16.15-10.92-27.07-10.93-10.92-27.07-10.92t-27.17 10.92q-11.02 10.92-11.02 27.07 0 16.14 10.97 27.28 10.97 11.15 27.19 11.15Z'/%3E%3C/svg%3E");}
.sw-ico-g-catch{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='m609.67-364.41 47.2-170.55L510.8-635.59l-47.19 170.55 146.06 100.63Zm-457.8 160.04-33.24-15.52q-31-13-41.88-44.58-10.88-31.58 3.12-62.66l72-156v278.76Zm160.12 87.24q-33.12 0-56.62-23.93t-23.5-56.83v-239.24l106.77 294q2.99 7 5.23 13.5t7.24 12.5h-39.12Zm218.79-.94q-35.54 12.68-70.25-3.11-34.7-15.8-47.38-51.34l-175.8-484.46q-12.68-35.54 3.24-69.87 15.91-34.32 51.45-47l296.22-108.32q35.54-12.68 69.87 3.24 34.33 15.91 47 51.45l176.33 484.22q12.67 35.54-3.12 69.87-15.8 34.32-51.34 47L530.78-118.07Zm-31.58-85.52 296.5-108.32-176.85-484.5-295.74 108.32 176.09 484.5ZM559.52-500Z'/%3E%3C/svg%3E");}
.sw-ico-g-box{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M202.87-111.87q-37.78 0-64.39-26.61t-26.61-64.39v-554.26q0-37.78 26.61-64.39t64.39-26.61h554.26q37.78 0 64.39 26.61t26.61 64.39v554.26q0 37.78-26.61 64.39t-64.39 26.61H202.87Zm0-91H440v-554.26H202.87v554.26Zm317.13 0h237.13V-480H520v277.13ZM520-560h237.13v-197.13H520V-560Z'/%3E%3C/svg%3E");}
.sw-ico-g-jr{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M151.87-382.3v-91h294.59v91H151.87Zm0-167.42v-91h451v91h-451Zm0-167.41v-91h451v91h-451Zm366.7 565.26v-129.7L741-503q9.72-9.76 21.59-14.1 11.88-4.33 23.76-4.33 12.95 0 24.8 4.85Q823-511.72 832.7-502l37 37q8.67 9.72 13.55 21.59 4.88 11.88 4.88 23.76 0 12.19-4.36 24.41T869.7-373.3L648.26-151.87H518.57Zm304.78-267.78-37-37 37 37Zm-240 203h38L741.39-337.7l-18-19-19-18-121.04 120.05v38ZM723.39-356.7l-19-18 37 37-18-19Z'/%3E%3C/svg%3E");}
.sw-ico-g-ws{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M111.87-202.87v-554.26q0-37.78 26.61-64.39t64.39-26.61h554.26q37.78 0 64.39 26.61t26.61 64.39v554.26q0 37.78-26.61 64.39t-64.39 26.61H202.87q-37.78 0-64.39-26.61t-26.61-64.39Zm91-401.2h554.26v-153.06H202.87v153.06Zm211.09 200.72h132.08v-120.72H413.96v120.72Zm0 200.48h132.08v-120.48H413.96v120.48ZM202.87-403.35h131.09v-120.72H202.87v120.72Zm423.17 0h131.09v-120.72H626.04v120.72ZM202.87-202.87h131.09v-120.48H202.87v120.48Zm423.17 0h131.09v-120.48H626.04v120.48Z'/%3E%3C/svg%3E");}
.sw-ico-g-vs{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M758.89-92.89 645.96-205.07l-88 88-26.33-26.32q-26.35-26.35-26.35-64.65 0-38.31 26.35-64.66L691.3-432.37q26.35-26.35 64.66-26.35 38.3 0 64.65 26.35l26.32 26.33-88 88 112.18 112.93q13.67 13.68 13.67 32.07t-13.67 32.06l-48.09 48.09q-13.67 13.67-32.06 13.67t-32.07-13.67ZM885.5-721.61 430.54-266.89l3.81 3.04q21.32 25.87 19.77 60.95-1.55 35.07-25.99 59.51l-26.33 26.32-88-88L200.87-92.89Q187.2-79.22 168.8-79.22q-18.39 0-32.06-13.67l-48.09-48.09q-13.67-13.67-13.67-32.06t13.67-32.07l112.18-112.93-88-88 26.32-26.33q24.44-24.43 59.63-25.99 35.2-1.55 61.07 20.01l3.04 3.81L717.61-889.5H885.5v167.89ZM335.67-585.63l21.61-20.85 20.85-21.61-20.85 21.61-21.61 20.85Zm-62.45 62.98L74.5-721.61V-889.5h167.89l198.96 199.2-63.22 62.21-172.56-172.8h-42.46v42.46l172.56 172.8-62.45 62.98Zm96.54 191.58 427.13-427.36v-42.46h-42.46L327.07-373.76l42.69 42.69Zm0 0-21.61-21.08-21.08-21.61 21.08 21.61 21.61 21.08Z'/%3E%3C/svg%3E");}
.mk.ok{--sw-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill-rule='evenodd' fill='white' d='M4,64 a60,60 0 1 0 120,0 a60,60 0 1 0 -120,0 M28,64 a36,36 0 1 1 72,0 a36,36 0 1 1 -72,0'/%3E%3C/svg%3E");}
.mk.ng{--sw-mk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpolygon fill='white' points='99.355,14.503 113.497,28.645 78.142,64 113.497,99.355 99.355,113.497 64,78.142 28.645,113.497 14.503,99.355 49.858,64 14.503,28.645 28.645,14.503 64,49.858'/%3E%3C/svg%3E");}
#mult .k{--sw-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpolygon fill='white' points='82,4 24,58 52,58 20,124 104,70 76,70'/%3E%3C/svg%3E");}
.statusbar .stat:last-child .k{--sw-k:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1' data-name='%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 128 128'%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: %23fff; %7D .st1 %7B fill-rule: evenodd; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st1' d='M32,10h64v6c0,32-8,46-18,56h-4v16h8v8h12v22h-60v-22h12v-8h8v-16h-4c-10-10-18-24-18-56v-6ZM46,24h36c0,18-4,30-10,38h-16c-6-8-10-20-10-38Z'/%3E%3Cpath class='st0' d='M96,14h0c4,0,7,1,14,8,6,7,7,18,1,26-4,6-14.92,9.58-21.92,6.58l2-5c13,2,17.92-12.58,16.92-16.58-2-12-12.04-13.02-12.04-13.02l.04-5.98Z'/%3E%3Cpath class='st0' d='M32,14h0c-4,0-7,1-14,8-6,7-7,18-1,26,4,6,15.33,9.42,22.33,6.42l-2-5c-13,2-18.33-12.42-17.33-16.42,2-12,12.04-13,12.04-13l-.04-6Z'/%3E%3C/svg%3E");}
#q_screen .chip b[data-aid="streak"]{--sw-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill='white' d=' M 46 118 C 37 103 40 94 46 86 C 52 77 54 69 54 69 C 54 69 58 75 57 85 C 65 75 66 60 65 54 C 84 68 92 97 81 118 C 141 84 98 32 90 26 C 91 36 91 45 86 50 C 80 14 58 8 58 8 C 60 26 47 45 36 59 C 35 53 35 48 31 41 C 30 54 21 63 18 76 C 15 93 21 105 46 118 Z '/%3E%3C/svg%3E");}
#combo{--sw-k:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128' fill='none'%3E%3Cpath fill='white' d=' M 46 118 C 37 103 40 94 46 86 C 52 77 54 69 54 69 C 54 69 58 75 57 85 C 65 75 66 60 65 54 C 84 68 92 97 81 118 C 141 84 98 32 90 26 C 91 36 91 45 86 50 C 80 14 58 8 58 8 C 60 26 47 45 36 59 C 35 53 35 48 31 41 C 30 54 21 63 18 76 C 15 93 21 105 46 118 Z '/%3E%3C/svg%3E");}
:root{--sw-i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M286-254v-452q0-28 19-45.5t44-17.5q8 0 17 2t17 7l356 227q14 9 21.5 23.5T768-480q0 15-7.5 29.5T739-427L383-200q-8 5-17 7t-17 2q-25 0-44-17.5T286-254Z'/%3E%3C/svg%3E");--sw-i-replay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M326-71q-72-31-125.5-84.5T116-281q-31-72-31-153 0-26 18.5-44.5T148-497q26 0 44.5 18.5T211-434q0 112 78.5 190T480-166q112 0 190.5-78.5T749-435q0-112-79-190t-191-78h-7l21 21q14 14 14 33.5T493-615q-14 14-34.5 14T424-615L318-721q-19-19-19-45t19-45l106-106q14-14 34.5-14t34.5 15q14 14 13.5 34T492-848l-19 19h6q82 0 154 31t126 84.5q54 53.5 85 125T875-435q0 82-31 154t-84.5 125.5Q706-102 634-71T480-40q-82 0-154-31Z'/%3E%3C/svg%3E");--sw-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M126-212v-342q0-30 13-56.5t37-44.5l228-171q34-26 76-26t76 26l228 171q24 18 37 44.5t13 56.5v342q0 53-36.5 89.5T708-86h-77q-26 0-44.5-18.5T568-149v-196q0-26-18.5-44.5T505-408h-50q-26 0-44.5 18.5T392-345v196q0 26-18.5 44.5T329-86h-77q-53 0-89.5-36.5T126-212Z'/%3E%3C/svg%3E");--sw-i-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M520-241q44-21 88.5-31.5T700-283q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-67.5 127.5Q437-117 425-125q-38-22-79.69-35-41.68-13-85.31-13-38.59 0-75.79 11.5Q147-150 112-132q-35 18-69-1.66T9-191v-481q0-25 11-46.2 11-21.2 33-31.8 48-23 99-33.5T256.89-794q60.11 0 116.61 15T480-731q51-32 107-47.5T703.11-794Q757-794 808-783.5t99 33.5q22 10.6 33 31.8 11 21.2 11 46.2v496q0 34-33.5 48.5T848-132q-35-18-72.21-29.5Q738.59-173 700-173q-43 0-82.5 13.5T541-125q-12 8-27.5 11.5T483-110q-15 0-30.5-3.5ZM560-574q0-8.04 5.5-16.52T579-602q29-10 59-15.5t62-5.5q20 0 39.5 2.57t38.5 6.67q9 2.06 15.5 10.27 6.5 8.22 6.5 18.49 0 17-11 24.5t-28 3.5q-15-3-29.5-4.5T700-563q-26 0-50 4.5T603-546q-18.88 7-30.94-1.17Q560-555.33 560-574Zm0 220q0-8.04 5.5-16.52T579-382q29-10 59-15.5t62-5.5q20 0 39.5 2.57t38.5 6.67q9 2.06 15.5 10.27 6.5 8.22 6.5 18.49 0 17-11 24.5t-28 3.5q-15-3-29.5-4.5T700-343q-26 0-50 4t-47 12q-18.88 7-30.94-.65Q560-335.31 560-354Zm0-110q0-8.04 5.5-16.52T579-492q29-10 59-15.5t62-5.5q20 0 39.5 2.57t38.5 6.67q9 2.06 15.5 10.27 6.5 8.22 6.5 18.49 0 17-11 24.5t-28 3.5q-15-3-29.5-4.5T700-453q-26 0-50 4.5T603-436q-18.88 7-30.94-1.17Q560-445.33 560-464Z'/%3E%3C/svg%3E");--sw-i-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m368-417 157 157q19 19 19 45t-19 45q-19 18-45 18t-45-19L171-435q-9-9-14-21t-5-24q0-12 5-24t14-21l265-265q19-19 44.5-19t44.5 19q19 19 19 45t-19 45L368-543h403q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H368Z'/%3E%3C/svg%3E");--sw-i-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M592-417H189q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h403L435-700q-19-19-19-45t19-45q19-18 45-18t45 19l264 264q9 9 14 21t5 24q0 12-5 24t-14 21L524-170q-19 19-44.5 19T435-170q-19-19-19-45t19-45l157-157Z'/%3E%3C/svg%3E");}
/* ▲素材の印 */
/* ⭐ 2026/10/11 はじめる前の左上の「もどる」の矢印（Material Symbols Rounded の arrow_back＝tools/UI見本/icons/arrow_back.svg）。
   あゆむさん「家ではなく、戻るのアイコンで一つ前の画面に戻れるようにしたい」。⛔ 部分書体 MSym には矢印が無いので、印（mask）で描く */
.btn-back .sw-ico-back{font-size:1.15em;}
/* ⭐ 2026/10/11 こたえの検索欄の虫眼鏡（Material Symbols Rounded・塗り・太さ700 の search） */
.sw-ico-search{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='M372-297q-118 0-200.5-82.5T89-580q0-118 82.5-200.5T372-863q118 0 200.5 82.5T655-580q0 46-12 83.5T611-431l216 217q18 19 18 44.5T826-126q-18 18-44 18t-44-18L523-341q-29 20-67.5 32T372-297Zm0-126q66 0 111.5-45.5T529-580q0-66-45.5-111.5T372-737q-66 0-111.5 45.5T215-580q0 66 45.5 111.5T372-423Z'/%3E%3C/svg%3E");}   /* ⭐ 家の印（.mi は 1.15em）と同じ大きさ */
.sw-ico-back{--sw-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='white' d='m368-417 157 157q19 19 19 45t-19 45q-19 18-45 18t-45-19L171-435q-9-9-14-21t-5-24q0-12 5-24t14-21l265-265q19-19 44.5-19t44.5 19q19 19 19 45t-19 45L368-543h403q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H368Z'/%3E%3C/svg%3E");}

/* --- お祝いの画面（新記録・全問正解・ランクアップ）（2026/10/03・_新記録.js）---------------------
   ⭐ あゆむさん 2026/10/03「Cも採用。新記録の時はで全てのゲームに適用したいな。新しくおまかせでUI作成でやりたい」
      →（同日）「「全問正解」「ランクが上がった」ときの印も足します、他のアニメーションでもいいかも」。
   ⭐ 新記録・全問正解は6ゲームの結果画面の上に、ランクアップはホームの上に重ねる1枚（ゲームの中の画面は触らない）。
   ⭐ 3つで動きを変える：新記録＝扇子のしわけまる＋金の光が回る／全問正解＝きらきらのしわけまる＋緑の丸が描かれる（〔10/03〜11/07〕グッド）／
      ランクアップ＝万歳のしわけまる＋新しい段の色の光＋段の札が飛び出して光が走る。
   ⭐ 色が分けるもの：金（--kin）＝新記録／緑（--ok）＝正解（アプリ全体で正解の色）／段の色（_ランク.js の ZONES）＝ランク。それ以外は変数の墨と紙。
   ⚠️ 名前は全部 sw-rec で始める（科目キャッチ・貸借TA の CSS とぶつけない）。⚠️ 重なり順 1000（ゲームの中の最大は 120）。
   ⭐ 動きは下の変数の1か所で持つ——動きを減らす設定の端末では、変数だけを「動かない」値に替える。
      ⛔ クラスを @media の中で書き直さない（check.sh ⑬：同じクラスを2つの規則で書くと、片方だけ直して食い違う）。 */
:root{--sw-rec-fade:sw-rec-fade .2s ease both;--sw-rec-pop:sw-rec-pop .42s cubic-bezier(.2,1.35,.4,1) both;
  --sw-rec-spin:sw-rec-spin 28s linear infinite;--sw-rec-frames:sw-rec-frames .96s steps(3) infinite;--sw-rec-frame:0 0;
  --sw-rec-draw:sw-rec-draw .8s .15s ease-out forwards;--sw-rec-ring-off:340;
  --sw-rec-chip:sw-rec-chip .5s .35s cubic-bezier(.2,1.5,.4,1) both;--sw-rec-shine:sw-rec-shine 2.4s 1s ease-in-out infinite;}
/* ⭐ 動きを減らす設定の端末では、回さず・はねず・描かず・しわけまるは2コマ目で止める（丸は描き終えた形） */
@media (prefers-reduced-motion:reduce){
  :root{--sw-rec-fade:none;--sw-rec-pop:none;--sw-rec-spin:none;--sw-rec-frames:none;--sw-rec-frame:50% 0;
    --sw-rec-draw:none;--sw-rec-ring-off:0;--sw-rec-chip:none;--sw-rec-shine:none;}
}
/* ⭐ カードが画面より高いとき（横向きの 667×375・ミッション達成で絵と点数が両方のる回）は、下地ごとスクロールし、
   カードは margin:auto で、収まるときは真ん中（2026/10/04 クラウドの監査 #7 で、ミッション達成だけだったのを全部に）。
   ⛔ align-items:center のままだと、はみ出した上下が切れて「とじる」が押せない */
.sw-rec{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:20px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:rgba(29,26,21,.55);font-family:var(--font-sans);animation:var(--sw-rec-fade);}
/* ⭐ 夜の下地は、案Bの2回目の後半（2026/10/05）から4つとも下の「お祝い」の節が持つ（〔〜10/05〕ここで半透明の黒。残すと、後ろの結果が透けて見えた） */
.sw-rec *{box-sizing:border-box;}
.sw-rec-card{position:relative;width:100%;max-width:320px;margin:auto 0;flex:0 0 auto;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel);
  padding:16px 20px 20px;text-align:center;overflow:hidden;animation:var(--sw-rec-pop);}
.sw-rec-stage{position:relative;height:140px;display:flex;align-items:flex-end;justify-content:center;}
.sw-rec-rays{position:absolute;left:50%;top:54%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;opacity:.22;
  background:repeating-conic-gradient(var(--kin) 0deg 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);
  animation:var(--sw-rec-spin);}
/* ⭐ ランクアップの光は、新しい段の色の円に白い光（--sw-rec-zone は _新記録.js が段の色を入れる） */
.sw-rec.is-rankup .sw-rec-rays{opacity:.55;
  background:repeating-conic-gradient(rgba(255,255,255,.85) 0deg 7deg,transparent 7deg 20deg),var(--sw-rec-zone,var(--kin));}
/* ⭐ 全問正解の丸（緑＝正解）。半径54 の円周 ≒ 340 を、描き始めの位置から1周描く */
.sw-rec-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;transform:rotate(-90deg);}
.sw-rec-ring circle{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:var(--sw-rec-ring-off);animation:var(--sw-rec-draw);}
/* ⭐ しわけまる（3コマを横に並べた1枚）。幅・高さ・絵は _新記録.js が種類ごとに入れる。
   ⭐ 絵は箱の3倍の幅 → 位置 0%・50%・100% が1〜3コマ目（steps(3) で 0%→150% を3つに刻む） */
.sw-rec-mascot{position:relative;background-repeat:no-repeat;background-size:300% 100%;
  background-position:var(--sw-rec-frame);animation:var(--sw-rec-frames);}
.sw-rec-ttl{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;white-space:nowrap;
  font-size:var(--font-size-3xl);font-weight:900;letter-spacing:.14em;line-height:1.2;color:var(--ink);}
/* ⭐ 6文字の「ランクアップ」だけ一段小さく（34px のままだと幅 320px のカードで「ランクアッ／プ」に折れた・2026/10/03） */
.sw-rec.is-rankup .sw-rec-ttl{font-size:var(--font-size-2xl);letter-spacing:.08em;}
/* ⭐ 2026/10/05 見出しが「新記録」（3字）から「Best Score!」になった（あゆむさん「新記録ではなくBest Score！がいいかな」）——34px・字間 .14em のままだと幅 320px のカードに収まらない */
.sw-rec.is-record .sw-rec-ttl{font-size:var(--font-size-2xl);letter-spacing:.02em;gap:6px;}
.sw-rec.is-record .sw-rec-ttl .sw-ico{font-size:24px;}
.sw-rec-ttl .sw-ico{font-size:30px;color:var(--kin);}
.sw-rec-ttl .sw-ico:last-child{transform:scaleX(-1);}
/* ⭐ 全問正解で新記録でもあるときの札（金＝新記録）。⛔ 金の面に白い字は薄くて読めないので、薄い金の面に墨の字 */
.sw-rec-tag{display:inline-block;margin-top:4px;padding:2px 12px;border-radius:var(--radius-pill);
  background:var(--tint-kin);border:1px solid var(--kin);color:var(--ink);font-size:var(--font-size-sm);font-weight:800;letter-spacing:.08em;}
.sw-rec-game{margin-top:2px;font-size:var(--font-size-sm);font-weight:700;color:var(--muted);}
.sw-rec-score{margin-top:4px;font-size:var(--font-size-4xl);font-weight:800;line-height:1.1;font-feature-settings:"tnum";color:var(--ink);}
.sw-rec-score small{margin-left:4px;font-size:var(--font-size-md);font-weight:700;color:var(--muted);}
.sw-rec-prev{margin-top:4px;font-size:var(--font-size-sm);color:var(--muted);font-feature-settings:"tnum";}
/* ⭐ ランクアップの段の札（前の段 → 新しい段）。色は段の色（白い字が乗る前提の濃さ・夜も変えない） */
.sw-rec-ranks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-top:10px;}
.sw-rec-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--radius-pill);
  color:#fff;font-size:var(--font-size-sm);font-weight:800;white-space:nowrap;overflow:hidden;}
.sw-rec-chip .sw-ico{font-size:18px;}
/* ⭐ 前の段は面だけ薄く（段の色 40%）、字は本文の色（2026/10/04 あゆむさん「薄くするのを札の面だけにして、字は濃くしてよい」）。
   ⭐ 字と面の比は、昼も夜も6段とも 5.1 以上（段の色の両端の低い方）。〔10/03〕札ごと opacity .6 で、字も 1.88〜3.15 まで薄くなっていた（クラウドの監査 #4）。
   ⛔ 字を段の fg のままにしない——面を紙の色へ寄せるので、夜の墨・昼の白（マスター）が読めなくなる */
.sw-rec-chip.is-from{color:var(--ink);}
.sw-rec-chip.is-from::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:.6;pointer-events:none;}
.sw-rec-chip.is-from > *{position:relative;}
.sw-rec-chip.is-to{font-size:var(--font-size-md);animation:var(--sw-rec-chip);}
.sw-rec-chip.is-to::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-130%);animation:var(--sw-rec-shine);}
.sw-rec-arrow{color:var(--muted);font-weight:800;}
/* ⭐ ミッション達成（2026/10/04）：見出しは8文字なので一段小さく（⛔ 34px のままだと幅 320px のカードに入らない）・札は横に並べる・
   完成した景色の絵（全部開いた）と名前・「集めた景色を見る」は枠だけのボタン（主のボタンは「とじる」のまま） */
.sw-rec.is-mission .sw-rec-ttl{font-size:var(--font-size-xl);letter-spacing:.04em;gap:6px;}
/* ⭐ 絵と点数が両方のる回はカードが高い（約650px）→ 縦にあふれたら下地ごとスクロール（上の .sw-rec。〔10/04〕ここだけにあった） */
.sw-rec.is-mission .sw-rec-stage{height:120px;}
.sw-rec.is-mission .sw-rec-ttl .sw-ico{font-size:24px;}
.sw-rec-tags{display:flex;justify-content:center;gap:6px;margin-top:4px;}
.sw-rec-tags .sw-rec-tag{margin-top:0;}
.sw-rec-scene{margin:12px 0 0;}
.sw-rec-scene canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:var(--radius-md);}
.sw-rec-scene figcaption{margin-top:6px;font-size:var(--font-size-sm);font-weight:700;color:var(--ink);line-height:1.9;}
.sw-rec-go{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;border:1.5px solid var(--ai);
  border-radius:var(--radius-lg);background:transparent;color:var(--ai);font-size:var(--font-size-md);font-weight:700;
  padding:10px 16px;min-height:var(--tap-min);text-decoration:none;}
.sw-rec-go:active{transform:scale(.985);opacity:.9;}
.sw-rec-go:focus-visible{outline:none;box-shadow:var(--shadow-focus);}
.sw-rec-go + .sw-rec-close{margin-top:10px;}
.sw-rec-close{display:block;width:100%;margin-top:16px;border:none;border-radius:var(--radius-lg);
  background:var(--ai);color:var(--on-fill);font-family:inherit;font-size:var(--font-size-lg);font-weight:700;
  padding:13px 20px;min-height:var(--tap-min);cursor:pointer;letter-spacing:.02em;}
.sw-rec-close:active{transform:scale(.985);opacity:.9;}
.sw-rec-close:focus-visible{outline:none;box-shadow:var(--shadow-focus);}

/* --- 結果の下の知らせ（2026/10/04・_新記録.js の showNotes）---------------------
   ⭐ 結果のカード（.panel-result）のすぐ下に置く小さい札。前回より伸びた・済んだミッション・連続日数を1行ずつ。
   ⭐ 色は変数だけ（ナイトモードは :root[data-theme="dark"] の値がそのまま反映される）。
      済んだ印はホームの Today's mission と同じ（墨の丸に白のチェック）・炎はホームの連続日数と同じ朱。
   ⚠️ 対戦モードは結果のカード（#matchResultOv .card）の中のいちばん下に入る。 */
.sw-notes{box-sizing:border-box;width:100%;margin:12px 0 0;padding:12px 16px;display:flex;flex-direction:column;gap:8px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  font-size:var(--font-size-md);font-weight:700;line-height:1.5;text-align:left;animation:swNotesIn .35s ease both;}
.sw-notes *{box-sizing:border-box;}
.sw-note{display:flex;align-items:center;gap:8px;min-width:0;}
.sw-note b{font-weight:800;font-feature-settings:"tnum";}
.sw-note-tx{flex:1;min-width:0;word-break:auto-phrase;}
.sw-note-ck{flex:0 0 22px;height:22px;border-radius:var(--radius-circle);background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;}
.sw-note-ck svg{width:12px;height:12px;}
.sw-note .sw-ico-flame{flex:0 0 22px;font-size:22px;color:var(--shu);}
.sw-note.is-growth{font-feature-settings:"tnum";}
/* ⭐ ミッションの行の上の小さい見出し「Today's mission」（すぐ下の行に寄せる） */
.sw-note-head{margin-bottom:-4px;font-size:var(--font-size-sm);color:var(--muted);letter-spacing:.04em;}
.sw-note-old,.sw-note-arrow{color:var(--muted);}
/* ⭐ 動きを減らす設定の端末では出てくる動きをしない（上の「@media (prefers-reduced-motion:reduce){*{animation:none}}」が全部を止める。⛔ ここに同じ名前をもう1度書かない＝検査⑬） */
@keyframes swNotesIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes sw-rec-fade{from{opacity:0}to{opacity:1}}
@keyframes sw-rec-pop{from{opacity:0;transform:translateY(12px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sw-rec-spin{to{transform:rotate(360deg)}}
@keyframes sw-rec-frames{to{background-position:150% 0}}
@keyframes sw-rec-draw{to{stroke-dashoffset:0}}
@keyframes sw-rec-chip{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes sw-rec-shine{0%{transform:translateX(-130%)}45%,100%{transform:translateX(130%)}}

/* --- しわけまるのコマ送り（2026/10/03・_ui.js の SW.mascotHtml / SW.mascotLoad）-------------------
   ⭐ あゆむさんの答え（使い道の案1〜5）「2右上から今空いてる真ん中に移動。他にも使えそうなアニメーションがあればランダム表示OK
      3OK4他にも使えそうなアニメーションがあればランダム表示」。
   ⭐ 絵は箱の3倍の幅 → 位置 0%・50%・100% が1〜3コマ目（お祝いの画面の .sw-rec-mascot と同じ刻み方・速さ）。
   ⭐ 縦横比は _ui.js が絵を読んでから入れる（それまでは 3/4 の空の箱）。大きさは高さだけを使う側で決める。
   ⭐ 動きを減らす設定の端末では、変数だけを「動かない」値に替える（2コマ目で止める）。
      ⛔ クラスを @media の中で書き直さない（check.sh ⑬）。 */
:root{--sw-mascot-frames:sw-mascot-frames .96s steps(3) infinite;--sw-mascot-frame:0 0;}
@media (prefers-reduced-motion:reduce){ :root{--sw-mascot-frames:none;--sw-mascot-frame:50% 0;} }
.sw-mascot{aspect-ratio:3/4;background-repeat:no-repeat;background-size:300% 100%;
  background-position:var(--sw-mascot-frame);animation:var(--sw-mascot-frames);pointer-events:none;}
/* 一時停止のカード（_ui.js の pause・catch-ta.html の pausecard の2か所）：見出しの上に正座 */
.sw-mascot.is-pause{height:88px;margin:0 auto 6px;}
@keyframes sw-mascot-frames{to{background-position:150% 0}}

/* ============================================================
   案B・2回目の前半（2026/10/05）：遊んでいる最中の画面（4本の #game）
   ⭐ あゆむさん 2026/10/05「全て控えめ版がいいな」「パターン2がいいな」「2回分けて実装しよう」→ docs/UI設計/見た目の見本.md 9-8・9-10・10章。
   ⭐ 並びは前のまま。変えるのは見た目：空色の下地に白い面／押せる物は下に濃い色の段差／
      上の面（ホーム・ゲームの印と名前・一時停止・進み具合）をゲームの色に。
   ⭐ 色・書体・角丸は --b-… を #game の中に限って当てはめる（1回目の index.html の5つのタブと同じやり方）。
      ⭐ はじめる前（.sw-start）と結果（.sw-res）は、後半（この下の「案B・2回目の後半」）で同じ当てはめをする。
   ⭐ 科目キャッチ（#app）と貸借タイムアタック（#q_screen > .wrap）にも同じ当てはめをする。この2本だけの形は _app_v7.css。
   ⭐ ゲームの色（--c・--cd）は、各ゲームの <style> が #game に入れる。対戦モードの途中は紺（html.sw-match＝_対戦.js の mark が付ける）。
   ⛔ 5区分の色（--asset など）は変えない。
   ============================================================ */
:root{
  --b-ng:#E5484D; --b-ng-d:#B52C33; --b-ng-t:#FDE3E3;      /* 赤＝まちがいと虫食いの「?」／濃い字／薄い面 */
  --b-ok-d:#15783F; --b-ok-t:#DBF5E5;                      /* 緑の濃い字／薄い面 */
  --b-sun-t:#FFF0C7; --b-sun-ink:#7A4E00;                  /* 山吹の薄い面／その上の字 */
  --b-off:#C5CFE6; --b-off-d:#A9B5D0;                      /* まだ押せないボタン／その段差 */
  /* ⭐ 進み具合の横棒の4つの見分け（2026/10/05 に濃さを計算して決めた）：正解＝白／まだ＝白の薄い面（地より明るい）／まちがい＝濃い色（地より暗い）／いま＝白い輪。
     〔見本〕は「まだ」も「まちがい」も黒の濃淡（.2 と .5）で、2つの差が 1.7 しか無かった。対戦モードの紺の上では、どちらも地と見分けられなかった（1.1〜1.2）。 */
  --b-hero-dim:rgba(255,255,255,.28);                      /* 色の面の上：まだの区画 */
  --b-hero-ng:rgba(0,0,0,.5);                              /* 色の面の上：まちがいの区画 */
  --b-hero-track:rgba(0,0,0,.2);                           /* 色の面の上：残り時間・レベルの進み具合の「残り」の地 */
  --b-hero-k:#ffffff;                                      /* 色の面の上：小さい見出しの字（⚠️ 薄めない。92% の白では濃さが 4.5 に届かなかった） */
  --b-hero-btn:#ffffff;                                    /* 色の面の上の白いボタン（ホーム・一時停止）。印の色はゲームの色（--c）
                                                              ⛔ --c・--cd を使う値は、ここ（:root）に変数として置かない——:root には --c が無いので、変数ごと無効になって下へ継がれる（印が白い面の上で白くなった） */
  --b-hero-fill:#ffffff;                                   /* 色の面の上：残り時間・進み具合の「済んだ分」 */
  --b-count-bg:#ffffff; --b-count-ink:var(--b-brand);      /* カウントダウンの数字の丸 */
  --b-step-brand:0 5px 0 var(--b-brand-d);
  --b-step-off:0 5px 0 var(--b-off-d);
  --b-ring-ng:0 0 0 3px var(--b-ng-t);                     /* いま入れる虫食いの枠 */
  --b-ring-now:inset 0 0 0 3px var(--b-hero-fill);         /* 進み具合：いまの問題 */
  --b-radius-seg:6px;
  --b-fixed:#F6F9FF;                                       /* 表の中の、入れられないマス（科目の名前・はじめから入っている数字） */
}
:root[data-theme="dark"]{
  --b-fixed:#1F2A56;
  /* ⭐ 夜は、色の面の上に真っ白な面を置かない（暗い画面で白い板が浮く）：ボタンは白の薄い面に白い印・残り時間は少し透かす・カウントダウンは紺の丸 */
  --b-hero-btn:rgba(255,255,255,.22);
  --b-hero-fill:rgba(255,255,255,.85);
  --b-count-bg:var(--b-paper); --b-count-ink:var(--b-brand-tx);
  --b-ng-d:#FF9BA0; --b-ng-t:#4A2030;
  --b-ok-d:#7FD9A6; --b-ok-t:#173B2C;
  --b-sun-t:#4A3A12; --b-sun-ink:#FFD98A;
  --b-off:#3A4678; --b-off-d:#2B376A;
}
#game.wrap,#q_screen > .wrap,#app,.sw-start,.sw-res,.sw-sheet{
  --bg:var(--b-bg);--paper:var(--b-paper);--panel:var(--b-paper);--ink:var(--b-ink);--text:var(--b-ink);
  --muted:var(--b-muted);--faint:var(--b-faint);--line:var(--b-line);--paper-line:var(--b-line);--track:var(--b-track);
  --ai:var(--b-brand-tx);--ok:var(--b-ok);--ng:var(--b-ng);--shu:var(--b-ng);--shu-ink:var(--b-ng-d);--kin:var(--b-sun-d);
  --tint-ok:var(--b-ok-t);--tint-ng:var(--b-ng-t);--tint-kin:var(--b-sun-t);--tint-head:var(--b-brand-t);
  --radius-sm:var(--b-radius-sm);--radius-md:var(--b-radius-md);--radius-lg:var(--b-radius-lg);--radius-xl:var(--b-radius-xl);
  --shadow-btn:none;--shadow-card:none;--shadow-press:none;--shadow-focus:0 0 0 3px var(--b-brand);   /* ⚠️ inset は使う側が付ける（表のマス） */
  --font-serif:var(--b-font-body);--font-sans:var(--b-font-num);
  background:var(--bg);color:var(--ink);font-family:var(--b-font-body);font-weight:400;   /* ⭐ 2026/10/06 本文は 400（〜10/06 丸文字の 700） */
}
/* ⭐ ゲームの色が入っていないとき（単語マスター）は灰色。:where で弱くしてあるので、各ゲームの #game{--c:…} が勝つ */
:where(#game.wrap){--c:var(--b-c-any);--cd:var(--b-c-any-d);}
html.sw-match #game.wrap{--c:var(--b-c-vs);--cd:var(--b-c-vs-d);}
/* ⭐ 対戦モードの紺の上では、濃い色が見えない → まちがい＝赤・地は白の薄い面 */
html.sw-match{--b-hero-ng:var(--b-ng);--b-hero-track:rgba(255,255,255,.16);--b-hero-panel:rgba(255,255,255,.08);}
/* ⭐ 画面が広い端末（430px より広い）でも、ゲームの外側を同じ空色にする。⚠️ :has() が無い端末は、外側だけ前の色のまま（中は変わらない） */
body:has(#game.wrap:not(.hidden)){background:var(--b-bg);}

/* ---------- 上の面：ホーム・ゲームの印と名前・一時停止／その下に進み具合（10区画）と「問題」「正解」 ---------- */
#game > header{
  flex-wrap:wrap;gap:10px;
  margin:calc(-1 * (env(safe-area-inset-top,0px) + 14px)) -16px var(--space-3);
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 14px;
  background:var(--c);color:var(--b-on);border-radius:0 0 var(--b-radius-xl) var(--b-radius-xl);
}
#game > header .ttl{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;white-space:nowrap;
  color:var(--b-on);font-size:var(--font-size-lg);font-weight:900;letter-spacing:.02em;}
/* ⭐ タイトルの下の読み（2026/10/12 夜 あゆむさん「科目キャッチだけ、プレイ中の上部にふりがなある？あるなら全部のゲームの上部にふりがなをつけてほしい」）。
   科目キャッチ・貸借タイムアタックの読み（_app_v7.css の .sw-hero .ttl small）と同じ 10px・太字・白・行の高さ 1.2。上の段の高さを変えないため */
#game > header .ttl .ttl-tx{display:block;line-height:1.2;text-align:left;}
#game > header .ttl .ttl-tx small{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--b-hero-k);}
.sw-gi{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:var(--b-radius-md);background:var(--b-wash);font-size:22px;}
#game > header .btn-back.is-home,#game > header .btn-pause{
  width:var(--tap-min);min-height:var(--tap-min);border:0;border-radius:var(--b-radius-md);
  background:var(--b-hero-btn);color:var(--c);box-shadow:0 3px 0 var(--cd);font-size:var(--font-size-xl);}
:root[data-theme="dark"] #game > header .btn-back.is-home,:root[data-theme="dark"] #game > header .btn-pause{color:var(--b-on);}   /* 夜は白の薄い面に白い印 */
#game > header .btn-back.is-home:active,#game > header .btn-pause:active{transform:translateY(3px);box-shadow:none;}
#game > header .hud{order:9;flex:1 0 100%;align-items:center;gap:10px;}
.sw-seg{flex:1;display:flex;gap:3px;min-width:0;}
.sw-seg i{flex:1;height:12px;border-radius:var(--b-radius-seg);background:var(--b-hero-dim);}
.sw-seg i.is-ok{background:var(--b-hero-fill);}
.sw-seg i.is-ng{background:var(--b-hero-ng);}
.sw-seg i.is-now{background:transparent;box-shadow:var(--b-ring-now);}
#game > header .chip{display:flex;align-items:baseline;gap:4px;min-width:0;padding:0;border:0;border-radius:0;background:none;color:var(--b-on);}
#game > header .chip b{display:inline;font-size:10px;font-weight:800;letter-spacing:0;color:var(--b-hero-k);}
#game > header .chip span{font-family:var(--b-font-num);font-size:var(--font-size-lg);font-weight:700;line-height:1;}
#game > header .chip span small{font-size:var(--font-size-xs);font-weight:700;color:var(--b-hero-k);}
/* ⭐ 対戦モードの途中：5つのゲームの印を並べて、いま何本目かを示す（山吹＝いまの1本・白＝済んだ本）。2026/10/05 あゆむさん「1入れる」 */
.sw-steps{order:5;flex:1 0 100%;display:flex;justify-content:center;gap:8px;margin-top:-2px;}
.sw-steps > span{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--b-radius-sm);background:rgba(255,255,255,.14);color:rgba(255,255,255,.55);font-size:19px;}
.sw-steps > span.is-done{background:rgba(255,255,255,.3);color:var(--b-on);}
.sw-steps > span.is-on{background:var(--b-sun);color:var(--b-c-vs-d);box-shadow:0 3px 0 var(--b-sun-d);}

/* ---------- 下のボタン：GO！（藍・段差）・まだ押せないとき・つぎの問題へ・わからない ----------
   ⭐ 「#game > div」＝上の列（header）の外。上の列のホームのボタンも .btn なので、それを除くための書き方 */
#game > div .btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;margin-bottom:5px;
  border-radius:var(--b-radius-lg);background:var(--b-brand);color:var(--b-on);box-shadow:var(--b-step-brand);
  font-family:var(--b-font-body);font-size:var(--font-size-lg);font-weight:900;letter-spacing:.06em;}
#game > div .btn:active{transform:translateY(5px);box-shadow:none;opacity:1;}
#game > div .btn:disabled{background:var(--b-off);box-shadow:var(--b-step-off);}
#game > div .btn.btn-next{background:var(--b-brand);box-shadow:var(--b-step-brand);}
/* ⭐ 2026/10/09「わからない」の押せる高さは、どの画面でも 44px（--tap-min）。〔10/05〜10/08〕38px・高さ 800px 未満で 32px・700px 未満で 28px に縮めていた
   （GO！のすぐ下なので押し間違えるとミスになる。ゲームの中の見た目の監査 3）。試験「仕訳と精算表が1画面に収まるか」は、ほかを詰めずに通った */
#game > div .btn.btn-ghost{min-height:var(--tap-min);margin-bottom:0;border:0;background:none;box-shadow:none;
  color:var(--muted);font-size:var(--font-size-md);font-weight:800;letter-spacing:.02em;}
#game > div .btn.btn-ghost:active{transform:none;opacity:.6;}

/* ---------- 数字のキー：白・段差 ---------- */
#game .pad{gap:6px;}
#game .pad button{min-height:42px;margin-bottom:3px;border:0;border-radius:var(--b-radius-md);background:var(--paper);color:var(--ink);
  box-shadow:var(--b-step-sm);font-family:var(--b-font-num);font-size:var(--font-size-xl);font-weight:600;}
#game .pad button:active{transform:translateY(3px);box-shadow:none;}
#game .pad button.fn{font-family:var(--b-font-body);font-size:var(--font-size-sm);font-weight:800;color:var(--muted);letter-spacing:.1em;}

/* ---------- 答えたあとの面：緑＝正解・赤＝まちがい。印（◯・✕）は白い丸の中 ---------- */
#game .note{border:0;border-radius:var(--b-radius-lg);background:var(--paper);font-weight:800;}   /* ⚠️ 余白はここで決めない（各ゲームが背の低い画面で詰めている） */
#game .note.is-correct{background:var(--b-ok-t);color:var(--b-ok-d);}
#game .note.is-wrong{background:var(--b-ng-t);color:var(--b-ng-d);}
#game .note .hd{display:flex;align-items:center;margin-bottom:0;}
#game .note .mk,#q_screen .fb .mk{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border:0;border-radius:var(--radius-circle);background:var(--b-on);
  font-size:0;color:var(--b-ok);-webkit-text-fill-color:currentColor;vertical-align:0;}
#game .note .mk.ng,#q_screen .fb .mk.ng{color:var(--b-ng);}
/* ⭐ 印（::before）は白い丸の真ん中に、丸の中身と関係なく置く（2026/10/19 あゆむさん「正解、不正解の白丸の上のまるばつは白丸の中央に置いて」「部品として直して」）。
   ⚠️ 丸の中には読み上げ用の字（◯・❌）が入っていて、grid の2つめの行になっていた——行が2つに分かれ、印が 4〜4.5px 上に寄った
      （仕訳チャレンジ・精算表・BOXパズル・貸借タイムアタックの4本とも。tools/v7試験/白丸の印が真ん中か.sh で測った）。
   ⭐ 印を丸の中の行から外し（position:absolute）、上下左右を 0 にして margin:auto で真ん中に置く。⛔ 字を消す直し方はしない（貸借TA は道具の出力で、手で直すと消える） */
#game .note .mk,#q_screen .fb .mk{position:relative;}
#game .note .mk::before,#q_screen .fb .mk::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--sw-mk) center/contain no-repeat;mask:var(--sw-mk) center/contain no-repeat;}

/* ---------- BOXパズルの図（貸借対照表・損益計算書の形）：白い面・見出しは薄い藍・T字の線は濃く太く ---------- */
/* ⭐ 2026/11/03 こたえ（.sw-sheet）の図もゲームの中と同じ決まりにした（あゆむさん「まだこたえの罫線や枠が薄くてみづらい」「UIの統一って観点で統一させてね」）。
   〔〜11/03〕こたえは .doc の素の 1px の罫（--line）のままで、カードと同じ色の上で線が見えにくかった。
   ⭐ こたえだけはカードの上に置くので、外枠を 2px の --faint で描く（ゲームの中は下地が暗いので外枠なし） */
#game .doc,.sw-sheet .doc{border:0;border-radius:var(--b-radius-lg);}
.sw-sheet .doc{border:2px solid var(--faint);}
#game .doc-h,.sw-sheet .doc .doc-h{border-bottom:4px solid var(--ink);background:var(--b-brand-t);}
#game .doc-h .jp,.sw-sheet .doc .doc-h .jp{font-weight:900;}
#game .doc-h .en,.sw-sheet .doc .doc-h .en{color:var(--muted);}   /* ⚠️ 薄い藍の見出しの上では --faint だと濃さが足りない（2.57） */
#game .grid2 > .col:first-child,.sw-sheet .doc .grid2 > .col:first-child{border-right:4px solid var(--ink);}
/* ⭐ 2026/11/03 縦に並ぶマスの区切り（負債と純資産・その他の費用と当期純利益など）を --line から --faint に（あゆむさん「B/Sの負債と純資産の間、P/Lの利益とそのたのひよう　の間の線ももう少し見やすくして」）。
   〔〜11/03〕--line（夜 #382B6A）は白い面（夜 #231A48）とほぼ同じ色で、線が見えにくかった。⚠️ 太さは 2px のまま（T字の 4px より細く＝主役は T字） */
#game .doc .seg,.sw-sheet .doc .seg{border-bottom:2px solid var(--faint);}
#game .doc .seg:last-child,.sw-sheet .doc .seg:last-child{border-bottom:none;}
#game .doc .seg .lab,.sw-sheet .doc .seg .lab{font-weight:900;}
#game .doc .seg .val,.sw-sheet .doc .seg .val{font-weight:600;}

/* ---------- カウントダウン（3・2・1＝白い丸に藍の字／GO！＝山吹の面）。⭐ 画面の外（body の直下）に出るので、--b-… をそのまま使う。
   ⭐ .sw-count・.sw-count-n・.sw-confirm・.sw-confirm-box そのものは、上の元の定義を案Bの値に直してある（同じ名前を2か所で定義しない） ---------- */
/* ⭐ 2026/10/19 あゆむさん「カウントダウンの丸の影を無くしたい(下半分飛びててるやつ)」「GOも外す」→ 下にずらした濃い色の段（0 8px 0）を外した。まわりの薄い白い輪は残す。
   〔10/05〜10/19〕3・2・1 は藍の濃い段・GO! は山吹の濃い段が、丸と面の下にはみ出していた */
:root{--b-veil:rgba(27,36,64,.55);--b-step-count:0 0 0 12px rgba(255,255,255,.25);--b-step-go:0 0 0 12px rgba(255,255,255,.25);}
.sw-count-n.is-go{min-width:190px;height:104px;padding:0 24px;border-radius:var(--b-radius-xl);background:var(--b-sun);color:var(--b-c-vs-d);
  box-shadow:var(--b-step-go);font-size:64px;}

/* ---------- 一時停止・やめるときの確認（重ねて出る白い面）---------- */
.sw-confirm-box h2{font-family:var(--b-font-disp);font-size:var(--font-size-xl);font-weight:900;font-synthesis:none;color:var(--b-ink);}
.sw-confirm-box p{color:var(--b-muted);font-weight:700;}
.sw-confirm-box h2 small{font-family:var(--b-font-body);font-size:var(--font-size-sm);font-weight:700;color:var(--b-muted);}   /* 「学籍番号を変えますか？」の下の英語（5つのタブの設定から出る確認） */
.sw-confirm-box .btn{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;margin-bottom:5px;
  border-radius:var(--b-radius-lg);background:var(--b-brand);color:var(--b-on);box-shadow:var(--b-step-brand);
  font-family:var(--b-font-body);font-size:var(--font-size-lg);font-weight:900;letter-spacing:.04em;}
.sw-confirm-box .btn:active{transform:translateY(5px);box-shadow:none;opacity:1;}
.sw-confirm-box .btn.btn-ghost{border:2px solid var(--b-line);background:var(--b-paper);color:var(--b-brand-tx);box-shadow:var(--b-step);font-size:var(--font-size-md);}
.sw-confirm-ico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:var(--radius-circle);background:var(--b-brand-t);color:var(--b-brand-tx);font-size:var(--font-size-2xl);}
/* ⭐ 一時停止のしわけまるは、白い面の上の辺から顔を出す */
.sw-confirm-box .sw-mascot.is-pause{height:120px;margin:-78px auto 2px;}

/* ---------- 背の低い画面（高さ 800px より低い）：上の面とボタンを詰める ----------
   ⭐ 上の面が2段になったぶん（前は1段）、下が押し出される。2026/10/05 に試験で測った：何もしないと、BOXパズルが 390×763 で 40〜54px・精算表が 390×664 で 44px はみ出した。
   ⚠️ 各ゲームの <style> にも、背の低い画面用の詰め（max-height:700px など）がある。ここは4本に共通の部品だけ。
   ⛔ BOXパズルの「数字のキーと GO！のあいだ 16px」は詰めない（2026/09/16 あゆむさん「数字のボタンとGoが近くて押し間違えるので一定間隔あける」）。 */
@media (max-height:800px){
  #game > header{gap:4px 10px;margin-bottom:4px;padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:6px;}
  #game > div .btn{min-height:44px;}
  #game .pad{gap:5px;}
  #game .pad button{min-height:38px;margin-bottom:0;}
}
/* ⭐ 高さ 700px より低い画面（iPhone SE など）：上の面を前と同じ1段に戻す（進み具合の横棒とゲームの印は出さない。「問題」「正解」の数字は出す）。
   2026/10/05 に測った：2段のままだと、BOXパズルの答え合わせが 375×647 で前より 35px 多くはみ出した。 */
@media (max-height:700px){
  #game > header{gap:8px;}
  #game > header .hud{order:0;flex:0 0 auto;gap:8px;}
  #game > header .sw-seg,#game > header .sw-gi{display:none;}
  #game > header .ttl{font-size:var(--font-size-md);}
  #game .note .mk,#q_screen .fb .mk{width:28px;height:28px;}
}

/* ============================================================
   案B・2回目の後半（2026/10/05）：はじめる前（.sw-start）・結果（.sw-res）
   ⭐ 見本は docs/UI設計/見た目の見本.md 9-3 の控えめ版・9-4 の i と l・9-11。並びは前のまま、見た目を変える。
   ⭐ 5本とも同じ骨組み（3本の HTML の #home・#result と、tools/本番/本番から2ゲームを切り出す.py の home_・result_）。
      科目キャッチと貸借タイムアタックだけの上書きは _app_v7.css の末尾。
   ⭐ ゲームの色（--c・--cd）は、各ゲームの <style>（3本）と _app_v7.css（2本）が入れる。
   ⛔ 文言・押したときの動きは変えない。ボタンの印は ::before に形を重ねるだけ（ボタンの文字はそのまま）。
   ============================================================ */
/* ---------- はじめる前：上の色の面（ゲームの印を大きく）＋下の白い面（名前・数字2つ・ボタン） ---------- */
.wrap.sw-start{position:relative;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--paper);}
.sw-cov{position:relative;flex:1 1 auto;min-height:200px;overflow:hidden;background-color:var(--c);
  background-image:radial-gradient(circle at 10% 104%,rgba(255,255,255,.13) 0 200px,transparent 201px),radial-gradient(circle at 98% -6%,rgba(255,255,255,.13) 0 140px,transparent 141px);}
.sw-cov::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:30px;border-radius:30px 30px 0 0;background:var(--b-paper);}   /* 下の白い面の丸い上の辺 */
.sw-big{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:150px;height:150px;margin:-90px 0 0 -75px;border-radius:46px;
  background:var(--b-hero-btn);color:var(--c);box-shadow:0 8px 0 var(--cd);transform:rotate(-5deg);font-size:98px;}
:root[data-theme="dark"] .sw-big{color:var(--b-on);}   /* 夜は白の薄い面に白い印（上の面のホームのボタンと同じ） */
.sw-fl{position:absolute;display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:rgba(255,255,255,.2);color:var(--b-on);font-size:34px;}
.sw-fl:nth-child(1){left:34px;top:24%;transform:rotate(-12deg);}
.sw-fl:nth-child(2){right:30px;top:15%;transform:rotate(10deg);}
.sw-fl:nth-child(3){right:54px;bottom:26%;transform:rotate(-7deg);opacity:.85;}
/* ---------- 2026/10/26 はじめる前の動く札（.sw-demo）：色の面の真ん中の印（.sw-big）の代わりに、ゲームの1問を小さく解いて見せる（4秒でくり返す・科目キャッチは2問で8秒）
   （あゆむさん「開始前の画面について、今の雰囲気を壊さずに、ゲームの様子を伝えるような簡単なアニメーションを載せられる？対戦は除く」→ 見本 docs/UI設計/モック_はじめる前の動き.html の2回目で「本番OK」）。
   ⭐ 中身は _ui.js の addStartDemo が差し込む（5本の HTML には書かない＝科目キャッチと貸借TAは切り出しの道具が作るため）。差し込んだ面には .has-demo が付き、.sw-big を隠す。
   ⭐ 札の形（角丸・ゲームの濃い色の段差・傾き）は .sw-big と同じ。幅は 236px（仕訳の4列・精算表の8列が入る幅）。地は --b-paper（昼は白・夜は紺）・字は --b-ink。
   ⭐ 中の名前は、どれも頭に dm-（ほかの画面の .ok・.bar などとぶつけない）。動きの名前は swdm-。
   ⭐ 動きを減らす設定の端末では動かさず、解き終わった形を出す（いちばん下の @media）。⛔ 対戦（g-vs）には出さない ---------- */
.sw-cov.has-demo .sw-big{display:none;}
/* ⭐ 夜：区分の色（--asset など）は夜に明るくなるので、その上の字は紺（--b-paper）。科目キャッチの落ちる札は明るい面にしない。「?」は紺の地で読める濃さに */
:root[data-theme="dark"] .dm-catch .dm-bins span,:root[data-theme="dark"] .dm-ta .dm-q b{color:var(--b-paper);}
:root[data-theme="dark"] .dm-catch .dm-w{background:var(--b-line);color:var(--b-ink);}
:root[data-theme="dark"] .dm-ta .dm-q{color:var(--b-ink);}
:root[data-theme="dark"] .dm-box .dm-qb{color:var(--b-ng-d);}   /* 夜の --b-ng-d は明るい赤（虫食いの「?」の字と同じ） */
.sw-demo{position:absolute;left:50%;top:50%;width:236px;height:164px;margin:-96px 0 0 -118px;border-radius:34px;
  background:var(--b-paper);box-shadow:0 8px 0 var(--cd);transform:rotate(-4deg);overflow:hidden;--dm-t:4s;
  font-family:var(--b-font-body);font-weight:700;color:var(--b-ink);}
.sw-demo *{box-sizing:border-box;}
.sw-demo .dm-ab{position:absolute;}
.sw-demo .dm-ok{position:absolute;right:12px;top:10px;width:26px;height:26px;border-radius:50%;background:var(--b-ok);opacity:0;
  display:grid;place-items:center;}
.sw-demo .dm-ok::after{content:"";width:11px;height:6px;border:solid #fff;border-width:0 0 3px 3px;transform:translateY(-2px) rotate(-45deg);}

/* ---------- 貸借タイムアタック：損益計算書の「?」に「費用」を入れる。下に時間の横棒 ---------- */
.dm-ta .dm-stmt{left:16px;right:16px;top:14px;height:84px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border-top:3px solid var(--b-ink);}
.dm-ta .dm-stmt > div{display:grid;place-items:center;font-size:14px;}
.dm-ta .dm-stmt .dm-r{grid-row:1 / 3;grid-column:2;border-left:3px solid var(--b-ink);color:var(--revenue);}
.dm-ta .dm-stmt .dm-p{color:var(--profit);border-top:3px solid var(--b-ink);}   /* ⭐ 2026/11/05 T字と同じ線（3px・--b-ink。あゆむさん「白線のやつ、プレイ直前の動画もね。貸借TA、科目CA、2級も3級も」）。〔11/03〜11/05〕2px の --faint */   /* ⭐ 2026/11/03 費用と利益の間の線（あゆむさん「貸借たいしゃくタイムアタックも」＝BOXパズルの動画の負債と純資産の間の線と同じ 2px の --faint） */
.dm-ta .dm-q{margin:4px;border-radius:8px;border:2px dashed var(--c);color:var(--c);font-size:18px;position:relative;animation:swdm-ta-q var(--dm-t) infinite;}
.dm-ta .dm-q b{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#fff;background:var(--expense);border-radius:6px;opacity:0;animation:swdm-ta-in var(--dm-t) infinite;}
.dm-ta .dm-chips{left:16px;right:16px;top:106px;display:flex;gap:8px;}
.dm-ta .dm-chips span{flex:1;height:28px;border-radius:9px;display:grid;place-items:center;font-size:13px;background:var(--b-bg);box-shadow:0 3px 0 var(--b-line);}
.dm-ta .dm-chips .dm-hit{animation:swdm-ta-tap var(--dm-t) infinite;}
.dm-ta .dm-bar{left:16px;right:16px;bottom:12px;height:6px;border-radius:3px;background:var(--b-bg);}
.dm-ta .dm-bar i{display:block;height:100%;border-radius:3px;background:var(--c);transform-origin:left;animation:swdm-ta-bar var(--dm-t) linear infinite;}
.dm-ta .dm-ok{animation:swdm-ok-pop var(--dm-t) infinite;animation-delay:0s;}
@keyframes swdm-ta-tap{0%,30%{transform:none;box-shadow:0 3px 0 var(--b-line);}34%{transform:translateY(3px);box-shadow:none;}40%,100%{transform:none;box-shadow:0 3px 0 var(--b-line);}}
@keyframes swdm-ta-in{0%,36%{opacity:0;transform:translateY(40px) scale(.6);}46%{opacity:1;transform:translateY(-3px) scale(1.06);}52%,88%{opacity:1;transform:none;}96%,100%{opacity:0;transform:none;}}
@keyframes swdm-ta-q{0%,100%{border-color:var(--c);}}
@keyframes swdm-ta-bar{0%{transform:scaleX(1);}100%{transform:scaleX(.15);}}

/* ---------- 科目キャッチ：落ちてくる科目を、区分の箱へ（現金 → 資産、売上 → 収益の2問で8秒） ---------- */
.dm-catch .dm-lane{left:14px;right:14px;top:10px;bottom:46px;border-radius:12px;background:var(--b-bg);
  background-image:repeating-linear-gradient(90deg,transparent 0 36px,var(--b-line) 36px 37px);}
/* ⭐ 2026/11/05 落ちる道の区切りを、ほかの図の T字と同じ線（3px・--b-ink）にし、下の5つの箱の境目にそろえた（あゆむさん「白線のやつ、プレイ直前の動画もね。貸借TA、科目CA、2級も3級も」）。
   〔〜11/05〕1px の --b-line を 36px おき（箱の境目とずれていた） */
.dm-catch .dm-lane{background-image:linear-gradient(var(--b-ink),var(--b-ink)),linear-gradient(var(--b-ink),var(--b-ink)),linear-gradient(var(--b-ink),var(--b-ink)),linear-gradient(var(--b-ink),var(--b-ink));
  background-size:3px 100%;background-repeat:no-repeat;background-position:20% 0,40% 0,60% 0,80% 0;}
.dm-catch .dm-w{left:50%;top:0;width:76px;height:30px;margin-left:-38px;border-radius:9px;background:var(--b-ink);color:var(--b-paper);font-size:14px;display:grid;place-items:center;opacity:0;}
.dm-catch .dm-w1{animation:swdm-ca-w1 calc(var(--dm-t) * 2) infinite;}
.dm-catch .dm-w2{animation:swdm-ca-w2 calc(var(--dm-t) * 2) infinite;}
.dm-catch .dm-bins{left:12px;right:12px;bottom:10px;display:flex;gap:4px;}
.dm-catch .dm-bins span{flex:1;height:30px;border-radius:8px;display:grid;place-items:center;font-size:11px;color:#fff;letter-spacing:-.04em;}
.dm-catch .dm-b-a{background:var(--asset);animation:swdm-ca-b1 calc(var(--dm-t) * 2) infinite;}
.dm-catch .dm-b-l{background:var(--liability);}
.dm-catch .dm-b-e{background:var(--equity);}
.dm-catch .dm-b-x{background:var(--expense);}
.dm-catch .dm-b-r{background:var(--revenue);animation:swdm-ca-b2 calc(var(--dm-t) * 2) infinite;}
/* 現金：中ほどまで落ちる → 左の資産の箱へ吸いこまれる */
@keyframes swdm-ca-w1{0%{opacity:0;transform:translate(0,-10px);}4%{opacity:1;transform:translate(0,0);}24%{opacity:1;transform:translate(0,40px);}31%{opacity:1;transform:translate(-62px,92px) scale(.7);}34%,100%{opacity:0;transform:translate(-62px,100px) scale(.4);}}
@keyframes swdm-ca-w2{0%,50%{opacity:0;transform:translate(0,-10px);}54%{opacity:1;transform:translate(0,0);}74%{opacity:1;transform:translate(0,40px);}81%{opacity:1;transform:translate(76px,92px) scale(.7);}84%,100%{opacity:0;transform:translate(76px,100px) scale(.4);}}
@keyframes swdm-ca-b1{0%,22%{transform:none;}25%{transform:translateY(3px);}31%{transform:scale(1.14);}37%,100%{transform:none;}}
@keyframes swdm-ca-b2{0%,72%{transform:none;}75%{transform:translateY(3px);}81%{transform:scale(1.14);}87%,100%{transform:none;}}

/* ---------- BOXパズル：資産 80 ＝ 負債 ? ＋ 純資産 25 → 「5」「5」と入る ---------- */
.dm-box .dm-bs{left:22px;right:22px;top:16px;height:112px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border-top:3px solid var(--b-ink);}
.dm-box .dm-bs > div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;}
.dm-box .dm-bs b{font-family:var(--b-font-num);font-size:20px;}
.dm-box .dm-bs .dm-as{grid-row:1 / 3;color:var(--asset);}
.dm-box .dm-bs .dm-li{border-left:3px solid var(--b-ink);color:var(--liability);border-bottom:3px solid var(--b-ink);}   /* ⭐ 2026/11/05 T字と同じ線（3px・--b-ink。あゆむさん「白線のやつ、プレイ直前の動画もね」）。〔11/03〜11/05〕2px の --faint */   /* ⭐ 2026/11/03 負債と純資産の間の線（あゆむさん「プレイ前の簡単な動画でも白の線追加して⏎負債と純資産の間」⏎は改行）。ゲームの図の区切り（#game .doc .seg）と同じ 2px の --faint */
.dm-box .dm-bs .dm-eq{border-left:3px solid var(--b-ink);color:var(--equity);}
.dm-box .dm-qb{position:relative;width:58px;height:28px;border-radius:7px;border:2px dashed var(--b-ng);color:var(--b-ng);display:grid;place-items:center;font-family:var(--b-font-num);font-size:18px;animation:swdm-bx-q var(--dm-t) infinite;}
.dm-box .dm-qb .dm-mk{position:absolute;animation:swdm-bx-mk var(--dm-t) infinite;}
.dm-box .dm-qb .dm-d1,.dm-box .dm-qb .dm-d2{position:absolute;color:var(--liability);opacity:0;}
.dm-box .dm-qb .dm-d1{animation:swdm-bx-d1 var(--dm-t) infinite;}
.dm-box .dm-qb .dm-d2{animation:swdm-bx-d2 var(--dm-t) infinite;}
.dm-box .dm-ok{animation:swdm-ok-pop var(--dm-t) infinite;}
@keyframes swdm-bx-mk{0%,24%{opacity:1;}27%,100%{opacity:0;}}
@keyframes swdm-bx-d1{0%,24%{opacity:0;transform:translate(0,6px);}28%{opacity:1;transform:none;}40%{opacity:1;transform:translate(0,0);}44%,90%{opacity:1;transform:translate(-6px,0);}96%,100%{opacity:0;transform:translate(-6px,0);}}
@keyframes swdm-bx-d2{0%,40%{opacity:0;transform:translate(6px,6px);}44%,90%{opacity:1;transform:translate(6px,0);}96%,100%{opacity:0;transform:translate(6px,0);}}
@keyframes swdm-bx-q{0%,50%{border-style:dashed;border-color:var(--b-ng);background:transparent;}54%,92%{border-style:solid;border-color:var(--b-ok);background:transparent;}100%{border-style:dashed;border-color:var(--b-ng);background:transparent;}}

/* ---------- 仕訳チャレンジ：借方科目｜金額｜貸方科目｜金額（いまの画面と同じ4列）。給料 → 未払給料 → 790 ---------- */
.dm-jr .dm-tb{left:12px;right:12px;top:14px;height:66px;border-radius:9px;overflow:hidden;border:2px solid var(--b-line);display:grid;grid-template-columns:1.25fr 1fr 1.25fr 1fr;grid-template-rows:20px 1fr;}
.dm-jr .dm-tb .dm-h{display:grid;place-items:center;font-size:9.5px;color:#fff;background:var(--b-c-vs);letter-spacing:-.04em;white-space:nowrap;}
.dm-jr .dm-tb .dm-c{display:grid;place-items:center;font-size:12px;letter-spacing:-.04em;white-space:nowrap;}
.dm-jr .dm-tb .dm-c + .dm-c{border-left:2px solid var(--b-line);}
.dm-jr .dm-tb .dm-c span{opacity:0;}
.dm-jr .dm-tb .dm-c .dm-m{font-family:var(--b-font-num);font-size:12.5px;}
.dm-jr .dm-tb .dm-dr{animation:swdm-jr-n1 var(--dm-t) infinite;}
.dm-jr .dm-tb .dm-cr{animation:swdm-jr-n2 var(--dm-t) infinite;}
.dm-jr .dm-tb .dm-m{animation:swdm-jr-m var(--dm-t) infinite;}
.dm-jr .dm-chips{left:12px;right:12px;top:92px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.dm-jr .dm-chips span{height:26px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;background:var(--b-bg);box-shadow:0 3px 0 var(--b-line);letter-spacing:-.03em;}
.dm-jr .dm-chips .dm-c1{animation:swdm-jr-t1 var(--dm-t) infinite;}
.dm-jr .dm-chips .dm-c2{animation:swdm-jr-t2 var(--dm-t) infinite;}
.dm-jr .dm-ok{top:auto;bottom:10px;right:12px;width:22px;height:22px;animation:swdm-ok-pop var(--dm-t) infinite;}
.dm-jr .dm-ok::after{width:9px;height:5px;}
@keyframes swdm-jr-t1{0%,14%{transform:none;box-shadow:0 3px 0 var(--b-line);}18%{transform:translateY(3px);box-shadow:none;}24%,100%{transform:none;box-shadow:0 3px 0 var(--b-line);}}
@keyframes swdm-jr-t2{0%,36%{transform:none;box-shadow:0 3px 0 var(--b-line);}40%{transform:translateY(3px);box-shadow:none;}46%,100%{transform:none;box-shadow:0 3px 0 var(--b-line);}}
@keyframes swdm-jr-n1{0%,18%{opacity:0;transform:translateY(10px);}25%,90%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes swdm-jr-n2{0%,40%{opacity:0;transform:translateY(10px);}47%,90%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes swdm-jr-m{0%,56%{opacity:0;}62%,90%{opacity:1;}97%,100%{opacity:0;}}

/* ---------- 精算表：いまの画面と同じ見出し（勘定科目・残高試算表・修正記入・損益計算書・貸借対照表 ×（借）（貸））と2行。
   修正記入（借）通信費 40 →（貸）現金過不足 40 → 損益計算書（借）通信費 130 → 対になる 40 と 40 を朱の楕円で結ぶ（いまの答え合わせと同じ形・1つ目は朱）
   ⭐ 寸法は決め打ち（楕円の位置をマスの寸法から出すため）：科目 44px＋8列×22px＝220px・行は 15＋12＋26＋26px ---------- */
.dm-ws .dm-gr{left:8px;top:26px;width:220px;height:79px;display:grid;grid-template-columns:44px repeat(8,22px);grid-template-rows:15px 12px 26px 26px;
  border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px var(--b-line);}
.dm-ws .dm-gr > div{display:grid;place-items:center;font-size:11.5px;box-shadow:inset -1px -1px 0 var(--b-line);white-space:nowrap;}
.dm-ws .dm-gr .dm-h1,.dm-ws .dm-gr .dm-h2{color:#fff;background:var(--b-c-vs);box-shadow:inset -1px -1px 0 rgba(255,255,255,.25);letter-spacing:-.08em;}
.dm-ws .dm-gr .dm-h1{font-size:8.5px;}
.dm-ws .dm-gr .dm-h2{font-size:7.5px;}
.dm-ws .dm-gr .dm-a{grid-row:1 / 3;font-size:8.5px;}
.dm-ws .dm-gr .dm-s2{grid-column:span 2;}
.dm-ws .dm-gr .dm-nm{font-size:8.5px;letter-spacing:-.08em;justify-content:start;padding-left:3px;}
.dm-ws .dm-gr .dm-v,.dm-ws .dm-gr b{font-family:var(--b-font-num);letter-spacing:-.04em;}
.dm-ws .dm-gr .dm-bs{background:var(--b-bg);}   /* 貸借対照表の列（この問題では空） */
.dm-ws .dm-gr .dm-cell{position:relative;}
.dm-ws .dm-gr .dm-cell::before{content:"";position:absolute;inset:2px;border-radius:4px;border:2px solid transparent;}
.dm-ws .dm-gr .dm-c1::before{animation:swdm-ws-f1 var(--dm-t) infinite;}
.dm-ws .dm-gr .dm-c2::before{animation:swdm-ws-f2 var(--dm-t) infinite;}
.dm-ws .dm-gr .dm-c3::before{animation:swdm-ws-f3 var(--dm-t) infinite;}
.dm-ws .dm-gr .dm-cell b{opacity:0;}
.dm-ws .dm-gr .dm-c1 b{animation:swdm-ws-v1 var(--dm-t) infinite;}
.dm-ws .dm-gr .dm-c2 b{animation:swdm-ws-v2 var(--dm-t) infinite;}
.dm-ws .dm-gr .dm-c3 b{animation:swdm-ws-v3 var(--dm-t) infinite;}
.dm-ws .dm-link{left:8px;top:26px;width:220px;height:79px;overflow:visible;}
.dm-ws .dm-link ellipse{fill:none;stroke:var(--shu);stroke-width:2;opacity:.85;stroke-dasharray:1;stroke-dashoffset:1;animation:swdm-ws-ring var(--dm-t) infinite;}
.dm-ws .dm-ok{top:auto;bottom:12px;animation:swdm-ok-pop var(--dm-t) infinite;}
@keyframes swdm-ws-f1{0%,8%{border-color:transparent;}11%,26%{border-color:var(--c);}29%,100%{border-color:transparent;}}
@keyframes swdm-ws-f2{0%,26%{border-color:transparent;}29%,44%{border-color:var(--c);}47%,100%{border-color:transparent;}}
@keyframes swdm-ws-f3{0%,44%{border-color:transparent;}47%,62%{border-color:var(--c);}65%,100%{border-color:transparent;}}
@keyframes swdm-ws-v1{0%,17%{opacity:0;transform:scale(.6);}22%,90%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes swdm-ws-v2{0%,35%{opacity:0;transform:scale(.6);}40%,90%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes swdm-ws-v3{0%,53%{opacity:0;transform:scale(.6);}58%,90%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes swdm-ws-ring{0%,60%{stroke-dashoffset:1;opacity:.85;}72%,90%{stroke-dashoffset:0;opacity:.85;}97%,100%{stroke-dashoffset:0;opacity:0;}}

/* 正解の丸（5本とも同じ） */
@keyframes swdm-ok-pop{0%,58%{opacity:0;transform:scale(.3);}64%{opacity:1;transform:scale(1.15);}68%,88%{opacity:1;transform:none;}94%,100%{opacity:0;transform:none;}}
.dm-catch .dm-ok{display:none;}   /* 科目キャッチは箱がはねるので、丸は出さない */

/* ⭐ 動きを減らす設定：動かさず、解き終わった形を出す */
@media (prefers-reduced-motion:reduce){
  .sw-demo *,.sw-demo *::before{animation:none !important;}
  .dm-ta .dm-q b,.dm-box .dm-qb .dm-d1,.dm-box .dm-qb .dm-d2,.dm-jr .dm-tb .dm-c span,.dm-ws .dm-gr b,.dm-catch .dm-w1{opacity:1 !important;}
  .dm-ws .dm-link ellipse{stroke-dashoffset:0 !important;}
  .dm-box .dm-qb .dm-mk,.dm-catch .dm-w2{opacity:0 !important;}
  .dm-box .dm-qb .dm-d1{transform:translate(-6px,0);} .dm-box .dm-qb .dm-d2{transform:translate(6px,0);}
  .dm-box .dm-qb{border-style:solid;border-color:var(--b-ok);}
}
.sw-start .home-head{margin:0;padding:0 20px;}
.sw-start .home-head .btn-back.is-home{position:absolute;left:14px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:1;margin:0;border:0;border-radius:var(--b-radius-md);
  background:var(--b-hero-btn);color:var(--c);box-shadow:0 3px 0 var(--cd);font-size:var(--font-size-xl);}
:root[data-theme="dark"] .sw-start .home-head .btn-back.is-home{color:var(--b-on);}
.sw-start .home-head .btn-back.is-home:active{transform:translateY(3px);box-shadow:none;}
.sw-start .home-title{font-family:var(--b-font-disp);font-weight:700;font-size:30px;font-synthesis:none;letter-spacing:.02em;line-height:1.3;color:var(--ink);}
.home-title .sw-kyu{font-size:.6em;letter-spacing:0;white-space:nowrap;}   /* ⭐ 2026/11/05 ゲーム名の後ろの「（2級）」「（3級）」（_ui.js の kyuTitles）。名前より小さく＝ホームの「しわけまる（2級）」と同じ形 */
.sw-start .home-best{gap:0;margin:12px 20px 0;}
.sw-start .home-best div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;border-radius:0;background:none;}
.sw-start .home-best div + div{border-left:2px solid var(--line);}
.sw-start .home-best b{font-size:12px;font-weight:800;letter-spacing:0;color:var(--muted);}
.sw-start .home-best span{font-family:var(--b-font-num);font-size:36px;font-weight:700;line-height:1.05;color:var(--ink);}
/* ⭐ 2026/10/09 ベストの「/10」は小さく（プレイのタブの札の「9/10」と同じ見せ方。_ui.js の showBest） */
.sw-start .home-best span small{margin-left:2px;font-size:.5em;font-weight:700;color:var(--muted);}

/* ---------- ボタン（はじめる前・結果）：主＝藍の段差・副＝白の段差。前に印（はじめる＝再生・もういちど＝やり直し・ホームへ＝家・正解表＝本） ---------- */
.sw-start .btn:not(.btn-back),.sw-res-acts .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:56px;margin:16px 20px 5px;padding:0 20px;
  border:0;border-radius:var(--b-radius-lg);background:var(--b-brand);color:var(--b-on);box-shadow:var(--b-step-brand);
  font-family:var(--b-font-body);font-size:var(--font-size-lg);font-weight:900;letter-spacing:.06em;}
.sw-start .btn:not(.btn-back) + .btn,.sw-res-acts .btn + .btn{margin-top:8px;}
.sw-start .btn:not(.btn-back):active,.sw-res-acts .btn:active{transform:translateY(5px);box-shadow:none;opacity:1;}
.sw-start .btn.btn-ghost,.sw-res-acts .btn.btn-ghost{min-height:50px;border:2px solid var(--b-line);background:var(--b-paper);color:var(--b-brand-tx);box-shadow:var(--b-step);font-size:var(--font-size-md);}
.sw-start .btn:not(.btn-back)::before,.sw-res-acts .btn::before{content:"";flex:0 0 auto;width:24px;height:24px;background:currentColor;
  -webkit-mask:var(--sw-i-play) center/contain no-repeat;mask:var(--sw-i-play) center/contain no-repeat;}
.sw-start .btn.btn-ghost::before{width:22px;height:22px;-webkit-mask-image:var(--sw-i-book);mask-image:var(--sw-i-book);}
.sw-res-acts .btn::before{-webkit-mask-image:var(--sw-i-replay);mask-image:var(--sw-i-replay);}
.sw-res-acts .btn.btn-ghost::before{width:22px;height:22px;-webkit-mask-image:var(--sw-i-home);mask-image:var(--sw-i-home);}
/* ⭐ 2026/10/09 結果画面のボタンが「もういちど」「ほかのゲームをプレイ」（〔10/09 13時台〜〕「他のゲームをプレイ」）「正解表」になった（〔〜10/09〕2つめは「ホームへ」＝家の印）。
   ⭐ 「ほかのゲームをプレイ」＝アプリの下の「プレイ」のタブと同じ印（index.html の #tb-play の絵・--sw-i-games）／「正解表」＝はじめる前の正解表のボタンと同じ本の印（--sw-i-book）。
   ⚠️ 印は id でなく、ボタンの並び（2つめ・3つめ）で決める——5本でボタンの id が違う（otherBtn・otherBtn2・q_otherBtn） */
:root{--sw-i-games:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M189-129q-74 0-124.8-52.1-50.81-52.09-53.2-126 0-10.9 1.5-21.4Q14-339 16-350l84-337q17-63 68.23-103.5Q219.47-831 285-831h390q65.53 0 116.77 40.5Q843-750 860-687l84 336q3 11 4.5 22.52t1.5 22.43q0 73.98-52.48 125.51Q845.03-129 770.98-129q-50.98 0-94.48-26.5Q633-182 611-229l-28-57q-1-2-3.26-2.5T575-289H385q-2.48 0-4.74.5-2.26.5-3.26 2.5l-28 57q-22 47-65.58 73.5T189-129Zm379.5-402.5Q580-543 580-560t-11.5-28.5Q557-600 540-600t-28.5 11.5Q500-577 500-560t11.5 28.5Q523-520 540-520t28.5-11.5Zm80-80Q660-623 660-640t-11.5-28.5Q637-680 620-680t-28.5 11.5Q580-657 580-640t11.5 28.5Q603-600 620-600t28.5-11.5Zm0 160Q660-463 660-480t-11.5-28.5Q637-520 620-520t-28.5 11.5Q580-497 580-480t11.5 28.5Q603-440 620-440t28.5-11.5Zm80-80Q740-543 740-560t-11.5-28.5Q717-600 700-600t-28.5 11.5Q660-577 660-560t11.5 28.5Q683-520 700-520t28.5-11.5Zm-367 63Q370-477 370-490v-40h40q13 0 21.5-8.5T440-560q0-13-8.5-21.5T410-590h-40v-40q0-13-8.5-21.5T340-660q-13 0-21.5 8.5T310-630v40h-40q-13 0-21.5 8.5T240-560q0 13 8.5 21.5T270-530h40v40q0 13 8.5 21.5T340-460q13 0 21.5-8.5Z'/%3E%3C/svg%3E");}
.sw-res-acts .btn.btn-ghost:nth-child(2)::before{-webkit-mask-image:var(--sw-i-games);mask-image:var(--sw-i-games);}
.sw-res-acts .btn.btn-ghost:nth-child(3)::before{-webkit-mask-image:var(--sw-i-book);mask-image:var(--sw-i-book);}

/* ---------- 結果：上の色の面（放射の模様・「けっか」のリボン・見出し・ゲーム名・点数・何問目が正解だったか）＋下にボタン ---------- */
.wrap.sw-res{position:relative;padding:0;background:var(--paper);}
/* ⭐ 2026/10/26 結果の左上の家（_ui.js の addResHome が差し込む）。形と色は、はじめる前の左上の「もどる」と同じ（あゆむさん「開始前の戻るとかと同じような雰囲気で」） */
.sw-ico-home{--sw-ico:var(--sw-i-home);}
.sw-res .sw-res-home{position:absolute;left:14px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:2;margin:0;border:0;border-radius:var(--b-radius-md);
  background:var(--b-hero-btn);color:var(--c);box-shadow:0 3px 0 var(--cd);font-size:var(--font-size-xl);}
:root[data-theme="dark"] .sw-res .sw-res-home{color:var(--b-on);}
.sw-res .sw-res-home:active{transform:translateY(3px);box-shadow:none;}
.sw-res .sw-res-home .sw-ico-home{font-size:1.1em;}
/* ⭐ 2026/10/09 色の面は中身より小さく縮めない（flex:1 0 auto）。〔10/05〜10/08〕1 1 auto で、横向き（667×375）や背の低い画面で知らせが出た回に、
   面が縮んで点数と「けっか」の札が切れた（ゲームの中の見た目の監査 1）。収まらない画面は、ページを送って読む */
.sw-res .panel-result{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  margin:0;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px 26px;border:0;border-radius:0 0 36px 36px;box-shadow:none;
  background-color:var(--c);color:var(--b-on);
  background-image:repeating-conic-gradient(from 0deg at 50% 42%,rgba(255,255,255,.09) 0 7.5deg,transparent 7.5deg 15deg);}
/* ⭐ 2026/10/29 札の字は「Result」（〔〜10/29〕「けっか」）。英字なので字の間隔は .3em → .12em（.3em だと「R e s u l t」とばらけて1語に読めない）。右の余白の .12em は字間の分 */
.sw-res .panel-result .seal{display:grid;place-items:center;height:40px;margin:0;padding:0 40px 0 calc(40px + .12em);border:0;border-radius:0;
  background:var(--b-hero-btn);color:var(--c);font-size:15px;font-weight:900;letter-spacing:.12em;
  clip-path:polygon(0 0,100% 0,84% 50%,100% 100%,0 100%,16% 50%);}   /* 「けっか」のリボン（形は freegameui.net の sh_ribbon_notched_01 と同じ切り欠き） */
:root[data-theme="dark"] .sw-res .panel-result .seal{color:var(--b-on);}
.sw-res .panel-result h2{margin:14px 0 0;font-family:var(--b-font-disp);font-size:28px;font-weight:700;font-synthesis:none;line-height:1.2;color:var(--b-on);}
.sw-res .panel-result h2:empty{display:none;}
/* ⭐ 2026/10/09 夜 結果の見出しは言葉の途中で折らない（見出しが4段になり、いちばん長い〔〜10/29〕「いっしょにがんばろう！」が幅 320px で「いっしょにがんばろ／う！」と折れた。いまのいちばん下の段は「こたえをみてみよう！」）。
   折れてよいのは _ui.js の TITLES に置いた幅のない折り目（\u200B）だけ */
.sw-res .panel-result h2{word-break:keep-all;}
.sw-res .panel-result .sub{margin:12px 0 0;font-family:var(--b-font-disp);font-size:19px;letter-spacing:.02em;color:var(--b-on);}
.sw-res .panel-result h2:not(:empty) + .sub{margin-top:2px;font-size:15px;}
.sw-res .scorebig{margin:0;font-family:var(--b-font-num);font-size:124px;font-weight:700;line-height:1.02;color:var(--b-on);text-shadow:0 7px 0 var(--cd);}
.sw-res .scorebig small{margin-left:4px;font-family:var(--b-font-num);font-size:32px;font-weight:700;color:var(--b-on);text-shadow:0 4px 0 var(--cd);}
.sw-res .home-best:empty{display:none;}
.sw-res-seg{flex:none;width:250px;max-width:100%;margin-top:10px;}
.sw-res-seg:empty{display:none;}
.sw-res-seg i.is-ng{background:var(--b-hero-dim);}   /* ⭐ 結果では、まちがい＝薄い色（見本のとおり。白＝正解と並べて、何問目かが分かる） */
.sw-res-acts{flex:none;display:flex;flex-direction:column;padding:0 0 calc(env(safe-area-inset-bottom,0px) + 14px);}
.sw-res-acts .btn:first-child{margin-top:14px;}
/* 結果の下の知らせ（_新記録.js の .sw-notes）：色の面とボタンのあいだ */
.sw-res .sw-notes{width:auto;margin:14px 20px 0;border:0;border-radius:18px;background:var(--b-bg);}
/* ---------- 正解表の上の5区分の札（_ui.js の SW.listTabs が作る。色は表の見出しと同じ＝JS が見出しから写す） ---------- */
.sw-ltabs{flex:none;display:flex;gap:6px;padding:12px 14px 0;}
.sw-ltabs button{flex:1;min-width:0;min-height:34px;padding:0 2px;border:0;border-radius:var(--radius-pill);color:var(--on-fill);
  font-family:var(--b-font-body);font-size:12px;font-weight:900;letter-spacing:.02em;cursor:pointer;}
.sw-ltabs button:active{opacity:.75;}

/* ---------- お祝い（_新記録.js の .sw-rec）：白いカードから、画面全体を塗る形に（見本 9-4 の k） ----------
   ⭐ 色と放射の模様は外側の下地（.sw-rec）に塗り、カードは透明にして中身だけを並べる——「外側を押すと消える」（_新記録.js）はそのまま効く。
   ⭐ 色：Best Score!＝山吹／全問正解＝緑／ランクアップ＝紺に山吹の見出し／ミッション達成＝藍。⛔ 夜は画面いっぱいの明るい色を出さない
      （暗い画面に明るい面が浮く＝ナイトモードの決まり）→ 夜は暗い下地に、見出しだけその色。
   ⭐ 見出しは太い縁取りの白い字（Mochiy Pop One）。きらめきの印・しわけまるの動き・丸が描かれる動きは前のまま */
.sw-rec.is-record{--rk-bg:var(--b-sun);--rk-ray:rgba(255,255,255,.2);--rk-glow:#FFF3C9;--rk-ink:var(--b-ink);--rk-ttl:#ffffff;--rk-edge:var(--b-ink);
  --rk-btn:var(--b-ink);--rk-btn-ink:#ffffff;--rk-btn-d:#070B1A;}
.sw-rec.is-perfect{--rk-bg:#15783F;--rk-ray:rgba(255,255,255,.07);--rk-glow:#DBF5E5;--rk-ink:#ffffff;--rk-ttl:#ffffff;--rk-edge:#0B4A26;
  --rk-btn:#ffffff;--rk-btn-ink:#15783F;--rk-btn-d:#0B4A26;}
.sw-rec.is-rankup{--rk-bg:var(--b-c-vs);--rk-ray:rgba(255,255,255,.05);--rk-glow:#3A4A8A;--rk-ink:#ffffff;--rk-ttl:var(--b-sun);--rk-edge:#0B1026;
  --rk-btn:var(--b-sun);--rk-btn-ink:var(--b-c-vs-d);--rk-btn-d:var(--b-sun-d);}
.sw-rec.is-mission{--rk-bg:var(--b-brand);--rk-ray:rgba(255,255,255,.07);--rk-glow:#CFE1FF;--rk-ink:#ffffff;--rk-ttl:#ffffff;--rk-edge:var(--b-brand-d);
  --rk-btn:#ffffff;--rk-btn-ink:var(--b-brand);--rk-btn-d:var(--b-brand-d);}
:root[data-theme="dark"] .sw-rec.is-record,:root[data-theme="dark"] .sw-rec.is-perfect,:root[data-theme="dark"] .sw-rec.is-rankup,:root[data-theme="dark"] .sw-rec.is-mission{
  --rk-bg:#0E1430;--rk-ray:rgba(255,255,255,.04);--rk-glow:rgba(255,255,255,.08);--rk-ink:var(--b-ink);--rk-edge:#05081A;--rk-btn:var(--b-brand);--rk-btn-ink:#ffffff;--rk-btn-d:var(--b-brand-d);}
:root[data-theme="dark"] .sw-rec.is-record,:root[data-theme="dark"] .sw-rec.is-rankup{--rk-ttl:var(--b-sun);}
:root[data-theme="dark"] .sw-rec.is-perfect{--rk-ttl:#7FD9A6;}
:root[data-theme="dark"] .sw-rec.is-mission{--rk-ttl:#AFC6FF;}
.sw-rec.is-record,.sw-rec.is-perfect,.sw-rec.is-rankup,.sw-rec.is-mission{background-color:var(--rk-bg);
  background-image:repeating-conic-gradient(from 0deg at 50% 30%,var(--rk-ray) 0 7.5deg,transparent 7.5deg 15deg);font-family:var(--b-font-body);}
.sw-rec .sw-rec-card{max-width:390px;padding:8px 4px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--rk-ink);overflow:visible;}
.sw-rec .sw-rec-stage{height:auto;min-height:250px;align-items:center;}
.sw-rec .sw-rec-stage::before{content:"";position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;background:var(--rk-glow);}
.sw-rec .sw-rec-rays{display:none;}   /* ⭐ 放射の模様は下地に（上） */
.sw-rec .sw-rec-ring{width:270px;height:270px;margin:-135px 0 0 -135px;}
.sw-rec .sw-rec-ring circle{stroke:#ffffff;stroke-width:5;}
:root[data-theme="dark"] .sw-rec .sw-rec-ring circle{stroke:#7FD9A6;}
.sw-rec .sw-rec-ttl{margin:8px 0 0;font-family:var(--b-font-disp);font-size:46px;font-weight:700;font-synthesis:none;letter-spacing:.04em;line-height:1.25;
  color:var(--rk-ttl);-webkit-text-stroke:9px var(--rk-edge);paint-order:stroke fill;}
.sw-rec.is-record .sw-rec-ttl{font-size:38px;letter-spacing:0;}
.sw-rec.is-rankup .sw-rec-ttl{font-size:40px;letter-spacing:.02em;}
.sw-rec.is-mission .sw-rec-ttl{font-size:32px;letter-spacing:.02em;}
.sw-rec .sw-rec-ttl .sw-ico{font-size:26px;color:var(--rk-ttl);}
.sw-rec .sw-rec-tag{margin-top:6px;padding:3px 14px;border:0;background:var(--b-sun);color:var(--b-c-vs-d);font-size:13px;font-weight:900;}
.sw-rec .sw-rec-game{margin-top:4px;font-size:15px;font-weight:900;color:var(--rk-ink);}
.sw-rec .sw-rec-score{margin-top:4px;font-family:var(--b-font-num);font-size:80px;font-weight:700;line-height:1;color:var(--rk-ink);}
.sw-rec .sw-rec-score small{margin-left:4px;font-family:var(--b-font-body);font-size:22px;font-weight:900;color:var(--rk-ink);}
.sw-rec .sw-rec-prev{display:inline-block;margin-top:10px;padding:6px 16px;border-radius:var(--radius-pill);background:rgba(255,255,255,.7);
  font-size:13px;font-weight:800;color:var(--b-c-vs);}
.sw-rec.is-perfect .sw-rec-prev,.sw-rec.is-mission .sw-rec-prev,:root[data-theme="dark"] .sw-rec .sw-rec-prev{background:rgba(255,255,255,.18);color:var(--rk-ink);}
.sw-rec .sw-rec-ranks{gap:10px;margin-top:16px;}
.sw-rec .sw-rec-arrow{color:var(--rk-ink);opacity:.7;}
.sw-rec .sw-rec-scene{margin:12px auto 0;max-width:300px;padding:8px 8px 6px;border-radius:20px;background:var(--b-paper);color:var(--b-ink);}
.sw-rec .sw-rec-scene canvas{border-radius:12px;}
.sw-rec .sw-rec-scene figcaption{margin-top:4px;font-family:var(--b-font-disp);font-size:15px;font-weight:700;font-synthesis:none;color:var(--b-ink);}
.sw-rec .sw-rec-go{min-height:50px;margin-top:16px;border:2px solid rgba(255,255,255,.6);border-radius:var(--b-radius-lg);background:none;color:#ffffff;font-size:15px;font-weight:900;}
.sw-rec .sw-rec-close{min-height:56px;margin-top:22px;border-radius:var(--b-radius-lg);background:var(--rk-btn);color:var(--rk-btn-ink);box-shadow:0 5px 0 var(--rk-btn-d);
  font-family:var(--b-font-body);font-size:var(--font-size-lg);font-weight:900;letter-spacing:.06em;}
.sw-rec .sw-rec-close:active{transform:translateY(5px);box-shadow:none;opacity:1;}

/* ---------- 学籍番号の登録と確認（_登録.js の #submitOverlay）：藍の地・白い面の上の辺から顔を出すしわけまる（メガホン）・大きい入力欄 ---------- */
#submitOverlay{background-color:var(--b-brand);color:var(--b-ink);font-family:var(--b-font-body);
  background-image:radial-gradient(circle at 0% 8%,rgba(255,255,255,.1) 0 190px,transparent 191px),radial-gradient(circle at 104% 64%,rgba(255,255,255,.08) 0 190px,transparent 191px);}
#submitOverlay > .wrap{align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);}
#submitOverlay .btn-back.is-home{align-self:flex-start;margin-left:-6px;border:0;border-radius:var(--b-radius-md);background:var(--b-hero-btn);color:var(--b-brand);
  box-shadow:0 3px 0 var(--b-brand-d);font-size:var(--font-size-xl);}
:root[data-theme="dark"] #submitOverlay .btn-back.is-home{color:var(--b-on);}
#submitOverlay .btn-back.is-home:active{transform:translateY(3px);box-shadow:none;}
#submitOverlay .sw-mascot.is-reg{position:relative;z-index:2;flex:none;height:170px;margin:20px auto -16px;}
#submitOverlay .panel-result{width:100%;margin:0;padding:26px 20px 16px;border:0;border-radius:28px;background:var(--b-paper);color:var(--b-ink);box-shadow:none;}
#submitOverlay .panel-result h2{margin:0 0 14px;font-size:21px;font-weight:900;line-height:1.9;color:var(--b-ink);}
#submitOverlay .panel-result h2 small{display:block;font-family:var(--b-font-num);font-size:13px;font-weight:600;line-height:1.3;color:var(--b-muted);}
#submitOverlay .field{width:100%;height:64px;border:3px solid var(--b-brand);border-radius:20px;background:var(--b-fixed);color:var(--b-ink);
  font-family:var(--b-font-num);font-size:30px;font-weight:600;letter-spacing:.14em;text-align:center;}
/* ⭐ 2026/10/09 番号の字は画面の幅に合わせて小さくする（幅 381px 以上は 32px のまま）。〔10/05〜10/08〕32px 固定で、幅 360px では9けたが面の右の端から 7px はみ出した（ゲームの中の見た目の監査 6） */
#submitOverlay #subIdConfirmValue{display:flex;align-items:center;justify-content:center;gap:10px;height:72px;margin:0 0 14px;border-radius:20px;background:var(--b-bg);
  font-family:var(--b-font-num);font-size:min(32px,8.4vw);font-weight:600;letter-spacing:.12em;color:var(--b-ink);}
#submitOverlay #subIdConfirmValue::before{content:"";flex:none;width:30px;height:30px;background:var(--b-brand-tx);
  -webkit-mask:var(--sw-ico) center/contain no-repeat;mask:var(--sw-ico) center/contain no-repeat;}
#submitOverlay .btn:not(.btn-back){display:flex;align-items:center;justify-content:center;min-height:56px;margin-bottom:5px;padding:0 20px;border:0;border-radius:var(--b-radius-lg);
  background:var(--b-brand);color:var(--b-on);box-shadow:var(--b-step-brand);font-family:var(--b-font-num);font-size:var(--font-size-lg);font-weight:700;letter-spacing:.06em;}
#submitOverlay .btn:not(.btn-back):active{transform:translateY(5px);box-shadow:none;opacity:1;}
#submitOverlay .btn.btn-ghost{min-height:50px;border:2px solid var(--b-line);background:var(--b-paper);color:var(--b-brand-tx);box-shadow:var(--b-step);}
/* ⭐ 背の低い画面（高さ 700px より低い）：結果の点数とボタンを少し小さく（色の面とボタンが1画面に収まるように） */
@media (max-height:700px){
  .sw-res .scorebig{font-size:96px;}
  .sw-start .btn:not(.btn-back),.sw-res-acts .btn{min-height:50px;}
  .sw-start .btn.btn-ghost,.sw-res-acts .btn.btn-ghost{min-height:44px;}
}

/* ============================================================
   2026/10/09 あゆむさんが本番を見て出した17点（→ docs/UI設計/見た目の見本.md 14章）のうち、5本に共通の見た目
   ============================================================ */
/* カウントダウンのあいだ（_ui.js の counting）：上の色の面だけを見せ、その下（問題・テンキー・ボタン・科目の箱）は隠す（5本とも）。
   ⭐ あゆむさん「上の二つのように、▶︎はじめる　を押してから始まるまでのuiを統一したい」→ 前提「カウントダウン中は、上のゲームの色の帯だけを見せます」（⚠️ 前提の文のまま）で OK。
   ⭐ visibility で隠す（⛔ display:none にしない——高さが変わり、GO のあとに問題の位置がずれる）。
   〔〜10/09〕BOXパズルと精算表はテンキーと GO！、仕訳チャレンジは GO！と「わからない」、科目キャッチは5つの箱、貸借TAは「空欄（?）に入るのは？」が幕の裏に見えていた */
html.sw-counting #game > :not(header),
html.sw-counting #app > :not(.sw-hero),
html.sw-counting #q_screen > .wrap > :not(.sw-hero){visibility:hidden;}

/* 正解表（仕訳チャレンジ・精算表。_ui.js の answerSheet）：科目キャッチの正解表（_app_v7.css の #tableOverlay）と同じ形。
   ⭐ 上に白い見出しの列（「← もどる」・題）、下は空色の地に、問題ごとの白い面。番号の横にミスのバツと正解の丸（下の .sw-marks）。
   ⭐ 2026/10/20 あゆむさん「ミスしたら赤枠は不要」→ 間違えた問題の面のふちを赤くしない（.is-miss のクラスは付いたまま・見た目を持たない）。〔10/09〜10/20〕面のふちを 2px 赤く */
#swSheet{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;}   /* ⚠️ クラスでなく id で書く——.sw-sheet は上の「案B」の当てはめ（色の変数）にも入っていて、クラスで2回書くと検査⑬が止める */
.sw-sheet.hidden{display:none !important;}
.sw-sheet-head{flex:none;position:relative;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 16px;background:var(--b-paper);text-align:center;}
.sw-sheet-head h1{margin:0;font-family:var(--b-font-body);font-size:var(--font-size-md);font-weight:900;letter-spacing:.02em;line-height:1.5;color:var(--b-ink);}
.sw-sheet-back{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:14px;z-index:1;display:flex;align-items:center;height:40px;padding:0 14px 0 10px;
  border:0;border-radius:14px;background:var(--b-bg);box-shadow:0 3px 0 var(--b-line);font-family:var(--b-font-body);font-size:var(--font-size-sm);font-weight:900;color:var(--b-muted);cursor:pointer;}
.sw-sheet-back:active{transform:translateY(3px);box-shadow:none;}
.sw-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;width:100%;max-width:430px;margin:0 auto;padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 20px);}
.sw-sheet-q{margin:0 0 12px;padding:12px 12px 14px;border-radius:var(--b-radius-lg);background:var(--b-paper);}
.sw-sheet-no{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-family:var(--b-font-num);font-size:var(--font-size-sm);font-weight:700;color:var(--b-muted);}
.sw-sheet-mk{color:var(--b-ng);font-size:var(--font-size-md);line-height:1;}
/* ⭐ 2026/10/20 見出しの中のふりがな（BOXパズルの「純資産と利益」）は、ほかのこたえのふりがなと同じ 9px（SW.fitRuby の下限）。〔〜10/20〕.58em＝8.12px */
.sw-sheet-no rt{font-size:9px;}
/* ⭐ 2026/10/13 こたえの印（_ui.js の SW.marks）：バツ＝ミスのストック（赤）・丸＝正解のストック（緑＝ゲームの「せいかい」と同じ色）。合わせて5個まで。
   科目キャッチのこたえ（catch-ta.html）も同じ形。〔11/02〜11/05〕渦巻きと星（山吹）〔10/13〜11/02〕割れたハートと星〔10/11〜10/13〕「ミスN」の札（.sw-sheet-weak）〔10/09〜10/11〕❌（.sw-sheet-mk） */
.sw-marks{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1;}   /* ⭐ 2026/11/05 小さく（あゆむさん「もう少しサイズ小さく、線ほそく」）。〔11/05 の昼〕16px・間 2px〔〜11/05〕間 1px */
.sw-marks .sw-ico{vertical-align:0;}
.sw-mark-miss{color:var(--b-ng);}
.sw-mark-star{color:var(--b-ok);}

/* ⭐ こたえの検索欄（2026/10/11・_ui.js の SW.find）。見出しの列のすぐ下・スクロールしない */
.sw-find{flex:none;position:relative;width:100%;max-width:430px;margin:0 auto;padding:10px 14px 0;}
/* ⭐ 2026/10/11 欄の左の虫眼鏡（あゆむさん「ひらがなで検索の前に虫眼鏡のアイコンつけたい」）。欄の中に置き、字はその右から始める */
.sw-find-ico{position:absolute;left:28px;top:32px;transform:translateY(-50%);font-size:20px;color:var(--b-muted);pointer-events:none;}
.sw-find-in{display:block;width:100%;height:44px;padding:0 14px 0 44px;border:2px solid var(--b-line);border-radius:var(--b-radius-md);background:var(--b-paper);
  font-family:var(--b-font-body);font-size:var(--font-size-md);font-weight:700;color:var(--b-ink);-webkit-appearance:none;appearance:none;}
.sw-find-in::placeholder{color:var(--b-muted);font-weight:700;}
.sw-find-in:focus{outline:none;border-color:var(--b-brand);}
.sw-find-none{margin:12px 0 0;text-align:center;font-family:var(--b-font-body);font-size:var(--font-size-sm);font-weight:800;color:var(--b-muted);}
.sw-find-none[hidden],.sw-sheet-q[hidden],.ak-acc[hidden],.ak-group[hidden],.ak-list[hidden],.ak-sub[hidden]{display:none !important;}

/* 「まだ書いていない」を、ゆっくり点滅させる（濃さだけ・大きさは変えない）。
   ⭐ BOXパズルの入力中のマス（bspl-puzzle.html の .slot.sel）と、精算表の表の下の「◯か所」（worksheet.html の .counts td.is-need）。
   ⭐ 動きを減らす設定（iPhone の「視差効果を減らす」）でも点滅だけは残す——上の「@media (prefers-reduced-motion:reduce){*{animation:none !important}}」は全部を止めるので、
      ここは同じ !important で、より強い指定（クラスつき）にして勝たせる。⚠️ 濃さが変わるだけで、ものは動かない */
@keyframes swBlink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- 先生からのおめでとう（_先生から.js の .sw-tm・2026/10/24）----------
   ⭐ 形は見た目の見本 16章（docs/UI設計/モック_先生からのおめでとう.html）：ゲームの色の地と放射の線・白い便箋・いちばん大きい字の「先生から」の帯・朱のはんこ。
   ⭐ 自分のお祝い（上の sw-rec）と見た目を分ける（あゆむさん「ベストスコアや全問正解の時の画面とあまり雰囲気が変わらないから、それと見た目が変わるような感じにしてほしい」）。
   ⭐ --c・--cd（ゲームの色とその濃い色）は _先生から.js が入れる。⭐ はんこは朱（--shu）＝教師用ダッシュボードで先生が押した花丸と同じ色と形。
   ⭐ 夜は画面いっぱいの明るい色を出さない（ナイトモードの決まり・sw-rec と同じ）→ 夜の地は暗い紺、便箋は夜の面の色。
   ⚠️ 名前は全部 sw-tm で始める。⚠️ 重なり順 1000（sw-rec と同じ・同時には出さない＝_先生から.js が待つ） */
:root{--sw-tm-rise:sw-tm-rise .45s cubic-bezier(.2,1.2,.4,1) both;--sw-tm-stamp:sw-tm-stamp .38s .5s cubic-bezier(.3,1.6,.5,1) both;}
@media (prefers-reduced-motion:reduce){:root{--sw-tm-rise:none;--sw-tm-stamp:none;}}
@keyframes sw-tm-rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@keyframes sw-tm-stamp{from{transform:scale(1.9) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(-10deg);opacity:1}}
.sw-tm{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;padding:96px 20px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  --tm-bg:var(--c);--tm-ray:rgba(255,255,255,.12);
  background-color:var(--tm-bg);background-image:repeating-conic-gradient(from 0deg at 50% 40%,var(--tm-ray) 0 7.5deg,transparent 7.5deg 15deg);
  font-family:var(--b-font-body);}
:root[data-theme="dark"] .sw-tm{--tm-bg:#0E1430;--tm-ray:rgba(255,255,255,.04);}
.sw-tm *{box-sizing:border-box;}
.sw-tm-card{position:relative;width:100%;max-width:340px;margin:auto 0 0;padding-top:0;border-radius:20px;background:var(--b-paper);color:var(--b-ink);
  box-shadow:0 8px 0 var(--cd);animation:var(--sw-tm-rise);}
/* ⭐ 先生からの帯：画面でいちばん大きい字（あゆむさん「先生からのメッセージ、っていう部分をもう少し強調したい」） */
.sw-tm-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:20px 20px 0 0;background:var(--cd);color:#ffffff;text-align:left;}
.sw-tm-ico{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#ffffff;color:var(--cd);display:flex;align-items:center;justify-content:center;}
.sw-tm-ico svg{width:28px;height:28px;fill:currentColor;}
.sw-tm-t1{display:block;font-size:30px;font-weight:700;line-height:1.2;letter-spacing:.04em;}
.sw-tm-t2{display:block;margin-top:2px;font-size:16px;font-weight:700;line-height:1.4;}
/* 便箋の罫線 */
.sw-tm-body{padding:20px 20px 28px;text-align:center;border-radius:0 0 20px 20px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--b-line) 39px 40px);background-position:0 12px;}
/* はんこ（朱）。押される動き（大きく傾いたところから、ポンと置かれる） */
.sw-tm-stamp{display:block;width:150px;height:150px;margin:0 auto;color:var(--shu);transform:rotate(-10deg);animation:var(--sw-tm-stamp);}
.sw-tm-stamp.is-hanamaru path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;}
.sw-tm-msg{margin-top:12px;font-size:26px;font-weight:700;line-height:1.5;color:var(--b-ink);}
.sw-tm-msg span{display:block;}
.sw-tm-game{display:inline-flex;align-items:baseline;gap:10px;margin-top:14px;padding:6px 16px;border-radius:var(--radius-pill);background:var(--c);color:#ffffff;}
.sw-tm-gn{font-size:15px;font-weight:700;}
.sw-tm-sc{font-size:22px;font-weight:700;font-feature-settings:"tnum";}
.sw-tm-sc small{margin-left:2px;font-size:14px;}
/* しわけまる（扇子＝_新記録.js の Best Score! と同じ絵）。小さく、便箋の右上の縁から顔を出す。3コマの絵の1コマ目で止める */
.sw-tm-mascot{position:absolute;right:0;top:-92px;width:116px;height:100px;background:url("mascot/celebrate.webp") no-repeat 0 0/300% 100%;}
.sw-tm-close{flex:0 0 auto;width:100%;max-width:340px;min-height:56px;margin:28px 0 auto;border:0;border-radius:var(--b-radius-lg);background:#ffffff;color:var(--cd);
  box-shadow:0 5px 0 var(--cd);font-family:var(--b-font-body);font-size:var(--font-size-lg);font-weight:700;letter-spacing:.06em;}
.sw-tm-close:active{transform:translateY(5px);box-shadow:none;}
.sw-tm-close:focus-visible{outline:none;box-shadow:var(--shadow-focus);}