/* 花札こいこいの得点計算: 見た目の足し分。UIUX大臣のA案の見本 09_uiux/deliverables/screens/2026-09-28_こいこい点数計算/koikoi.css を写したもの
   （仮の印と、B案だけの指定は除いた）。土台は common/ の今の部品。新しい色・大きさは足さない */

/* 2人の合計（ロストシティの .who と同じ形。押せないので地は紙の白のまま） */
.tot { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tot > div { border-radius: 16px; min-height: 60px; padding: 6px 12px; background: var(--c-card); color: var(--c-text);
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.tot .nm { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tot .tag { grid-column: 1; justify-self: start; height: 20px; padding: 0 6px; font-size: 11px; }
.tot .sum { grid-column: 2; grid-row: 1 / span 2; font-family: var(--f-num); font-size: var(--fs-head); line-height: 1; }

/* 回戦の切り替え（スカルキングの .rb__nav と同じ） */
.nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px; }
.nav b { text-align: center; font-size: var(--fs-body); font-weight: 700; }
.nav b .num { font-family: var(--f-num); font-weight: 400; }
.nav b .of { color: var(--c-hint); }
.nav button { min-height: 44px; border: 0; border-radius: 12px; background: var(--c-card); color: var(--c-text); font-size: 20px; font-weight: 700; cursor: pointer; }
.nav button:disabled { opacity: .45; cursor: default; }

/* 入力のカード */
.panel2 { background: var(--c-card); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.panel2 .seg { gap: 4px; }
.panel2 .seg > .btn2 { flex: 1 1 0; min-width: 0; min-height: 44px; background: var(--c-field); padding: 0 2px; letter-spacing: 0; line-height: 1.2; }
.panel2 .seg > [aria-pressed="true"] { background: var(--c-band); color: var(--c-on-band); }

/* 押す／押さないの役（押したら卓の緑＋✓。色だけにしない） */
.yaku { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.yk { min-height: 44px; border: 0; border-radius: 12px; background: var(--c-field); color: var(--c-text); padding: 0 4px;
  font: 700 var(--fs-body)/1.2 var(--f-text); letter-spacing: 0; white-space: nowrap; cursor: pointer; }
.yk--wide { grid-column: 1 / -1; }
.yk[aria-pressed="true"] { background: var(--c-band); color: var(--c-on-band); }
.yk[aria-pressed="true"]::before { content: "✓ "; }
.yk--te { box-shadow: inset 0 0 0 2px var(--c-field-line); }
/* 勝った人を選ぶ前と手役のとき: ほかの欄は効かない（線で消して沈める。押せない） */
.yk:disabled, .cnt:disabled, .panel2 .seg > .btn2:disabled { background: transparent; box-shadow: inset 0 0 0 2px var(--c-field); color: var(--c-hint);
  text-decoration: line-through; text-decoration-thickness: 2px; cursor: default; }
.yk:disabled::before { content: none; }
.off-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--c-field); font-size: var(--fs-small); font-weight: 700; line-height: 1.6; }

/* 枚数（押すと数字パッド） */
.cnts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.cnt { min-height: 52px; border: 0; border-radius: 12px; background: var(--c-field); color: var(--c-text); cursor: pointer; padding: 4px 10px;
  display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 -2px 0 var(--c-field-line); }
.cnt span { font-size: var(--fs-body); font-weight: 700; }
.cnt b { font-family: var(--f-num); font-size: var(--fs-head); font-weight: 400; line-height: 1; }
.cnt small { font-family: var(--f-text); font-size: 13px; font-weight: 700; margin-left: 2px; }
.cnt.is-active { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* 内訳（倍は1つずつ別の行）。左に式と倍、右にこの回の点（48px） */
.why { background: var(--c-card); border-radius: 16px; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.why p { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.6; }
.why b { font-family: var(--f-num); font-weight: 400; }
.why .mul { display: flex; width: fit-content; gap: 6px; align-items: baseline; margin-top: 2px; padding: 0 8px; border-radius: 8px; background: var(--c-field); }
.why .none { font-size: var(--fs-small); color: var(--c-hint); }
.why__r { display: flex; flex-direction: column; align-items: flex-end; }
.why__r span { font-size: var(--fs-small); font-weight: 700; }
.why__r b { font-size: var(--fs-display); line-height: 1.05; }

/* 勝った人の行: 字＋2人 */
.winrow { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px; align-items: center; }
.winrow > span { font-size: var(--fs-small); font-weight: 700; padding: 0 4px; }
.winrow .btn2 { min-height: 44px; background: var(--c-field); padding: 0 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winrow [aria-pressed="true"] { background: var(--c-band); color: var(--c-on-band); }
.winrow [aria-pressed="true"]::before { content: "✓ "; }

/* 12回戦の表（パソコンの左だけ） */
.tbl { background: var(--c-card); border-radius: 16px; padding: 6px; display: grid; grid-template-columns: 64px 1fr 1fr; gap: 2px 4px; }
.tbl > span { display: grid; place-items: center; min-height: 36px; font-weight: 700; min-width: 0; }
.tbl .h { min-height: 28px; font-size: var(--fs-small); color: var(--c-hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .r { font-size: var(--fs-small); }
.tbl .p { font-family: var(--f-num); font-size: 20px; font-weight: 400; background: var(--c-field); border-radius: 8px; }
.tbl .p.e { color: var(--c-hint); font-family: var(--f-text); font-size: var(--fs-body); }
.tbl .cur { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* 始める画面の切り替え（2つ）: 人数の .seg と同じ部品 */
.optrow + .optrow { margin-top: var(--sp-4); }
.optrow .card__head { margin-bottom: 0; }
.card + .card { margin-top: var(--sp-3); }
.card__hint a { color: var(--c-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--felt); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 枚数の数字パッドの見出しの下のヒント（カス） */
.sheet__hint { margin: -4px 4px 8px; font-size: var(--fs-small); line-height: 1.6; }

/* 375×667 は詰める */
@media (max-height: 700px) and (max-width: 899px) {
  .tot > div { min-height: 48px; }
  .panel2 { gap: 6px; padding: 8px; }
  .cnt { min-height: 44px; }
  .why { padding: 6px 12px; }
}

/* 暗い表示: 押した物に淡いみどりの輪郭（今の .seg と同じ決まり） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .yk[aria-pressed="true"], :root:not([data-theme="light"]) .winrow [aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: -2px; }
}
:root[data-theme="dark"] .yk[aria-pressed="true"], :root[data-theme="dark"] .winrow [aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: -2px; }