/* =====================================================================
   Web道具 作り直し案（v2）の部品。デザイン大臣 2026-09-27
   土台は ../2026-09-27_web-tools-ui/tools.css（色・書体・文字の段・角丸は同じ）。ここは新しい部品だけ
   正: 08_design/deliverables/ui/2026-09-27_Web道具の作り直し_デザイン案.md
   ===================================================================== */

/* ---- ゲーム中の画面の器: 縦に1画面。端は8px（格子に幅を回す） ---- */
.play {
  --gutter: 8px;
  max-width: 560px; margin: 0 auto;
  padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}

/* ---- 1. 上の帯（低い版）: 高さ52px。印・道具名・非公式・1つ戻す・メニュー ---- */
.bar {
  display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 4px;
  background: var(--c-band); color: var(--c-on-band); border-radius: var(--r-btn);
}
.bar__home { flex: none; width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; }
.bar__home span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--paper); color: var(--felt); font-family: var(--f-num); font-size: 16px; line-height: 1; }
.bar__title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bar__title b { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; letter-spacing: .02em; font-feature-settings: "palt"; word-break: auto-phrase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bar__title .tag { height: 22px; padding: 0 8px; }
.bar__btn { flex: none; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 12px; background: transparent;
  color: var(--c-on-band); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; }
.bar__btn svg { width: 22px; height: 22px; display: block; }
.bar__btn small { font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; }
/* 11px は文字の段の例外: 図の下の添え字だけ。単独で読ませる文には使わない */

/* ---- 2. 相手のタブ（3〜4人のときだけ） ---- */
.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: var(--c-card); color: var(--c-text);
  font-size: var(--fs-body); font-weight: 700; cursor: pointer; }
.tabs [aria-selected="true"] { background: var(--c-band); color: var(--c-on-band); }
:root[data-theme="dark"] .tabs [aria-selected="true"] { outline: 2px solid var(--mint); outline-offset: -2px; }

/* ---- 小見出し（13px 太字）。カードの中の段の名前 ---- */
.lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.4; letter-spacing: .06em; }
.lbl .num { font-size: var(--fs-small); }

/* ---- 3. 部品のタイル（タギロン）: 実物の色。数字は Dela ---- */
.pt { position: relative; display: grid; place-items: center; border: 0; border-radius: 6px; cursor: pointer; padding: 0;
  font-family: var(--f-num); font-size: 16px; line-height: 1; letter-spacing: 0; }
.pt--r { background: var(--part-red); color: var(--on-part-red); }
.pt--b { background: var(--part-blue); color: var(--on-part-blue); }
.pt--y { background: var(--part-yellow); color: var(--on-part-yellow); }
.pt.is-off { background: var(--c-field); color: var(--c-hint); }           /* 見えた（自分の手・場に出た）: 地の色に沈める */
.pt.is-off::after { content: ""; position: absolute; left: 18%; right: 18%; top: 50%; border-top: 2px solid var(--c-hint); transform: rotate(-35deg); }

