/* ============================================================
   jelly-bridge.css — Jelly UI のトークンを okane の配色へ橋渡しする
   ============================================================

   Jelly UI(www/lib/jelly-ui/)は自前のトークン一式(--jelly-*)を
   `@layer jelly` の中の :root へ流し込む。こちらは**レイヤーに入れずに**
   書くので、同じ :root でも常にこちらが勝つ
   (レイヤー無しのスタイルは全レイヤーより優先される)。
   したがって tokens.css の役割色を差し込むだけで、ライト/ダークの切替
   (端末追従・設定画面の明示指定の両方)がそのまま Jelly 側にも伝わる。

   読み込み順は tokens.css → app.css → jelly-bridge.css(index.html)。

   ※ 色の**実値**は tokens.css にしか置かない。ここは対応表だけにする。
      (アートガイド §2 の色を2か所に書くと Hero のプロンプトとずれる)

   ※ 素の <button> のままにしてある部品(ゲームHUDの戻る・設定のセグメント・
      図鑑/ツアーのカード)は app.css 側が `button.xxx` で塗っている。
      タグで区別しているので、ここの指定とは衝突しない。
   ============================================================ */

:root {
  /* --- 書体 ---
     okane は本文も見出しも --font-ui の1本(tokens.css)。Jelly の既定は
     丸ゴシックなので、指定しないと操作部品だけ字面が変わる。 */
  --jelly-font-display: var(--font-ui);
  --jelly-font-text:    var(--font-ui);
  --jelly-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- 面 ---
     Jelly の "surface" は札の地。okane は「紙の上に置いた札」ではなく
     「盤の上のコイン」の意匠なので、地は --bg-elev(白/濃紺)に寄せる。 */
  --jelly-color-background-default:          var(--bg);
  --jelly-color-background-surface:          var(--bg-elev);
  --jelly-color-background-muted:            var(--bg-elev);
  --jelly-color-background-neutral:          var(--bg-elev);
  --jelly-color-background-neutral-emphasis: var(--fg-muted);
  --jelly-color-background-white:            var(--bg-elev);

  /* --- 色の役割 ---
     Jelly は色名(azure/amber/mint/rose)で variant を持つ。okane の
     パレット(アートガイド §2)へ次のとおり読み替える:
       accent = ゴールド(主役・コイン) / azure = スカイ(リンク・地図)
       amber  = ゴールド(季節色は持たないので主色に寄せる)
       mint   = マネーグリーン(成功・進行) / rose = コーラル(危険)
     ※ accent は **--accent ではなく --gold** を使う。--accent は
        「ライト背景に置く文字色」用に暗く倒してあり(tokens.css)、
        面として塗ると主役ボタンが今の見た目より沈むため。
        面に --gold・字に --on-accent は .menu__btn--primary と同じ組み合わせ。 */
  --jelly-color-background-accent: var(--gold);
  --jelly-color-background-azure:  var(--sky);
  --jelly-color-background-amber:  var(--gold);
  --jelly-color-background-mint:   var(--money-green);
  --jelly-color-background-rose:   var(--coral);

  /* --- 文字 --- */
  --jelly-color-foreground-default:     var(--fg);
  --jelly-color-foreground-muted:       var(--fg-muted);
  --jelly-color-foreground-on-accent:   var(--on-accent);
  --jelly-color-foreground-on-emphasis: var(--bg);
  --jelly-color-foreground-on-neutral:  var(--fg);
  --jelly-color-foreground-on-white:    var(--fg);

  /* --- 罫・フォーカス ---
     枠色は .menu__btn と同じ --line。フォーカスの輪はゴールドだと地と
     同化する場面があるので、可視性の高いスカイにする。 */
  --jelly-color-border-default: var(--line);
  --jelly-color-border-focus:   var(--sky);

  /* 影は rgba(var(--jelly-color-shadow), α) の形で使われるので R,G,B を渡す。
     tokens.css の --shadow-* と同じネイビー(#1E2A44 = 30,42,68)。 */
  --jelly-color-shadow: 30, 42, 68;
}

