/* --- liarsdice (ライアーズダイス) ---
   卓は革張り ―― 賽を転がす面が要るので、胡桃の枠(将棋・リバーシ・チェス・
   大富豪と同じ組み方)に鞣した革を張り、その上に申告板と手元の賽を置く。
   賽の絵は店に一組(public/dice.js の .die)で、ここは大きさも色も触らない。

   .daifugo-opponents / .daifugo-actions はババ抜き・ポーカー・ヨットとも
   使い回しているので、それらに掛ける指定はすべて #liarsdice-container の
   下に閉じ込める ―― 他の卓は元のまま。 */
.liarsdice-container {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.liarsdice-container.hidden { display: none; }

/* 卓 ―― 枠9px + 革の内余白18pxで、賽(44px)の座りは実装のまま。 */
.liarsdice-table {
  padding: 9px;
  border-radius: 4px;
  border: 1px solid var(--liarsdice-frame-edge);
  background:
    var(--wood-grain),
    linear-gradient(var(--liarsdice-frame-a), var(--liarsdice-frame-b));
  box-shadow:
    0 3px 6px var(--liarsdice-frame-drop),
    inset 0 1px 0 var(--liarsdice-frame-sheen);
}
.liarsdice-hide {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 2px;
  background:
    var(--liarsdice-hide-sheen),
    var(--liarsdice-hide-nap),
    linear-gradient(160deg, var(--liarsdice-hide-a), var(--liarsdice-hide-b));
  box-shadow: var(--liarsdice-hide-well);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* 革の内側を回る真鍮の罫。空押しの賽筒はこの内側に収める ―― 罫に切られると
   革の空押しではなく、置き忘れた絵に見える。 */
.liarsdice-hide::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--liarsdice-hide-rule);
  border-radius: 1px;
  pointer-events: none;
}
.liarsdice-hide > * { position: relative; }
/* 空押しの賽筒。卓の左下に小さく、真鍮の罫の内側に収める ―― 罫に切られると
   革の空押しではなく、置き忘れた絵に見える。色はここで当てる(SVGの
   fill="var(--…)" 属性は当たらず、卓の外まで塗ってしまう)。 */
.liarsdice-tooling {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 160px;
  height: auto;
  pointer-events: none;
}
.liarsdice-tooling-shadow { fill: rgba(20, 8, 2, 0.09); }
.liarsdice-tooling-cup {
  fill: var(--liarsdice-tooling-fill);
  stroke: var(--liarsdice-tooling-line);
}
.liarsdice-tooling-pips {
  fill: var(--liarsdice-tooling-pip);
  stroke: none;
}

/* 申告板 ―― 卓の真ん中に立つ木札。「目 → が → 個数 → 個」の語順で読む。
   見出しは付けない。灯った札に申告者の名が添えてあれば、それが今の申告
   であることは読まなくても分かる。 */
#liarsdice-bid-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--shop-brass-light);
  background:
    var(--wood-grain),
    linear-gradient(var(--liarsdice-frame-a), var(--liarsdice-frame-b));
  box-shadow:
    0 3px 6px rgba(20, 12, 4, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* まだ申告がないとき ―― 札の代わりに置き場だけを罫で示す。革の上に何も
   ないと、卓が壊れているように見える。 */
#liarsdice-bid-status.empty {
  padding: 15px 30px 16px;
  border: 1px dashed rgba(221, 192, 127, 0.45);
  background: none;
  box-shadow: none;
  font-family: var(--shop-font-display);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: var(--liarsdice-hide-ink);
  text-align: center;
}
.liarsdice-bid-kana {
  font-family: var(--shop-font-display);
  font-size: 0.94rem;
  color: rgba(244, 231, 196, 0.8);
}
.liarsdice-bid-count {
  font-family: var(--shop-font-display);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--liarsdice-plate-name-lit);
}
.liarsdice-bid-who {
  font-size: 0.69rem;
  color: var(--liarsdice-plate-sub);
  border-left: 1px solid rgba(221, 192, 127, 0.3);
  padding-left: 12px;
}
#liarsdice-bid-status .die {
  width: 40px;
  height: 40px;
  border-radius: 7px;
}