.seen { background: var(--c-card); border-radius: 16px; padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.seen__row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.seen__row .pt { height: var(--seen-h, 36px); }

/* ---- 4. 合計の欄（左3・中3・右3・全部）: 押すと下から数字パッド ---- */
.sums { display: grid; grid-template-columns: repeat(var(--k, 4), 1fr); gap: 4px; }
.sum { min-height: 44px; border: 0; border-radius: 12px; background: var(--c-card); color: var(--c-text); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 10px; }
.sum span { font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.sum b { font-family: var(--f-num); font-weight: 400; font-size: 20px; line-height: 1; }
.sum b.is-empty { width: 22px; height: 0; border-bottom: 2px solid var(--c-field-line); }
.sum.is-active { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* ---- 5. A 格子案: 盤（タイル立て＝列の見出し ＋ 数字0〜9の格子） ---- */
.board { background: var(--c-card); border-radius: 16px; padding: 8px 6px 8px 4px; }
.g-row { display: grid; grid-template-columns: 28px repeat(var(--slots, 5), minmax(0, 1fr)); column-gap: 4px; }
.g-row + .g-row { margin-top: 3px; }
/* タイル立て: 当てたい場所ごとの、残った候補のまとめ（本人の×から数えるだけ。推理の自動化はしない） */
.rack { position: relative; height: var(--rack-h, 60px); border-radius: 8px; background: var(--c-field);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; padding: 0; color: var(--c-text); }
.rack__n { position: absolute; top: 3px; left: 5px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--c-hint); }
.rack__v { font-family: var(--f-num); font-size: 16px; line-height: 1; letter-spacing: 0; }
.rack__v.is-big { font-size: 24px; }
.rack__c { display: flex; gap: 3px; }
.rack__c i { width: 12px; height: 5px; border-radius: 3px; }
.rack__c .r { background: var(--part-red); } .rack__c .b { background: var(--part-blue); } .rack__c .y { background: var(--part-yellow); }
.rack.is-fixed-r { background: var(--part-red); color: var(--on-part-red); }
.rack.is-fixed-b { background: var(--part-blue); color: var(--on-part-blue); }
.rack.is-fixed-y { background: var(--part-yellow); color: var(--on-part-yellow); }
.rack.is-fixed-r .rack__n, .rack.is-fixed-b .rack__n { color: inherit; }
/* タイル立ての間の印（・→連→同→・）。24×24（WCAG 2.2 の最小） */
.rack-link { position: absolute; top: 50%; right: -16px; z-index: 2; width: 28px; height: 28px; transform: translateY(-50%);
  border: 0; border-radius: 50%; background: var(--c-card); color: var(--c-text); padding: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.rack-link::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-hint); }
.rack-link.is-on { background: var(--c-band); color: var(--c-on-band); }
.rack-link.is-on::before { display: none; }

/* 行の見出し（数字）: 押すと、その数字を全部の場所で×（もう一度で戻す） */
.g-num { border: 0; border-radius: 8px; background: transparent; color: var(--c-text); padding: 0; cursor: pointer;
  font-family: var(--f-num); font-size: 18px; line-height: 1; height: var(--ch, 40px); display: grid; place-items: center; }
.g-num.is-all { background: var(--c-field); color: var(--c-hint); text-decoration: line-through; text-decoration-thickness: 2px; }
.g-slot { display: flex; gap: 2px; }
.c { flex: 1; height: var(--ch, 40px); border: 0; border-radius: 6px; padding: 0; cursor: pointer; display: grid; place-items: center;
  font-family: var(--f-text); font-size: 14px; font-weight: 700; line-height: 1; }
.c--r { background: var(--part-red-tint); } .c--b { background: var(--part-blue-tint); } .c--y { background: var(--part-yellow-tint); }
.c.is-no { background: var(--c-field); color: var(--c-hint); }                  /* ×: 沈める */
.c.is-no::before { content: "×"; }
.c.is-yes::before { content: "◎"; }                                              /* ◎: 実物の色で塗る */
.c--r.is-yes { background: var(--part-red); color: var(--on-part-red); }
.c--b.is-yes { background: var(--part-blue); color: var(--on-part-blue); }
.c--y.is-yes { background: var(--part-yellow); color: var(--on-part-yellow); }
.c.is-seen { background: var(--c-field); }                                       /* 見えたタイル: 薄くするだけ（×ではない） */
.c.is-seen::after { content: ""; width: 40%; border-top: 2px solid var(--c-hint); transform: rotate(-35deg); }
.c.is-press { outline: 3px solid var(--c-focus); outline-offset: 1px; }            /* 押した瞬間（見本では1つだけ表示） */
.g-head .g-num { height: auto; font-size: 11px; font-family: var(--f-text); font-weight: 700; color: var(--c-hint); }

/* 数字パッド（合計の欄を押したときだけ下から出る。キーボードは出さない） */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--c-card); border-radius: 24px 24px 0 0;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--c-field); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px 8px; }
.sheet__head b { font-size: var(--fs-body); font-weight: 700; }
.sheet__head .num { font-size: var(--fs-head); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pad button { min-height: 52px; border: 0; border-radius: 12px; background: var(--c-field); color: var(--c-text); font-family: var(--f-num); font-size: 24px; cursor: pointer; }
.pad .t { font-family: var(--f-text); font-size: var(--fs-body); font-weight: 700; }
.pad .go { background: var(--c-press); color: var(--c-on-press); }
.scrim { position: fixed; inset: 0; z-index: 20; background: var(--c-backdrop); }

.memo { min-height: 44px; border: 0; border-radius: 12px; background: var(--c-card); color: var(--c-hint); text-align: left; padding: 0 14px;
  font-size: var(--fs-body); display: flex; align-items: center; gap: 8px; }
.memo b { color: var(--c-text); font-size: var(--fs-small); letter-spacing: .06em; }

/* ページ下の1行（非公式の断り）。1画面の外に置く */
.footline { max-width: 1000px; margin: 0 auto; padding: 16px 12px 24px; font-size: var(--fs-small); line-height: 1.7; letter-spacing: .04em; }
.footline a { color: var(--c-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--felt); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---- 6. B ラック案: 大きなタイル立て＋選んだ場所の候補パネル ---- */
.brack { display: grid; grid-template-columns: repeat(var(--slots, 5), 1fr); gap: 8px; position: relative; }
.brack .rack { height: 76px; background: var(--c-card); }
.brack .rack.is-fixed-r { background: var(--part-red); } .brack .rack.is-fixed-b { background: var(--part-blue); } .brack .rack.is-fixed-y { background: var(--part-yellow); }
.brack .rack.is-sel { outline: 3px solid var(--c-band); outline-offset: 2px; }
.brack .rack.is-sel::after { content: ""; position: absolute; bottom: -12px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--c-band); }
:root[data-theme="dark"] .brack .rack.is-sel { outline-color: var(--mint); }
:root[data-theme="dark"] .brack .rack.is-sel::after { border-top-color: var(--mint); }
.brack .rack-link { right: -18px; }
.panel { background: var(--c-card); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cand { display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px; }
.cand .k { grid-column: span 4; }
.cand .k.w5 { grid-column: span 5; }
.cand .k.all { grid-column: 1 / -1; }
.k { min-height: 48px; border: 0; border-radius: 10px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--f-num); font-size: 20px; line-height: 1; color: var(--c-text); }
.k small { font-family: var(--f-text); font-size: 13px; font-weight: 700; }
.k--r { background: var(--part-red-tint); } .k--b { background: var(--part-blue-tint); } .k--y { background: var(--part-yellow-tint); }
.k.is-no { background: var(--c-field); color: var(--c-hint); text-decoration: line-through; text-decoration-thickness: 2px; }
.k--r.is-yes { background: var(--part-red); color: var(--on-part-red); }
.k--b.is-yes { background: var(--part-blue); color: var(--on-part-blue); }
.k--y.is-yes { background: var(--part-yellow); color: var(--on-part-yellow); }
.k.is-yes::after { content: "◎"; font-family: var(--f-text); font-size: 14px; }
.k.is-seen { background: var(--c-field); color: var(--c-hint); }
/* B案: ×にしても何色だったかが分かるように、下に部品の色の線を残す（A案は位置で分かるので付けない。付けると格子が縞になってうるさい） */
.k--r.is-no, .k--r.is-seen { box-shadow: inset 0 -4px 0 var(--part-red); }
.k--b.is-no, .k--b.is-seen { box-shadow: inset 0 -4px 0 var(--part-blue); }
.k--y.is-no, .k--y.is-seen { box-shadow: inset 0 -4px 0 var(--part-yellow); }

/* ---- 7. 得点計算（ロストシティ）: 色ごとの列。実物の「探検の列」と同じ向き ---- */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.who button { border: 0; border-radius: 16px; min-height: 64px; padding: 6px 12px; text-align: left; cursor: pointer;
  background: var(--c-card); color: var(--c-text); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; }
.who button[aria-selected="true"] { background: var(--c-band); color: var(--c-on-band); }
:root[data-theme="dark"] .who button[aria-selected="true"] { outline: 2px solid var(--mint); outline-offset: -2px; }
.who .nm { font-weight: 700; font-size: var(--fs-body); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .sub { grid-column: 1; font-size: var(--fs-small); font-weight: 700; line-height: 1.3; }
.who .sum { all: unset; grid-column: 2; grid-row: 1 / span 2; font-family: var(--f-num); font-size: 24px; line-height: 1; }
.who .tag { height: 20px; padding: 0 6px; font-size: 11px; }
.seg--s { display: flex; gap: 4px; }
.seg--s button { flex: 1; min-height: 44px; border: 0; border-radius: 12px; background: var(--c-card); color: var(--c-text); font-weight: 700; font-size: var(--fs-body); cursor: pointer; }
.seg--s [aria-pressed="true"] { background: var(--c-text); color: var(--c-page); }
.seg--s .num { font-size: 13px; margin-left: 4px; }
.lc { background: var(--c-card); border-radius: 16px; padding: 8px 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px 6px; }
.lc__h { height: 36px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-body); }
.lc__h--y { background: var(--part-yellow); color: var(--on-part-yellow); }
.lc__h--b { background: var(--part-blue); color: var(--on-part-blue); }
.lc__h--w { background: var(--part-white); color: var(--on-part-white); box-shadow: inset 0 0 0 2px var(--part-white-line); }
.lc__h--g { background: var(--part-green); color: var(--on-part-green); }
.lc__h--r { background: var(--part-red); color: var(--on-part-red); }
.lc__cell { height: var(--lch, 32px); border: 0; border-radius: 6px; background: var(--c-field); color: var(--c-hint); cursor: pointer; padding: 0;
  font-family: var(--f-num); font-size: 16px; line-height: 1; }
.lc__cell.wg { font-family: var(--f-text); font-weight: 700; font-size: 13px; }
.lc__cell.on.y { background: var(--part-yellow); color: var(--on-part-yellow); }
.lc__cell.on.b { background: var(--part-blue); color: var(--on-part-blue); }
.lc__cell.on.wh { background: var(--part-white); color: var(--on-part-white); box-shadow: inset 0 0 0 2px var(--part-white-line); }
.lc__cell.on.g { background: var(--part-green); color: var(--on-part-green); }
.lc__cell.on.r { background: var(--part-red); color: var(--on-part-red); }
.lc__pts { height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lc__pts b { font-family: var(--f-num); font-weight: 400; font-size: 20px; }
.lc__pts small { font-size: 11px; font-weight: 700; color: var(--c-hint); margin-top: 3px; }
.lc__gap { grid-column: 1 / -1; height: 3px; }

/* ---- 8. 始める前の画面 ---- */
.start { display: flex; flex-direction: column; gap: 12px; }

/* ---- 9. 道具の一覧（1行1道具） ---- */
.list-head { padding: 16px 4px 4px; }
.list-head h1 { font-size: var(--fs-head); font-weight: 700; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt"; }
.list-head p { font-size: var(--fs-small); line-height: 1.7; }
.tl { display: flex; flex-direction: column; gap: 4px; }
.tl a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 10px;
  background: var(--c-card); border-radius: 16px; color: var(--c-text); text-decoration: none; }
.tl .face { width: 40px; height: 40px; border-radius: 10px; background: var(--felt); display: grid; place-items: center; }
.tl .face img { width: 26px; height: 26px; display: block; }
.tl .nm { font-weight: 700; font-size: var(--fs-body); line-height: 1.4; }
.tl .meta { font-size: var(--fs-small); line-height: 1.5; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl .meta .tag { height: 20px; padding: 0 6px; font-size: 11px; }
.tl .go { width: 10px; height: 10px; border-top: 3px solid var(--c-text); border-right: 3px solid var(--c-text); transform: rotate(45deg); }

/* ---- パソコン（900px以上）: 左に情報、右に押す場所。どちらも1画面に収める ---- */
@media (min-width: 900px) {
  .play { max-width: 1000px; padding: 24px; display: grid; grid-template-columns: 380px 1fr; gap: 12px 16px; align-items: start; }
  .play > .bar { grid-column: 1 / -1; }
  .play > .side { display: flex; flex-direction: column; gap: 12px; }
  .play > .main { display: flex; flex-direction: column; gap: 12px; }
  .play { --ch: 44px; --rack-h: 72px; --seen-h: 40px; --lch: 36px; }
  .board .g-num { font-size: 20px; }
  .c { font-size: 20px; }
  .play--list { display: block; max-width: 1000px; }
  .play--list .tl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 899px) { .side, .main { display: contents; } }

/* ---- 高さが低いスマホ（iPhone SE 375×667）: 格子とタイルを詰める ---- */
@media (max-height: 700px) and (max-width: 899px) {
  .play { --ch: 32px; --rack-h: 46px; --seen-h: 30px; --lch: 29px; gap: 6px; }
  .seen .lbl { display: none; }
  .bar { min-height: 48px; padding: 2px 4px; }
  .tabs button, .sum, .seg--s button { min-height: 40px; }
  .memo { display: none; }
  .who button { min-height: 52px; }
  .brack .rack { height: 60px; }
  .k { min-height: 44px; }
  .seen { padding: 6px; gap: 4px; }
}