/* オンライン大富豪: ホームのデモ・詳しく・設定の中身。class は df- を前に付ける
   見た目（2026-10-23 持ち主）: トランプ・カジノ共通の「明るく落ち着いた」シリーズ。地 #E9E8E3・文字 #1E2B27・薄い文字 #5C6660・
   主なボタンはえんじ #8E3B2E（字 #FFFFFF）・2 つ目以降のボタンは #1E2B27 の細い線と字（地は透明）。角丸 6px まで・影なし・グラデーションなし。
   卓の緑・札の裏は cards.js のまま。枠の外の色は共通のまま（ここでは塗らない） */
html, body { margin: 0; height: 100%; }

.df-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.df-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.df-note { font-size: 17px; line-height: 1.5; color: #5C6660; margin: 0; }

/* ホームの地 */
.df-home { background: #E9E8E3; color: #1E2B27; }
.df-home .sh-rule, .df-home .sh-ol, .df-home .sh-demo, .df-home .sh-foot, .df-home .ui-count, .df-home .shell-wait { color: #5C6660; }
.df-home .sh-demo::before { display: none; }  /* 見出しの前の丸い点は意味がないので出さない */
/* 主なボタン: えんじの地に白い字。2 つ目以降（下の段・パスなど）: 地のままに墨色の細い線と字 */
.df-home .ui-btn:not(.sub), .df-bar ~ .sh-acts .ui-btn:not(.sub), .df-result .ui-btn:not(.sub), .sh-box .ui-btn:not(.sub) { background: #8E3B2E; color: #FFFFFF; border: 2px solid #8E3B2E; border-radius: 6px; box-shadow: none; }
.df-home .ui-btn.sub, .df-bar .ui-btn.sub, .df-bar ~ .sh-acts .ui-btn.sub, .df-result .ui-btn.sub, .sh-box .ui-btn.sub { background: transparent; color: #1E2B27; border: 1px solid #1E2B27; border-radius: 6px; box-shadow: none; }
.df-home .ui-btn:not(.sub):hover, .df-result .ui-btn:not(.sub):hover, .df-bar ~ .sh-acts .ui-btn:not(.sub):hover { background: #7A3226; border-color: #7A3226; }
.df-home .ui-btn.sub:hover, .df-bar .ui-btn.sub:hover, .df-bar ~ .sh-acts .ui-btn.sub:hover, .df-result .ui-btn.sub:hover, .sh-box .ui-btn.sub:hover { background: rgba(30, 43, 39, .06); }

/* ホームの絵: CPU 同士のデモ（本番の卓を縮めて見せる。押せない） */
.df-home .sh-art { background: #E9E8E3; outline: 1px solid rgba(30, 43, 39, .25); }
.df-home .sh-info { overflow-y: auto; }
.df-home .sh-foot { flex-wrap: wrap; }
.df-demo { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
/* デモの出た札: 裏のまま上から飛んできて、場の上で横に縮んでめくれる（裏は cards.js の .cd.back のまま。半分の所で main.js が back を外す） */
.df-demo .df-cards .cd.df-fl { animation: df-dfl .6s ease-out both; }
@keyframes df-dfl { 0% { opacity: 0; transform: translateY(-150px) rotate(-10deg); } 45% { opacity: 1; transform: translateY(-12px) rotate(-2deg) scaleX(1); } 50% { transform: translateY(-10px) scaleX(0); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .df-demo .df-cards .cd.df-fl { animation: none; } }
/* デモの場の山: 同じ場で前に出た札を、いまの札の下に少しずつ傾けて積む。流れた札は左に伏せて重ねる */
.df-demo .df-cards { position: relative; z-index: 1; }
.df-pile { position: absolute; inset: 0; pointer-events: none; }
.df-pg { position: absolute; left: 50%; top: 50%; display: flex; gap: 4px; translate: -50% -50%; }
.df-heap { position: absolute; left: 4%; top: 50%; translate: 0 -50%; width: 100px; height: 120px; }
.df-heap .cd { position: absolute; left: 0; top: 0; }

/* 題字: 墨色の明朝。「富」のうかんむりの点が王冠（SVG）。高さ 76px・1 行 */
.df-logo { display: block; height: 76px; width: auto; max-width: 100%; }

/* 遊んでいる最中の帯: 地と同じ色、下に薄い細い線 */
.df-bar { background: #E9E8E3; color: #1E2B27; border-bottom: 1px solid rgba(30, 43, 39, .2); }
.df-bar .sh-info2 { min-width: 0; line-height: 1.2; color: #5C6660; }

/* 小さなウィンドウ（shell.panel の中）: 地と同じ明るい灰に墨色の字 */
.sh-box { --ui-card: #E9E8E3; --ui-ink: #1E2B27; --ui-sub: #5C6660; --ui-red: #8E3B2E; --ui-red-ink: #FFFFFF; --ui-paper: #E9E8E3; --ui-soft: rgba(30, 43, 39, .2); }
.sh-box .sh-tabs button[aria-selected="true"] { background: #1E2B27; color: #FFFFFF; }
.sh-box header { border-bottom: 1px solid rgba(30, 43, 39, .2); padding-bottom: 6px; }
/* 記録: 自己ベスト・通算 1 位・大富豪の連続を大きく 3 つ並べる（枠は付けず、下の線で区切る） */
.df-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.df-big div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-bottom: 1px solid #5C6660; }
.df-big span { font-size: 15px; font-weight: 700; color: #5C6660; white-space: nowrap; }
.df-big b { font-family: "Shippori Mincho B1", serif; font-weight: 700; font-size: 44px; line-height: 1.1; color: #8E3B2E; font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-big small { font-family: var(--ui-body); font-size: 16px; font-weight: 700; color: #1E2B27; margin-left: 4px; }
.df-me { margin-left: 12px; font-size: 17px; color: #8E3B2E; }
.df-det, .df-set { display: flex; flex-direction: column; gap: 12px; }
.df-h3 { margin: 8px 0 0; font-size: 20px; font-weight: 700; color: #1E2B27; }
.df-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.df-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid rgba(30, 43, 39, .2); padding: 6px 2px; font-size: 17px; }
.df-stats b { font-family: "Shippori Mincho B1", serif; font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.df-stats small { font-family: var(--ui-body); font-size: 14px; font-weight: 700; color: #8E3B2E; margin-left: 6px; }
.df-hc { font-size: 14px; font-weight: 700; padding: 2px 8px; border: 1px solid rgba(30, 43, 39, .35); }
.df-hc.r0 { background: #8E3B2E; border-color: #8E3B2E; color: #FFFFFF; }
/* 詳しく: ルールの決まり（名前と説明。長い説明は折り返す） */
.df-rl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 17px; line-height: 1.5; }
.df-rl dt { font-weight: 700; white-space: nowrap; }
.df-rl dd { margin: 0; color: #5C6660; overflow-wrap: anywhere; }
.df-rlab2 { min-width: 150px; font-weight: 700; }
/* ルールを変えたときの知らせ: 窓の上に貼り付けて、えんじの帯で目立たせる */
.df-warn { position: sticky; top: 0; z-index: 1; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; color: #FFFFFF; background: #8E3B2E; padding: 8px 14px; }
.df-warn:empty { display: none; }

/* 結果: 明るい灰の地にえんじの判 */
.df-result li.me { background: rgba(30, 43, 39, .08); }