/* 始まる前 ―― 申告板の場所に、卓が何を待っているかとこの卓の決まりを書く
   (札の卓の配る前の見出しと同じ組み)。決まりは縛り・革命と同じ木札にする。 */
#liarsdice-bid-status.hidden { display: none; }
.liarsdice-waiting {
  max-width: 420px;
  text-align: center;
}
.liarsdice-waiting.hidden { display: none; }
.liarsdice-waiting-title {
  margin: 0;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--shop-brass-light);
}
.liarsdice-waiting-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--liarsdice-hide-ink);
}
.liarsdice-waiting-rules { margin: 12px 0 0; }
.liarsdice-waiting-rules > span {
  display: inline-block;
  padding: 3px 10px 4px;
  border-radius: 2px;
  border: 1px solid var(--shop-brass);
  background:
    var(--wood-grain),
    linear-gradient(var(--liarsdice-frame-a), var(--liarsdice-frame-b));
  font-family: var(--shop-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--shop-brass-light);
}
.liarsdice-hand-area.hidden { display: none; }
@media (max-width: 520px) {
  .liarsdice-waiting-title { font-size: 1.05rem; }
}

/* 手元の賽。転がした形にしたいので、一つずつ傾ける ―― 傾きは四つの型を
   順に配るだけなので、賽が減っても並びは崩れない。 */
.liarsdice-hand-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.liarsdice-hand-label {
  font-family: var(--shop-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--liarsdice-hide-ink);
}
.liarsdice-hand {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
}
.liarsdice-hand .die:nth-child(5n + 1) { transform: rotate(-7deg); }
.liarsdice-hand .die:nth-child(5n + 2) { transform: rotate(4deg); }
.liarsdice-hand .die:nth-child(5n + 3) { transform: rotate(-3deg); }
.liarsdice-hand .die:nth-child(5n + 4) { transform: rotate(9deg); }
.liarsdice-hand .die:nth-child(5n + 5) { transform: rotate(-5deg); }
.liarsdice-hand .status-text {
  margin: 0;
  color: var(--liarsdice-hide-ink);
  font-size: 0.85rem;
}
.liarsdice-hand-area.out .liarsdice-hand-label { display: none; }

/* 申告を組む札 ―― 「目 が 個数 個」を一列に組み、卓の上の申告板と同じ
   語順で読めるようにする。押せない間も消さずに、選べない札として残す。 */
.liarsdice-bid-controls {
  padding: 12px 18px 14px;
  border-radius: var(--radius);
  background-image: var(--shop-paper-grain), linear-gradient(var(--shop-paper-light), var(--shop-paper-light));
  border: 1px solid var(--shop-paper-line);
  box-shadow:
    inset 0 0 0 1px rgba(180, 144, 63, 0.28),
    0 1px 2px rgba(42, 36, 28, 0.14);
}
/* base.css の .hidden は同じ強さで負けるので、こちらで伏せる。 */
.liarsdice-bid-controls.hidden { display: none; }
.liarsdice-bid-slip-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--shop-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--shop-brass-deep);
}
.liarsdice-bid-controls.off .liarsdice-bid-slip-label { color: #6f6455; }
.liarsdice-bid-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* 「が ― 個数 ― 個」はひとかたまり。狭い幅で折るときは、目の六つと
   この三つの二段に割れてほしいので、行を直に折らずにここで括る。 */
.liarsdice-bid-amount {
  display: flex;
  align-items: center;
  gap: 10px;
}
.liarsdice-kana {
  font-family: var(--shop-font-display);
  font-size: 1rem;
  color: var(--shop-ink);
}
.liarsdice-bid-controls.off .liarsdice-kana { color: #6f6455; }

.liarsdice-quantity-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}
#liarsdice-container .liarsdice-quantity-stepper button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius);
  background: var(--shop-paper);
  border: 1px solid var(--shop-brass-deep);
  color: var(--shop-ink);
  font-size: 0.94rem;
  line-height: 1;
}
#liarsdice-container .liarsdice-quantity-stepper button:disabled {
  background: rgba(222, 208, 170, 0.5);
  border: 1px dashed var(--shop-paper-line);
  color: #6f6455;
  cursor: not-allowed;
}
#liarsdice-qty-value {
  min-width: 1.6em;
  text-align: center;
  font-family: var(--shop-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--shop-ink);
}
.liarsdice-bid-controls.off #liarsdice-qty-value { color: #6f6455; }

