/* ============================================================
   fgl-felt.css  ―  「フェルト＋看板」画面スタイル（割って！九九ポーカーのRUN選択・ランキング・名前登録・設定の見た目）
   - メインカラーを1色指定するだけで、背景・看板・板・縁取り・影の色がそろう
   - 色は --fx-main に指定（例: #1f7a58＝割って！九九ポーカーの緑）。ほかの色は、メインカラーから自動で作る
   - ゴールド・赤・青・オレンジのボタン／選択中の金色は、どのメインカラーでも同じ（意味のある色なので固定）
   - 全クラス名は fx- から始まるので、ほかのCSSとぶつからない。使うゲームだけが読み込む（読み込まなければ何も変わらない）

   使い方:
     <link rel="stylesheet" href="fgl-felt.css">
     <div class="fx-screen" style="--fx-main:#1f7a58">          ← 画面全体（1280×720の中に置く）
       <div class="fx-top">
         <button class="fx-btn red">◀ もどる</button>
         <div class="fx-plaque">設定</div>                      ← 看板の見出し（中央）
         <button class="fx-btn blue">🏆 ランキング</button>      ← 右側（なくてもよい）
       </div>
       <div class="fx-board" style="width:860px">                 ← 濃い色の板
         <div class="fx-label">言語</div>
         <div class="fx-row">
           <button class="fx-card">かんたん</button>
           <button class="fx-card on"><em class="fx-pick">▶ 選択中</em>日本語</button>
         </div>
       </div>
     </div>
   ============================================================ */

.fx-screen {
    --fx-main: #1f7a58;
    /* メインカラーから作る色（color-mix を使う：Chrome 111+ / Safari 16.2+ / Firefox 113+） */
    --fx-deep:   color-mix(in srgb, var(--fx-main) 70%, black);    /* 背景の中間 */
    --fx-darker: color-mix(in srgb, var(--fx-main) 46%, black);    /* 背景の暗い側 */
    --fx-light:  color-mix(in srgb, var(--fx-main) 60%, white);    /* 背景の中央の光 */
    --fx-edge:   color-mix(in srgb, var(--fx-main) 34%, black);    /* 縁取り */
    --fx-shadow: color-mix(in srgb, var(--fx-main) 22%, black);    /* ボタン・板の下の影 */
    --fx-plaque-a: color-mix(in srgb, var(--fx-main) 88%, white);  /* 看板の上 */
    --fx-plaque-b: color-mix(in srgb, var(--fx-main) 60%, black);  /* 看板の下 */
    --fx-soft:   color-mix(in srgb, var(--fx-main) 25%, white);    /* 板の上の説明文の色 */
    --fx-gold-a: #ffe27a; --fx-gold-b: #ffb724;
    position: relative; width: 1280px; height: 720px; overflow: hidden; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 12px 22px 10px; font-family: inherit;
    background:
        radial-gradient(rgba(255,255,255,0.10) 2px, transparent 2px),
        radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--fx-light) 55%, transparent) 0%, rgba(0,0,0,0) 62%),
        repeating-radial-gradient(circle at 24% 18%, rgba(255,255,255,0.045) 0 46px, rgba(0,0,0,0) 46px 92px),
        linear-gradient(160deg, var(--fx-main) 0%, var(--fx-deep) 55%, var(--fx-darker) 100%);
    background-size: 28px 28px, auto, auto, auto;
}

/* ---- 上の帯：もどるボタン／看板の見出し／右のボタン ---- */
.fx-top { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; height: 62px; flex-shrink: 0; }
.fx-plaque {
    position: absolute; left: 50%; transform: translateX(-50%); padding: 6px 40px 8px;
    font-size: 2.3rem; font-weight: 900; letter-spacing: 4px; color: #fff; white-space: nowrap;
    background: linear-gradient(var(--fx-plaque-a), var(--fx-plaque-b)); border: 5px solid var(--fx-edge); border-radius: 16px;
    box-shadow: 0 6px 0 var(--fx-shadow), inset 0 0 0 3px rgba(255,255,255,0.12); text-shadow: 0 3px 0 var(--fx-shadow);
}