/* ダークでは影をネイビーではなく黒にする(濃紺の地に濃紺の影は見えない) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --jelly-color-shadow: 0, 0, 0; }
}
:root[data-theme="dark"] { --jelly-color-shadow: 0, 0, 0; }

/* --- 寸法 ---
   既定(62px / 48px)は okane のメニューには大きい。従来の .menu__btn と
   同じ 52px に揃える。アイコンボタンは 44px(タップ最小・app.css と同値)。
   (!) 寸法トークンは Jelly 側が **shadow の :host** に既定値を書いている
   ので、:root に置いても継承値が負ける。`:host`(0,1,0) より強い
   `jelly-button[size]`(0,1,1) の形でホスト要素に直接当てること。 */
jelly-button[size] {
  --jelly-button-height: 52px;
  --jelly-button-radius: var(--radius-md);
}
/* TOP メニューだけは見出し + 説明の2行なので背を伸ばす(2026-09-01)。
   (!) `[size]` を足す理由は上と同じ(Jelly が :host に既定値を書いている)。
   (!) auto ではなく実数で持つ。翻訳で説明が2行に折り返す言語があり、
       `min-height` 的な効き方をしてほしいので `--jelly-button-height` は
       余裕を見た値にし、あふれは中の .menu__stack が縦に伸びて吸う。 */
jelly-button.menu__btn[size] {
  --jelly-button-height: 66px;
}
/* 主役(スタート)だけ背を伸ばし字を大きくする(2026-09-14 オーナー指示
   「初めての人が何も意識せず始められるように、ボタンを大きく目立つように」)。
   (!) 2026-09-01 の「寸法で差を付けない」はこの指示で覆った(CLAUDE.md)。
   (!!) **`.menu >` で TOP に限定する。** `.menu__btn--primary` は結果カードの
        「つぎの国へ」「広告を見て続ける」にも付いていて、限定しないとそちらも 84px になる
        (advisor 指摘・320x568 でカードが溢れる)。 */