/* 目の選択。選んだ目は4px持ち上がって真鍮の縁が灯る。 */
.liarsdice-face-picker {
  display: flex;
  gap: 6px;
}
.liarsdice-face-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 3px;
  border-radius: var(--radius);
  background: var(--shop-paper-light);
  border: 1px solid var(--shop-paper-line);
  box-shadow: 0 1px 2px rgba(42, 36, 28, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.liarsdice-face-btn .die {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  /* 殻(36px)を店の賽(44px)より縮めているので、目の升も同じ比率で
     縮めないと、角の目が縁の丸みにかかって欠けて見える。 */
  --die-pip-size: 6px;
  --die-pip-gap: 3px;
}
.liarsdice-face-btn.selected {
  border-color: var(--shop-brass);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--shop-brass),
    0 0 10px rgba(180, 144, 63, 0.4),
    0 3px 5px rgba(20, 12, 4, 0.3);
}
/* 枠のアルファをそのまま弱めると、升目の数が多い目ほど彫りの黒が
   目立って残り、目によって箱の大きさが違って見えてしまう。枠と地は
   はっきり残し、霞ませるのは賽の彫りだけにする。 */
.liarsdice-face-btn:disabled {
  background: rgba(222, 208, 170, 0.5);
  border: 1px dashed rgba(42, 36, 28, 0.3);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.liarsdice-face-btn:disabled .die {
  opacity: 0.5;
}

/* 打ち手は卓の上の木札。申告は青漆、挑戦は朱 ―― この卓の山場なので、
   輪郭線だけの脇役にはしない。押せない間は伏せた札として、消えずに残る
   (大富豪・七並べ・ポーカー・ヨットと同じ値)。 */
#liarsdice-container .daifugo-actions .primary-btn,
#liarsdice-container .daifugo-actions .secondary-btn {
  min-width: 128px;
  padding: 11px 26px;
  font-family: var(--shop-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  box-shadow:
    0 2px 3px rgba(20, 12, 4, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#liarsdice-container .daifugo-actions .primary-btn {
  border: 1px solid var(--shop-brass);
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-pine), var(--shop-pine-deep));
  color: #f2ead6;
}
#liarsdice-container .daifugo-actions .primary-btn:hover:not(:disabled) {
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-pine-deep), var(--shop-pine-deep));
}
#liarsdice-container .daifugo-actions .secondary-btn {
  border: 1px solid var(--shop-brass-light);
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-seal), var(--shop-seal-deep));
  color: #fbf2dd;
}
#liarsdice-container .daifugo-actions .secondary-btn:hover:not(:disabled) {
  background:
    var(--wood-grain),
    linear-gradient(var(--shop-seal-deep), var(--shop-seal-deep));
}
#liarsdice-container .daifugo-actions .primary-btn:disabled,
#liarsdice-container .daifugo-actions .secondary-btn:disabled {
  border: 1px dashed var(--shop-paper-line);
  background: rgba(222, 208, 170, 0.5);
  color: #6f6455;
  box-shadow: none;
  cursor: not-allowed;
}

/* 打ち手の木札。大富豪・ばば抜きと同じ組みで、手番だけ真鍮が灯る。
   残りは数える前に厚みが目に入るように、伏せた賽の形を並べる。 */