/* ---- ボタン（赤＝戻る・やめる／青＝移動／オレンジ＝決定・追加／緑＝進む） ---- */
.fx-btn {
    font-family: inherit; font-weight: 900; font-size: 1.25rem; color: #fff; padding: 10px 22px; border-radius: 14px; cursor: pointer;
    border: 4px solid var(--fx-edge); background: linear-gradient(#e8604b,#c2402e); box-shadow: 0 5px 0 var(--fx-shadow); text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.fx-btn.blue   { background: linear-gradient(#4a9be0,#2f6fb8); }
.fx-btn.orange { background: linear-gradient(#ffa14a,#e8661e); }
.fx-btn.green  { background: linear-gradient(#4fbf7a,#2a8f55); }
.fx-btn.sm { font-size: 1rem; padding: 4px 14px; border-radius: 10px; border-width: 3px; box-shadow: 0 3px 0 var(--fx-shadow); }
.fx-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fx-shadow); }
.fx-btn:disabled { opacity: 0.4; cursor: default; }

/* ---- 板（コンテンツを載せる濃い面）と見出し ---- */
.fx-board {
    position: relative; z-index: 2; margin-top: 34px; box-sizing: border-box;
    background: rgba(0,0,0,0.28); border: 5px solid var(--fx-edge); border-radius: 22px;
    box-shadow: 0 6px 0 var(--fx-shadow), inset 0 0 0 3px rgba(255,255,255,0.08);
    padding: 26px 34px 28px; display: flex; flex-direction: column; align-items: center;
}
.fx-label { font-size: 1.6rem; font-weight: 900; letter-spacing: 4px; color: var(--fx-gold-a); margin-bottom: 14px; text-shadow: 0 2px 0 rgba(0,0,0,0.4); }
.fx-note { color: var(--fx-soft); font-size: 1.05rem; font-weight: 800; }
.fx-row { display: flex; gap: 16px; width: 100%; }

/* ---- クリーム色のカード（選択肢）。.on で金色に光って持ち上がる。.ok は緑（済み・選択中の一覧など） ---- */
.fx-card {
    position: relative; flex: 1; min-width: 0; font-family: inherit; font-weight: 900; font-size: 1.3rem; color: #3b2d1a; white-space: nowrap;
    padding: 22px 10px; border-radius: 16px; border: 4px solid var(--fx-edge);
    background: linear-gradient(#fff3d6,#f3dca8); box-shadow: 0 5px 0 var(--fx-shadow); cursor: pointer;
}
.fx-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fx-shadow); }
.fx-card.on { background: linear-gradient(var(--fx-gold-a), var(--fx-gold-b)); transform: translateY(-4px); box-shadow: 0 6px 0 var(--fx-shadow), 0 0 0 4px #fff, 0 0 20px 6px rgba(255,216,77,0.85); z-index: 2; }
.fx-card.ok { background: linear-gradient(#d4f8d9,#5fcf84); color: #0e4d27; }
.fx-card.locked { opacity: 0.5; cursor: not-allowed; background: #b9b2a0; }
.fx-pick { position: absolute; left: 8px; top: 6px; background: #1f2d3d; color: var(--fx-gold-a); font-style: normal; font-size: 0.85rem; font-weight: 900; padding: 1px 8px; border-radius: 6px; line-height: 1.3; box-shadow: 0 2px 0 rgba(0,0,0,0.4); }

/* ---- 金色の札（「いまの〇〇」を目立たせる）と、入力欄 ---- */
.fx-chip {
    display: inline-flex; align-items: baseline; gap: 14px; padding: 8px 30px 10px; border-radius: 16px; border: 4px solid var(--fx-edge);
    background: linear-gradient(var(--fx-gold-a), var(--fx-gold-b)); box-shadow: 0 5px 0 var(--fx-shadow); color: #3b2d1a; font-weight: 900; font-size: 2rem;
}
.fx-chip small { font-size: 1.15rem; color: #7a5a1a; }
.fx-input {
    padding: 10px 18px; font-size: 1.6rem; font-weight: 900; border-radius: 14px; border: 4px solid var(--fx-edge);
    background: linear-gradient(#fffaf0,#fff3d6); color: #3b2d1a; font-family: inherit; box-shadow: inset 0 3px 0 rgba(0,0,0,0.12);
}
.fx-input::placeholder { color: #a8946a; }
.fx-input:focus { outline: none; border-color: var(--fx-gold-b); box-shadow: inset 0 3px 0 rgba(0,0,0,0.12), 0 0 0 4px rgba(255,216,77,0.6); }

/* ============================================================
   明るい（白っぽい）メインカラー用 ― .fx-screen に fx-light を足す
     <div class="fx-screen fx-light" style="--fx-main:#e9e7ec">
   背景は白〜うすいグレー、看板・板・説明文は濃い文字色に切りかえる（ボタン・カードは同じ）
   ============================================================ */
.fx-screen.fx-light {
    --fx-deep:   color-mix(in srgb, var(--fx-main) 90%, black);
    --fx-darker: color-mix(in srgb, var(--fx-main) 78%, black);
    --fx-edge:   color-mix(in srgb, var(--fx-main) 50%, black);
    --fx-shadow: color-mix(in srgb, var(--fx-main) 36%, black);
    --fx-plaque-a: #ffffff;
    --fx-plaque-b: color-mix(in srgb, var(--fx-main) 85%, white);
    --fx-soft:   #5b5563;
    --fx-ink:    #3d3846;
    background:
        radial-gradient(rgba(0,0,0,0.045) 2px, transparent 2px),
        radial-gradient(ellipse at 50% 38%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 66%),
        repeating-radial-gradient(circle at 24% 18%, rgba(255,255,255,0.5) 0 46px, rgba(255,255,255,0) 46px 92px),
        linear-gradient(160deg, var(--fx-main) 0%, var(--fx-deep) 100%);
    background-size: 28px 28px, auto, auto, auto;
}
.fx-light .fx-plaque { color: var(--fx-ink); text-shadow: 0 2px 0 #fff; box-shadow: 0 6px 0 var(--fx-shadow), inset 0 0 0 3px rgba(255,255,255,0.7); }
.fx-light .fx-board { background: rgba(255,255,255,0.62); box-shadow: 0 6px 0 var(--fx-shadow), inset 0 0 0 3px rgba(255,255,255,0.8); }
.fx-light .fx-label { color: #8a5a00; text-shadow: 0 2px 0 #fff; }
.fx-light .fx-note { color: var(--fx-soft); }
.fx-light .fx-pick { background: #3d3846; }