/* ファイブドロー。トランプ・カジノの「明るく落ち着いた」シリーズ（2026-10-23 持ち主: カードゲームは黒っぽい地ではない方がいい）:
   地 #E9E8E3・墨色の字 #1E2B27・薄い字 #5C6660・えんじのボタン #8E3B2E（字 #FFFFFF）。卓の緑・札の裏は共通の cards.js（C.layout）のまま。枠の外の色（html・body）は共通なので触らない。
   ホームは shell.home の theme と同じ値。遊んでいる最中の帯・部屋の中（party.js）・小さなウィンドウも同じ色になるよう .fd に --ui-* を置く */
.fd {
  --paper: #E9E8E3; --felt: #1f4a33;
  --ink: #1E2B27; --ink2: #5C6660; --accent: #8E3B2E; --accent-ink: #FFFFFF; --line: rgba(30, 43, 39, .22);
  --fd-title: "Shippori Mincho B1", "Zen Old Mincho", serif;
}
.fd { --ui-red: #8E3B2E; --ui-red-ink: #FFFFFF; --ui-card: #E9E8E3; --ui-ink: #1E2B27; --ui-sub: #5C6660; --ui-paper: #E9E8E3; --ui-soft: rgba(30, 43, 39, .22); --ui-chip: rgba(30, 43, 39, .05); --ui-shade: rgba(233, 232, 227, .97); }
/* ボタン: 主な操作はえんじの地に白い字。2 つ目以降（相手をさがす・下の段・sub・設定の札）は細い線のボタン（線と字は墨色・地は透明）。角は 6px まで・影なし */
.fd .ui-btn { background: #8E3B2E; color: #FFFFFF; border: 1.5px solid #8E3B2E; border-radius: 6px; box-shadow: none; background-image: none; }
.fd .ui-btn.sub, .fd .ui-chip { background: transparent; color: #1E2B27; border: 1.5px solid #1E2B27; border-radius: 6px; box-shadow: none; background-image: none; }
.fd .ui-chip[aria-pressed="true"], .fd .sh-tabs button[aria-selected="true"] { background: #8E3B2E; color: #FFFFFF; border-color: #8E3B2E; }
.fd .shell-wait, .fd .ui-count, .fd .shell-done { color: #5C6660; }
/* 小さなウィンドウ・帯: 影なし、地との差は細い線だけ */
.fd .sh-box { box-shadow: none; border: 1.5px solid rgba(30, 43, 39, .35); }
.fd .sh-box header { border-bottom: 1px solid rgba(30, 43, 39, .22); }
.fd .sh-bar { border-bottom: 1px solid rgba(30, 43, 39, .22); }
/* 一言の帯もホームと同じ組（札の裏は共通のまま） */
.fd .cd-say { background: #E9E8E3; color: #1E2B27; }
/* ホームの題字と背景（このゲームの絵柄: 扇の 5 枚・チップ・交換の矢印。色はシリーズ共通） */
.fd .fd-logo { display: block; height: 76px; width: auto; }
.fd .fd-bd { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fd-page { margin: 0; }
.fd { background: var(--paper); color: var(--ink); }
.fd * { box-sizing: border-box; }
.fd .sh-info h1, .fd .final em, .fd .stats b { font-family: var(--fd-title); }
.fd .sh-info h1 { font-weight: 800; letter-spacing: .04em; }

/* ---------- 卓（並び・札・卓の色・札の裏は共通の cards.js の C.layout。ここは場に置く物と、並びの中の細かい所だけ） ---------- */
.fd .cd.flipin { animation: fd-flip .32s ease-out both; }
@keyframes fd-flip { from { transform: scaleX(0); } }
.fd .pts small { font-size: .75em; font-weight: 400; margin-left: 1px; }
/* 相手の席は 1 行に入らなければ折り返す。一言の帯は 1 行（入らない長さは view.js が文字を小さくする） */
.fd .fd-lay .cd-seats { flex-wrap: wrap; row-gap: 8px; }
.fd .fd-lay .cd-say { white-space: nowrap; overflow: hidden; }
.fd .cd-seat.fd-swp { animation: fd-swp .5s ease-out; }
@keyframes fd-swp { 0% { outline: 4px solid #E9E8E3; } 100% { outline: 4px solid rgba(233, 232, 227, 0); } }
.fd .cd-hand .cd.slot { background: none; box-shadow: none; }
.fd .cd-hand.fd-flash { animation: fd-flash .9s ease-out; border-radius: 6px; }
@keyframes fd-flash { 0% { background: rgba(233, 232, 227, .4); } 100% { background: rgba(233, 232, 227, 0); } }
/* 場: 山札と、めくった相手の 5 枚・勝敗の大きな一言 */
.fd .fd-deck { position: relative; flex: none; width: 64px; height: 86px; --cd-w: 56px; }
.fd .fd-deck .cd { position: absolute; left: 0; top: 6px; }
.fd .fd-deck .cd:nth-child(2) { left: 3px; top: 3px; } .fd .fd-deck .cd:nth-child(3) { left: 6px; top: 0; }
.fd .fd-deck .cd.flying { left: 6px; top: 0; z-index: 2; }
.fd .fd-fl { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fd .fd-big { font: 700 46px/1.1 var(--fd-title); letter-spacing: .06em; opacity: 0; transform: scale(.5); }
.fd .fd-big:empty { display: none; }
.fd .fd-big.on { animation: fd-pop .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.fd .fd-big.me { background: #8E3B2E; color: #FFFFFF; padding: 0 .3em; border-radius: 6px; }
@keyframes fd-pop { to { opacity: 1; transform: scale(1); } }
.fd .fd-shows { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.fd .fd-show { padding: 4px 6px 6px; border-radius: 4px; background: rgba(0, 0, 0, .18); }
.fd .fd-show.win { outline: 3px solid #E9E8E3; }
.fd .fd-show b { display: block; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; margin-bottom: 4px; }
.fd .fd-mini { display: flex; gap: 4px; }

/* 部屋の中（party.js）: 上 64px に今の局と点、右下に主な操作。結果はひとりのときと同じ共通の shell.result */
.fd.fd-pbox { position: relative; width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
.fd .fd-pinfo { position: absolute; left: 20px; right: 20px; top: 0; height: 64px; display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; }
.fd .fd-pacts { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 12px; z-index: 20; }
.fd.sh-port .fd-pacts { left: 20px; justify-content: flex-end; }
/* 部屋の「集まっています」（始まる前だけ置く。卓の箱の上 64px は帯の代わりの一行） */
.fd .fd-wait { position: absolute; left: 0; right: 0; top: 64px; bottom: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--paper); color: var(--ink); text-align: center; padding: 0 24px; }
.fd .fd-wait h2 { font-family: var(--fd-title); font-size: 44px; margin: 0; }
.fd .fd-wait .fd-wn { font-size: 28px; font-weight: 700; color: var(--accent); margin: 0; }
.fd .fd-wait ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 640px; }
.fd .fd-wait li { font-size: 22px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 6px; }
.fd .fd-wait .fd-wh { font-size: 18px; color: var(--ink2); margin: 0; }
.fd .fd-wait .ui-btn { font-size: 24px; min-width: 240px; min-height: 64px; }
.fd .fd-rx { text-align: center; max-width: 640px; }
.fd .fd-rx .rk { font-size: 17px; margin: 0; }
.fd .fd-rx .rk .new { font-style: normal; font-weight: 700; color: var(--accent); }
.fd .fd-rx .rk .top { display: block; font-size: 15px; color: var(--ink2); margin-top: 4px; }
.fd .trail { font-size: 14px; color: var(--ink2); margin: 0 0 4px; }
.fd .trail span { color: var(--ink); }
.fd .trail span.w { color: var(--accent); font-weight: 700; }
.fd .trail i { font-style: normal; margin: 0 4px; }

/* ---------- ホームの絵: CPU 同士のデモ（本番と同じ C.layout の並びを縮めて流す。操作は受け付けない） ---------- */
.fd .fd-demo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--paper); }
.fd .fd-demobox { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* ---------- 詳しく・設定（共通の小さなウィンドウ shell.panel の中） ---------- */
.fd .fd-h { font-size: 20px; margin: 14px 0 0; }
.fd .fd-det .note, .fd .fd-set .note { margin: 0 0 6px; overflow-wrap: anywhere; }
.fd .sh-body .form { grid-template-columns: 150px 1fr; }
.fd .sh-body .dist li { grid-template-columns: minmax(0, 220px) 1fr 40px; }
.fd .sh-body .dist li span { overflow-wrap: anywhere; }

/* ---------- 設定・記録 ---------- */
.fd .form { display: grid; grid-template-columns: 160px 1fr; gap: 14px 16px; align-items: center; margin: 16px 0; }
.fd .form dt { font-weight: 700; }
.fd .form dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd .opt { display: flex; gap: 8px; flex-wrap: wrap; }
.fd .opt [aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 1px; }
.fd .nick { font-size: 17px; font-weight: 700; }
.fd .note { font-size: 16px; color: var(--ink2); }
.fd .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0; }
.fd .stats div { text-align: center; padding: 10px 4px; border-top: 2px solid var(--line); }
.fd .stats b { display: block; font-size: 30px; }
.fd .stats span { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.fd .stats div.main b { font-size: 40px; color: var(--accent); }
.fd .best b { color: var(--accent); margin-left: 6px; }
.fd .dist { list-style: none; padding: 0; margin: 10px 0 16px; }
.fd .dist li { display: grid; grid-template-columns: 200px 1fr 48px; gap: 8px; align-items: center; font-size: 14px; padding: 2px 0; }
.fd .dist li i { display: block; height: 12px; background: var(--accent); min-width: 2px; }
.fd .dist li b { text-align: right; }
.fd .fd-wk { font-size: 16px; color: var(--ink2); margin: 8px 0 12px; }
.fd .fd-top { list-style: none; padding: 0; margin: 0; }
.fd .fd-top li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere; }
.fd .fd-top li.me { font-weight: 700; }
.fd .fd-top li b { font-family: var(--fd-title); }

/* ---------- 遊び方・詳しくの図（guide.js）。260×160 ---------- */
/* 詳しく（役の見本）: 卓の上に札と赤い丸 */
.fd .sh-pic .fd-gp { position: absolute; left: 50%; top: 50%; width: 260px; height: 160px; transform: translate(-50%, -50%); padding: 0; border-radius: 0; max-width: none; max-height: none; overflow: hidden; }
.fd .fd-gp .cd { pointer-events: none; }
.fd .fd-gtag { font: 700 15px/1.2 var(--ui-body); color: #FFFFFF; white-space: nowrap; }
.fd .fd-gtag.s { font-size: 13px; }
.fd .fd-gtag.big { font: 700 26px/1.2 var(--fd-title); color: #FFFFFF; }
.fd .fd-gbtn { font-size: 15px; padding: 6px 12px; min-height: 0; white-space: nowrap; pointer-events: none; }
.fd .fd-gring { position: absolute; border: 3.5px solid #E9E8E3; border-radius: 50%; pointer-events: none; }
.fd .fd-gsum { list-style: none; margin: 0; padding: 0; width: 180px; color: #FFFFFF; font: 700 15px/1.5 var(--ui-body); }
.fd .fd-gsum li { display: flex; justify-content: space-between; padding: 2px 6px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.fd .fd-gsum.s { width: 200px; font-size: 14px; line-height: 1.6; }
/* 遊び方: 本番と同じ C.layout の並び（576×360 の卓を 0.444 倍。上の帯の分は詰め、右下にボタン） */
.fd .sh-pic .fd-gl { position: absolute; left: 50%; top: 50%; width: 576px; height: 360px; max-width: none; max-height: none; transform: translate(-50%, -50%) scale(.4444); background: var(--paper); pointer-events: none; }
.fd .fd-gl .cd-layout { top: 6px; left: 8px; right: 8px; bottom: 64px; padding: 8px 12px 4px; gap: 6px; }
.fd .fd-gl .cd-hand { --cd-w: 56px; }
.fd .fd-gl .cd-hand[hidden] { display: none; }
.fd .fd-gl .fd-deck { --cd-w: 30px; width: 38px; height: 50px; }
.fd .fd-gl .sh-acts { right: 10px; bottom: 8px; }
.fd .fd-gl .sh-acts .ui-btn { font-size: 22px; padding: 8px 22px; }
.fd .fd-gl .fd-gmk { outline: 5px solid #E9E8E3; outline-offset: 5px; border-radius: 6px; }
.fd .fd-gl .fd-gkey { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); width: 26px; height: 30px; display: grid; place-items: center; background: #E9E8E3; color: #1E2B27; border-radius: 5px; font: 700 18px/1 var(--ui-body); border: 2px solid var(--ink2); }
.fd .fd-gl .fd-gsum { width: 300px; font-size: 22px; }