#liarsdice-container .daifugo-opponent-chip {
  gap: 4px;
  padding: 8px 14px 7px;
  border-radius: var(--radius);
  border: 1px solid var(--liarsdice-plate-edge);
  background:
    var(--wood-grain),
    linear-gradient(var(--liarsdice-frame-a), var(--liarsdice-frame-b));
  box-shadow: 0 2px 3px rgba(20, 12, 4, 0.3);
}
#liarsdice-container .daifugo-opponent-chip.self { border-style: dashed; }
#liarsdice-container .daifugo-opponent-chip.active-turn {
  outline: none;
  border-color: var(--shop-brass-light);
  box-shadow: var(--liarsdice-plate-lit);
}
#liarsdice-container .daifugo-opponent-chip.inactive {
  opacity: 0.62;
  filter: none;
}
#liarsdice-container .daifugo-opponent-name {
  font-family: var(--shop-font-display);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--liarsdice-plate-name);
}
#liarsdice-container .active-turn .daifugo-opponent-name { color: var(--liarsdice-plate-name-lit); }
#liarsdice-container .daifugo-opponent-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--liarsdice-plate-sub);
}
#liarsdice-container .active-turn .daifugo-opponent-count { color: var(--liarsdice-plate-sub-lit); }
.liarsdice-dice-marks {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.liarsdice-dice-mark {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
}
/* 脱落した打ち手には朱の小札を差す ―― 「0個」と書くより早い。 */
.liarsdice-out-badge {
  padding: 1px 8px 2px;
  border-radius: 2px;
  background: linear-gradient(var(--shop-seal), var(--shop-seal-deep));
  font-family: var(--shop-font-display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--shop-paper-light);
}

/* 手控え ―― 一つ前の勝負。卓のいちばん下、手番の知らせより後ろに置く
   (index.html)。開くたびに高さが変わるので、賽や申告より前に置くと、
   そのたびに卓が動いて押し間違える。#liarsdice-container の外に出ている
   ぶん、この卓が伏せられたら一緒に伏せる(liarsdice.js の hide())。 */
.liarsdice-reveal {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 11px 16px 13px;
  border-radius: var(--radius);
  background-image: var(--shop-paper-grain), linear-gradient(var(--shop-paper-deep), var(--shop-paper-deep));
  border: 1px solid var(--shop-paper-line);
}
.liarsdice-reveal.hidden { display: none; }
.liarsdice-reveal-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.liarsdice-reveal-label {
  flex: none;
  font-family: var(--shop-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--shop-brass-deep);
}
.liarsdice-reveal-line {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--shop-ink);
}
.liarsdice-reveal-count {
  font-family: var(--shop-font-display);
  font-size: 0.88rem;
}
/* 朱は嘘のときだけ。本当だった申告は青漆で置く。 */
.liarsdice-reveal-verdict {
  font-family: var(--shop-font-display);
  color: var(--shop-seal);
}
.liarsdice-reveal-verdict.true { color: var(--shop-pine); }
.liarsdice-reveal-hands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.liarsdice-reveal-hand {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 5px;
  border-radius: 2px;
  background: rgba(42, 36, 28, 0.05);
  border: 1px solid var(--shop-paper-line);
}
.liarsdice-reveal-name {
  font-family: var(--shop-font-display);
  font-size: 0.72rem;
  color: var(--shop-ink-soft);
  margin-right: 3px;
}

/* 電話の幅。卓の内寸が足りないので、申告は二段に折り、空押しは入れない
   ―― 小さく押しても賽の下に隠れるだけなので、革を無地のままにする。 */
@media (max-width: 560px) {
  .liarsdice-hide { padding: 14px; gap: 12px; }
  .liarsdice-tooling { display: none; }
  #liarsdice-bid-status { gap: 10px; padding: 8px 16px 9px; }
  #liarsdice-bid-status .die { width: 34px; height: 34px; border-radius: 6px; }
  .liarsdice-bid-count { font-size: 1.75rem; }
  .liarsdice-bid-who { display: none; }
  .liarsdice-hand { gap: 6px; }
  .liarsdice-bid-row {
    flex-direction: column;
    gap: 10px;
  }
  .liarsdice-face-picker { gap: 5px; }
  #liarsdice-container .daifugo-actions { gap: 10px; }
  #liarsdice-container .daifugo-actions .primary-btn,
  #liarsdice-container .daifugo-actions .secondary-btn { padding: 11px 18px; }
}