.menu > jelly-button.menu__btn--primary[size] {
  --jelly-button-height: 84px;
  --jelly-button-font-size: 1.375rem;
}
jelly-icon-button[size] {
  --jelly-icon-button-size: 44px;
  --jelly-icon-button-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------
   個別の当て込み
   ------------------------------------------------------------------ */

jelly-button {
  display: inline-block;
  max-inline-size: 100%;
}
jelly-button[block] { display: block; }

/* (!) 画面の出し分けは hidden 属性でやっている(#btn-next / #btn-share /
   #btn-continue)。app.css の `[hidden] { display: none !important }` が
   上の display 指定に勝つので消えるが、!important 頼みにすると
   app.css を整理した時に静かに壊れる。ここでも明示しておく。 */
jelly-button[hidden],
jelly-icon-button[hidden] { display: none; }

/* 入力欄の隣に置く保存ボタン(設定・デイリーのランキング表示名)。
   Jelly の既定 min-width は 168px あって、375px 幅の端末では入力欄が
   131px まで潰れる(実測)。タップ最小を保ったまま詰める。
   ※ 寸法トークンの当て方は上の「寸法」節と同じ理由で `[size]` を足す。 */
jelly-button.namefield__save[size] {
  --jelly-button-min-width: 88px;
  --jelly-button-height: 44px;
  --jelly-button-font-size: 0.8125rem;
}

/* 淡いボタン(旧 .menu__btn 相当)。面は bg-elev、字は本文色。 */
jelly-button[variant="white"] {
  --jelly-fill:  var(--bg-elev);
  --jelly-label: var(--fg);
}

/* 危険操作(進捗リセット)。設定画面の .set-btn--danger 相当。 */
jelly-button[variant="rose"] {
  --jelly-fill:  var(--coral);
  --jelly-label: #FFFFFF;
}

/* TOP メニューの色分け(2026-09-01 オーナー指示
   「全てのボタンに色を付けて / ワールドツアー以外も死に機能にしたくない」)。

   ワールドツアー = variant="accent"(ゴールド)のまま。残り3つに面の色を与える。
   (!) **variant を azure/mint/rose に変えないこと。** 上の色マップは原色
       (--sky / --money-green / --coral)を向いていて、面にすると字が読めない。
       rose は「危険操作」の意味も背負っているので流用しない。
       variant は "white" のままにして、ここで --jelly-fill / --jelly-label だけ差し替える。
   (!) **この3規則は上の `jelly-button[variant="white"]` より後ろに置くこと。**
       `jelly-button.menu__btn--free` は (0,1,1) で variant 規則と同じ詳細度なので、
       勝敗は**記述順**で決まる。前に置くと白のままになる。
   (!) 主役の見分けは「先頭にあること」と「登場後の nudge」で足りている。
       影や寸法で差を付け足さない。 */
jelly-button.menu__btn--free  { --jelly-fill: var(--sky-bright);   --jelly-label: var(--on-accent); }
jelly-button.menu__btn--daily { --jelly-fill: var(--coral-bright); --jelly-label: var(--on-accent); }
jelly-button.menu__btn--zukan { --jelly-fill: var(--green-bright); --jelly-label: var(--on-accent); }
/* 結果カードの「結果をシェア」(2026-09-14)。白い脇役に混ぜず色を付けて「押す価値のある行き先」に
   見せる。(!!) 上の3色と同じく **`[variant="white"]` より後ろ**に置くこと(同じ詳細度で後勝ち。
   最初は「寸法」の節に書いて白のままだった = 実測で気づいた) */
jelly-button.menu__btn--share { --jelly-fill: var(--sky-bright); --jelly-label: var(--on-accent); }

/* アイコンボタン(TOP の 📊 ⚙ / ページの ←)。地は透明にして題字の邪魔をしない。
   Jelly の丸札をそのまま出すと、Hero の中で2つ目の見出しのように見える
   (2026-09-22 Hero 化: 📊 は金の丸札のままだと主役ボタンと金が2つ並ぶので透明に揃えた)。 */
.hero-top__action,
.pagebar jelly-icon-button {
  --jelly-fill:  transparent;
  --jelly-label: var(--fg);
}

/* ------------------------------------------------------------------
   まだ定義されていない間の見え方(:defined)
   ------------------------------------------------------------------
   jelly.js は module なので、classic script の app.js より**後**に走る。
   その数十msのあいだ(と、カスタム要素が使えない古い WebView では恒久的に)
   素の inline 要素として出てしまう。旧 .menu__btn 相当を当てておくことで
   「Jelly が読めない ＝ 操作できない」にはならないようにする。
   ※ 実際に Android 7 相当の WebView で試す機会は無いので、ここは
     **必ず残す**こと(消すと最悪の場合ボタンが行方不明になる)。 */
jelly-button:not(:defined),
jelly-icon-button:not(:defined) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 52px;
  padding: var(--space-sm) var(--space-lg);
  color: var(--fg);
  background: var(--bg-elev);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
jelly-button:not(:defined)[block] { display: flex; width: 100%; }
jelly-button:not(:defined)[variant="accent"] {
  color: var(--on-accent);
  background: var(--gold);
  border-color: var(--gold-deep);
}
jelly-button:not(:defined)[variant="rose"] {
  color: #FFFFFF;
  background: var(--coral);
  border-color: var(--coral);
}
/* (!) TOP の色分けもここに要る。Jelly が読めない間だけ「全部白」に戻ると、
   いちばん見られる画面で今回の変更が消える(2026-09-01 の色分けと対) */
jelly-button:not(:defined).menu__btn--free {
  color: var(--on-accent); background: var(--sky-bright);   border-color: var(--sky-bright);
}
jelly-button:not(:defined).menu__btn--daily {
  color: var(--on-accent); background: var(--coral-bright); border-color: var(--coral-bright);
}
jelly-button:not(:defined).menu__btn--zukan {
  color: var(--on-accent); background: var(--green-bright); border-color: var(--green-bright);
}
jelly-button:not(:defined).menu__btn--share {
  color: var(--on-accent); background: var(--sky-bright);   border-color: var(--sky-bright);
}
.menu > jelly-button:not(:defined).menu__btn--primary { min-height: 84px; font-size: 1.375rem; }
jelly-icon-button:not(:defined) {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-pill);
  font-size: 1.375rem;
}
/* 未定義の間は label 属性が読み上げに出ないので、せめて字は見えるようにする
   (jelly-icon-button は本文に絵文字を入れてある)。 */

/* 動きを減らす設定。Jelly は canvas で常時ぷるぷるするが、本体が
   reducedMotion を毎フレーム見て自分で止める。こちらは影だけ落としておく。 */
@media (prefers-reduced-motion: reduce) {
  :root { --jelly-shadow-raised: none; --jelly-shadow-overlay: none; }
}