@charset "utf-8";
/* =====================================================================
おばけ算数 － 見た目（0/6）：デザイントークン
---------------------------------------------------------------------
出典 おばけ算数 デザイン設計書 v1.0.1 ／ デザイントークン v1.0.1
版 20260806-tokens-v1.0.2-theme
置き場 リポジトリ直下。 は style-base.css より前（＝1番目）。
既存5本の並び順は入れ替えない。前に足すだけ。
★ このファイルは「名前を用意するだけ」です。
セレクタも、色や大きさの指定も、1つも書いていません。
読み込んでも見た目と動きは一切変わりません。
名前はすべて --t- で始めており、既存名とぶつかりません。
20260806-theme での変更
・ワールド色の切り替えを [data-world] から [data-world-theme] へ改名。
index.html では data-world が既にワールド選択ボタンの識別子
（data-world="1" / "2"）として使われており、値の体系が違うため
このままでは色が当たらなかった。役割を分ける：
data-world 既存のワールド選択処理（変更しない）
data-world-theme 画面全体の色テーマ（body に付ける）
20260806-w1 での変更
・第1ワールド 深い森を実測値で登録（3-1）。手順は水幻郷と同じ
v1.0.0 からの変更
・灯り2色（100/300）と木・お皿4色を追加
・全体共通の夜色を廃止（night-900 / forest-800 / moss-600 /
mist-300 / yokai-indigo-600 を削除）。地の色はワールド別へ
・水幻郷を実測値で登録。[data-world] で切り替える形にした
・キャラクターの表示サイズを追加
・「一度だけのぽん」を追加。強いバウンスは禁止
・画面下12%は空白予約ではなく注意帯。実余白の式を変更
===================================================================== */
:root{ --css-0-loaded:1; }
/* =====================================================================
1. 基礎トークン
===================================================================== */
:root{
/* --- 1-1. 文字 -----------------------------------------------------
Zen Maru Gothic / 500・700・900。
いまは index.html の で Google Fonts から取っている。
同梱方式へ移すときは ①assets/fonts/ に woff2 を置く
②下の @font-face のコメントを外す ③Google Fonts の を消す。
--t-font-ui の中身は変えない。 */
--t-font-ui: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
--t-font-read: 'BIZ UDPGothic', 'Hiragino Maru Gothic ProN', sans-serif;
--t-fw-body: 500;
--t-fw-bold: 700;
--t-fw-number: 900;
--t-lh-ui: 1.35;
--t-lh-read: 1.55;
/* @font-face{font-family:'Zen Maru Gothic';font-weight:500;font-display:swap;
src:url('assets/fonts/ZenMaruGothic-Medium.woff2') format('woff2');}
@font-face{font-family:'Zen Maru Gothic';font-weight:700;font-display:swap;
src:url('assets/fonts/ZenMaruGothic-Bold.woff2') format('woff2');}
@font-face{font-family:'Zen Maru Gothic';font-weight:900;font-display:swap;
src:url('assets/fonts/ZenMaruGothic-Black.woff2') format('woff2');} */
/* --- 1-2. 共通色（墨・紙・灯り・木とお皿）---------------------------
ワールドが変わっても固定する。設計書 4.1。
★ 全体共通の夜色は持たない。地の色は第3節のワールド別を使う。 */
--t-ink-900: #1F2D2A; /* 主要文字・輪郭・押下時の深色 */
--t-paper-050: #FAF5E8; /* 主要パネル・墨の反転色 */
--t-paper-100: #F2E6CC; /* 二次パネル・古紙 */
--t-lantern-100: #FFF1C5; /* 灯りの外側の淡いにじみ。文字面に単独で使わない */
--t-lantern-300: #FFD77A; /* 灯りの明るい芯・局所ハイライト */
--t-lantern-500: #F2B84B; /* 主ボタン・現在地・正の因果 */
--t-lantern-700: #9A5B10; /* 灯りの縁・小さな強調文字 */
--t-wood-100: #F6E7C8; /* 木・お皿の明部 */
--t-wood-300: #C9A971; /* 木・お皿の基色 */
--t-wood-600: #9A7440; /* 木目・内側の影 */
--t-wood-800: #7A5A31; /* 木・お皿の輪郭・最深部 */
--t-clay-500: #C9785F; /* 余分・戻す。叱る色ではない */
--t-focus-400: #79B7C6; /* 選択外周・静かな注目 */
/* --- 1-3. 余白（4pxグリッド）--------------------------------------- */
--t-space-1: 4px;
--t-space-2: 8px;
--t-space-3: 12px;
--t-space-4: 16px;
--t-space-6: 24px;
--t-space-8: 32px;
--t-space-12: 48px;
--t-space-16: 64px;
/* --- 1-4. 角丸（UIはこの4つだけ。絵の中の曲線は対象外）------------- */
--t-radius-s: 12px;
--t-radius-m: 18px;
--t-radius-l: 24px;
--t-radius-pill: 999px;
/* --- 1-5. 線と影 ---------------------------------------------------- */
--t-border: 2px;
--t-shadow-1: 0 4px 10px rgba(23,43,50,.18); /* 通常のパネル・札 */
--t-shadow-2: 0 8px 18px rgba(23,43,50,.26); /* 持ち上げた物だけ */
/* --- 1-6. 時間とイージング ------------------------------------------
幅がある項目は中央付近を代表値にした。 */
--t-dur-press: 90ms;
--t-dur-release: 120ms;
--t-dur-lift: 100ms;
--t-dur-snap: 180ms; /* 140–200 */
--t-dur-return: 220ms; /* 180–240 */
--t-dur-success: 500ms; /* 350–650 */
--t-dur-screen: 320ms; /* 250–400 */
--t-dur-move: 950ms; /* 800–1100 */
--t-dur-rescue: 1600ms; /* 1200–2000 */
--t-ease-standard: cubic-bezier(.20,.80,.20,1);
/* 「一度だけのぽん」。使えるのは 正しい吸着／小正解／救出の初回だけ。
画面遷移・無効戻り・常時ループ・マップ移動には使わない。
行き過ぎ5%以内、拡大1.05倍以内、往復1回まで。 */
--t-ease-pop-once: cubic-bezier(.22,1.08,.36,1);
--t-pop-scale: 1.05;
/* --- 1-7. 押せる場所 ------------------------------------------------
48pxは補助的・低頻度の操作だけの下限。
章開始・次へ・決定・戻るなどの主要導線には使わない。 */
--t-tap-min: 48px;
--t-tap-primary: 56px; /* 子どもの主要操作。タブレットは64px */
/* --- 1-8. つかむ・置く ----------------------------------------------- */
--t-drag-visual: 56px; /* つかむ物の見た目の最小 */
--t-drag-hit: 72px; /* つかむ物の当たり判定の最小 */
--t-drop-target: 88px; /* 置き先の最小 */
--t-drag-lift: 28px; /* 指先より上へ逃がす量。タブレットは36px */
--t-drag-scale: 1.06;
--t-snap-radius: 32px; /* 28–36 */
/* --- 1-9. キャラクターの表示サイズ ------------------------------------
救出対象は「高さpx」と「画面高に対する%」の両方を満たす。
Character Region に収まる範囲で大きいほうを採る。 */
--t-hero-h-min: 144px;
--t-hero-h-max: 220px;
--t-hero-vh-min: 22%; /* 縦画面 */
--t-hero-vh-max: 32%;
--t-hero-vh-min-land: 30%; /* 横画面 */
--t-hero-vh-max-land: 44%;
--t-face-min: 44px; /* 目と口を含む顔の領域 */
--t-companion-min: 64px; /* おとも。タブレットは80px */
--t-companion-scale: .42; /* 救出対象の 0.35–0.50 */
--t-special-scale: 2.8; /* 区切り章 2.5–3.2 */
/* --- 1-10. 画面の割り当て -------------------------------------------- */
--t-safe-width: 70%; /* 重要物を置く中央幅 */
--t-region-story: 26%; /* 18–34 行き先・世界の変化 */
--t-region-play: 45%; /* 40–50 操作域 */
--t-caution-zone: 12%; /* 画面下の注意帯。空白予約ではない */
}
/* =====================================================================
2. 意味別トークン
===================================================================== */
:root{
/* --- 2-1. 色の役割 --------------------------------------------------- */
--t-c-text-on-paper: var(--t-ink-900);
--t-c-text-on-world: var(--t-paper-050);
--t-c-outline: var(--t-ink-900); /* 共通UIの輪郭は墨 */
--t-c-surface: var(--t-paper-050);
--t-c-surface-2: var(--t-paper-100);
--t-c-wood: var(--t-wood-300);
--t-c-wood-edge: var(--t-wood-800);
--t-c-accent: var(--t-lantern-500);
--t-c-accent-core: var(--t-lantern-300);
--t-c-accent-haze: var(--t-lantern-100);
--t-c-accent-edge: var(--t-lantern-700);
--t-c-caution: var(--t-clay-500);
--t-c-focus: var(--t-focus-400);
/* --- 2-2. 間の役割 --------------------------------------------------- */
--t-gap-tight: var(--t-space-2); /* 8 くっついて1つに見えてよい */
--t-gap-control: var(--t-space-3); /* 12 主要タップ同士の最小 */
--t-gap-group: var(--t-space-6); /* 24 同じまとまりの中 */
--t-gap-section: var(--t-space-8); /* 32 まとまりとまとまり */
--t-gap-edge: var(--t-space-4); /* 16 画面端から */
--t-gap-risky: var(--t-space-4); /* 16 押し間違いが重い操作の間隔 */
/* --- 2-3. 文字の役割 -------------------------------------------------
子ども画面は最終描画16px未満を禁止。
図鑑の名前・章名・行動ボタンは18px以上。clamp の最小値も同じ。 */
--t-fs-number: clamp(56px, 14vw, 80px); /* 問題の中心数字 */
--t-fs-button: clamp(22px, 5.6vw, 24px);
--t-fs-instruction: clamp(20px, 5.2vw, 24px); /* 短い指示。最大2行 */
--t-fs-bubble: clamp(18px, 4.8vw, 22px); /* 吹き出し */
--t-fs-name: clamp(18px, 4.6vw, 22px); /* 図鑑の名前・章名 */
--t-fs-label: clamp(16px, 4.2vw, 18px); /* 補助ラベルの下限 */
--t-fs-guardian: 16px;
/* --- 2-4. 画面上下の位置 ---------------------------------------------
下端は「12%を空ける」ではなく、実余白を確保したうえで
操作域が注意帯へ入ってよい。ただし小さな操作や
唯一の確定操作をそこへ単独で置かない。 */
--t-inset-top: max(env(safe-area-inset-top, 0px) + var(--t-space-2),
clamp(40px, 8.5vh, 96px));
--t-inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--t-space-4));
--t-inset-side: max(env(safe-area-inset-left, 0px), var(--t-gap-edge));
/* --- 2-5. 状態 ------------------------------------------------------- */
--t-state-pressed-scale: .96;
--t-state-lift: 4px; /* 選択時に持ち上げる量（2–4px） */
--t-focus-ring: 3px;
--t-focus-offset: 2px;
--t-disabled-sat: .70;
}
/* --- 2-6. タブレット（設計書 10.2）------------------------------------
触る物と間隔だけ大きくする。文字は控えめ。画面全体の一律拡大はしない。 */
@media (min-width: 768px){
:root{
--t-tap-primary: 64px;
--t-drag-visual: 62px; /* ×1.10 */
--t-drag-hit: 81px; /* ×1.12 */
--t-drop-target: 99px; /* ×1.12 */
--t-drag-lift: 36px;
--t-companion-min: 80px;
--t-hero-h-min: 176px;
--t-hero-h-max: 280px;
--t-gap-group: 28px; /* ×1.15 */
--t-gap-section: 37px; /* ×1.15 */
}
}
/* --- 2-7. 動きを減らす設定 -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
:root{
--t-ease-pop-once: cubic-bezier(.20,.80,.20,1);
--t-pop-scale: 1;
}
}
/* =====================================================================
3. ワールド別トークン
地の色だけをワールドごとに替える。紙・墨・灯り・木は替えない。
正は「承認済み背景画像を実装と同じフィルタで表示した後の色」。
背景画像をトークンへ合わせて再生成・色調変更しない。
切り替えは body の data-world-theme。ワールド選択ボタンの
data-world とは別物なので混ぜない。
===================================================================== */
/* --- 3-1. 第1ワールド 深い森 ------------------------------------------
2026/8/6 実測。背景画像そのものではなく、実機（iPad Air 5）の
章マップ3画面のスクリーンショットから抽出した＝実際に見える色。
役割ごとに条件を変えて拾い、キャラクターの色は除いている。
deep 明るさ下位2%
base 明るさ15〜38%
mid 彩度上位30% かつ 青優位 かつ 明るさ60〜88%
light 明るさ上位3% かつ 彩度0.12以上
stone 彩度下位25% かつ 明るさ55〜88%
window 暖色上位0.3% かつ 明るさ上位2%
水幻郷と比べると全体に暗く彩度が低く、灯りだけ橙が強い。 */
[data-world-theme="deep-forest"]{
--t-world-deep: #04091C; /* 最深部・木立の奥・草の陰 */
--t-world-base: #0E1428; /* 夜空と森の主色 */
--t-world-mid: #1C245B; /* 中景・水たまり・遠い木立 */
--t-world-light: #A5C2CC; /* 水面の反射・霧・月あかり */
--t-world-stone: #2D2C2E; /* 石畳・岩・鳥居 */
--t-world-window: #E5BB70; /* 提灯とランタンの芯 */
}
/* --- 3-2. 第2ワールド 水幻郷 ------------------------------------------
#stageBg の saturate(.75) / brightness(.9) / contrast(1.06) 適用後、
実画面から抽出した値。 */
[data-world-theme="water-phantom"]{
--t-world-deep: #02072B; /* 最深部・木立の奥・草の陰 */
--t-world-base: #0A1560; /* 夜空と水の主色 */
--t-world-mid: #333C86; /* 中景・屋根・遠い岸 */
--t-world-light: #A0ACD2; /* 水面の反射・霧 */
--t-world-stone: #3E374A; /* 石橋・石畳 */
--t-world-window: #EDE5D7; /* 窓と扉の内側の明かり */
}
/* =====================================================================
4. 章別エイリアス
章のCSSはここを見る。生の数値は書かない。
※まだどこからも使われていない（未接続）。
===================================================================== */
:root{
/* --- 4-1. 第13章 いっためん（合成の盤面）----------------------------- */
--t-ch13-top: var(--t-inset-top);
--t-ch13-bottom: var(--t-inset-bottom);
--t-ch13-side: var(--t-inset-side);
--t-ch13-hero-h: clamp(144px, 27vh, 220px);
--t-ch13-say-gap: var(--t-gap-group); /* おばけと ことば */
--t-ch13-band-gap: var(--t-gap-section); /* まとまりと 盤面 */
--t-ch13-row-gap: var(--t-gap-control); /* 盤面の行と行 */
--t-ch13-part-h: var(--t-drag-visual); /* 部品の見た目の高さ */
--t-ch13-part-hit: var(--t-drag-hit); /* 部品の当たり判定 */
--t-ch13-slot-hit: var(--t-drop-target); /* 置き先の当たり判定 */
--t-ch13-goal-fs: var(--t-fs-number);
--t-ch13-say-fs: var(--t-fs-bubble);
--t-ch13-note-fs: var(--t-fs-label);
}