/* janken.microfund.co.jp だけの足し（土台の style.css は、アプリ横丁の写し）。スマホの幅 360px が主 */
h1 { font-size: 20px; margin: 0 0 6px; }
.main { padding-top: 12px; }
h1, h2, h3, .main p, .main li, .foot p, .foot li { overflow-wrap: anywhere; }
.lead-s { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }
.internal-banner { font-size: 13px; line-height: 1.5; background: #fff8e1; border: 1px solid #b98900; color: #6b5200; border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }
.board { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 8px; margin: 0 0 12px; }
.stage { display: flex; gap: 10px; align-items: center; }
.char-box { flex: 0 0 84px; }
.char { display: block; width: 84px; height: 84px; }
.char .m { display: none; }
.board[data-mood="idle"] .m-idle, .board[data-mood="think"] .m-think, .board[data-mood="win"] .m-win,
.board[data-mood="lose"] .m-lose, .board[data-mood="draw"] .m-draw { display: inline; }
.stage-text { min-width: 0; flex: 1 1 auto; }
.char-name { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0 0 2px; }
.opp-name { margin-left: 6px; }
.bubble { position: relative; margin: 0; padding: 6px 10px; background: #eef1f6; border-radius: 10px; font-size: 14px; line-height: 1.5; min-height: 54px; display: flex; align-items: center; }
.call { text-align: center; font-weight: 700; font-size: 18px; line-height: 1.4; margin: 6px 0 2px; min-height: 26px; }
.versus { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side { flex: 0 0 84px; display: flex; flex-direction: column; align-items: center; }
.side-name { font-size: 12px; color: var(--muted); line-height: 1.4; }
.hand-name { font-size: 13px; font-weight: 700; line-height: 1.4; }
.hand { display: block; }
.side-you { color: #0b5cad; }
.side-ai { color: #46508f; }
.hand-none { color: #b8bfcc; }
.side .hand-name { color: var(--text); }
.result { flex: 1 1 auto; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.4; margin: 0; min-width: 0; white-space: nowrap; }
.result-W { color: #14602b; }
.result-L { color: #a01818; }
.result-D { color: var(--muted); }
.read { font-size: 13px; line-height: 1.5; margin: 4px 0 6px; min-height: 39px; }
.moves { display: flex; gap: 8px; margin: 0 0 8px; }
.move { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 2px 4px; font: inherit; font-weight: 700; font-size: 14px; line-height: 1.4; color: #0b5cad; background: #fff; border: 2px solid #0b5cad; border-radius: 12px; cursor: pointer; touch-action: manipulation; }
.move .hand { width: 48px; height: 48px; }
.move span { color: var(--text); }
.move:disabled { opacity: 0.5; cursor: default; }
.move:active { background: #e6f0fb; }
.limit { font-weight: 700; margin: 6px 0; }
.stats { margin: 0 0 4px; }
.stats li { padding: 0 4px; }
.left { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; min-height: 18px; }
.voice-row { margin: 0 0 6px; text-align: right; min-height: 44px; }
.voice-btn { display: inline-block; flex: none; width: auto; padding: 6px 16px; min-height: 44px; font-size: 14px; font: inherit; font-weight: 700; cursor: pointer; }
.voice-btn[hidden] { display: none; }
/* 「声が出ます」の 1行（ボタンの左・同じ行の中。行の高さ 44px を変えない） */
.voice-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.voice-hint { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12px; line-height: 1.4; color: var(--muted); max-height: 34px; overflow: hidden; }
.voice-hint[hidden] { display: none; }
button.btn { font: inherit; font-weight: 700; cursor: pointer; }
.btn-quiet { border-color: var(--border); color: var(--muted); font-weight: 400; font-size: 14px; width: 100%; }
.opp-form, .reset-form { margin: 0 0 14px; }
.opp-form select { font: inherit; font-size: 16px; min-height: 44px; padding: 6px 10px; margin: 4px 0 8px; width: 100%; }
.footer-lang { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; }
.footer-lang a { min-height: 32px; display: inline-flex; align-items: center; }
.footer-lang a.on { font-weight: 700; color: inherit; text-decoration: none; }
.foot-app { text-align: center; margin: 4px 0 18px; }
.foot-app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 22px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: inherit; font-weight: 700; text-decoration: none; }
.tbl { table-layout: fixed; }
.tbl th, .tbl td { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lead-s { margin-bottom: 6px; }
/* 下の欄の「マイクロファンドのほかのサービス」（遊ぶ所より下・小さめ） */
.svc { margin: 0 0 14px; }
.svc-title { font-size: 14px; margin: 0 0 6px; color: var(--muted); }
.svc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.svc-list li { margin: 0; }
.svc-list a { display: block; padding: 8px 12px; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.svc-name { display: block; font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--link); }
.svc-desc { display: block; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
/* 3D の表示（js/view3d.js）。canvas を盤の上に重ね、SVG の絵は場所取りのために残して透明にする。#game に .v3d が付いている間だけ効く */
.v3d .board { position: relative; }
.v3d-canvas { position: absolute; left: 0; top: 0; display: block; pointer-events: none; z-index: 1; }
.v3d .char, .v3d .versus .hand-R, .v3d .versus .hand-S, .v3d .versus .hand-P, .v3d .board[data-mood="think"] .versus .hand { opacity: 0; }
.view-row { margin: 0; }
.view-btn { display: inline-block; flex: none; width: auto; padding: 6px 16px; min-height: 44px; margin: 0 0 12px; font-size: 14px; }
.view-btn[hidden] { display: none; }
/* 2つの手の間を詰める（2026-10-06。社長「拳の間が開きすぎています。」）。前は、2つの手を盤の左右の端に置いていた（space-between ＋ まん中の
   結果の字が残りの幅を全部取る）＝手と手の間が 360px の幅で 154px・PC の幅で 554px。まん中に寄せて、結果の字の幅を決まった値にする＝どの幅でも 116px。
   結果の字の幅（100px）は、いちばん長い「あなたの勝ち／負け」（16px の太字で 96px）が入る値。3D の手は、この並びの場所を測って描く（view3d.js の layout） */
.versus { justify-content: center; gap: 4px; }
.side { flex: 0 0 72px; }
.result { flex: 0 0 100px; width: 100px; }
/* 相手の AI の顔（2026-10-06。会社の X のアイコンの絵を縮めた物。main.py の FACE_IMAGE_ENABLED）。丸く切り抜いて、枠を付ける。
   1回ごとに替わるのは、枠の様子（data-look 0〜3）だけ。顔そのものの色は変えない。光る・動く飾りは付けない。
   3D の表示の時も、顔はこの絵のまま（3D で描くのは、2つの手だけ。js/view3d.js） */
.char-face { border-radius: 50%; object-fit: cover; background: #000; border: 3px solid #e0a526; box-sizing: border-box; }
.v3d img.char-face { opacity: 1; }
.char-face[data-look="1"] { border-color: #3f8fe0; }
.char-face[data-look="2"] { border-color: #b9c0cc; box-shadow: 0 0 0 2px #e0a526; }
.char-face[data-look="3"] { border-color: #e0a526; box-shadow: 0 0 0 2px #3f8fe0; }
/* 相手の顔と、自分のキャラクターを、2つの手の外側に、対に置く（2026-10-06。社長 09:48 ごろ「赤枠のところの位置にアイコンがあるべき」＝
   相手の顔を、相手の手の右へ）。並びは「［自分のキャラクター］［自分の手］ 結果 ［相手の手］［相手の顔］」。2つの手の間（116px）は変えない。
   スマホの幅では、左右に入る所が 25px しか無いので、顔とキャラクター（56px）を、それぞれの手のすぐ上に置く。520px より広い画面では、
   手の外側に 80px で置く（並びの外＝position: absolute）。3D の canvas（z-index 1）より上。左上の段は、相手の名前と吹き出しだけ */
.ava { display: block; position: relative; z-index: 2; line-height: 0; margin: 2px 0; }
.char-box.ava { flex: none; }
.ava .char, .ava .mychar { display: block; width: 56px; height: 56px; }
.versus { align-items: flex-end; }
.versus .result { align-self: flex-end; margin-bottom: 39px; }
@media (min-width: 520px) {
  .versus { align-items: center; }
  .versus .result { align-self: center; margin-bottom: 0; }
  .side { position: relative; }
  .ava { position: absolute; top: 50%; margin: -40px 0 0; }
  .side-you .ava { right: calc(100% + 8px); }
  .side-ai .ava { left: calc(100% + 8px); }
  .ava .char, .ava .mychar { width: 80px; height: 80px; }
}
/* 相手の顔「マイク」（templates/_mike.html。コードで描いた SVG。2026-10-06）。表情 5つを、盤の data-mood（相手の様子）で切り替える。
   3D の表示の時も、この絵のまま見せる（3D で描くのは、2つの手だけ） */
.char-mike .k { display: none; }
.board[data-mood="idle"] .k-idle, .board[data-mood="think"] .k-think, .board[data-mood="win"] .k-win,
.board[data-mood="lose"] .k-lose, .board[data-mood="draw"] .k-draw { display: inline; }
.v3d .char.char-mike { opacity: 1; }
/* あなたの勝率（2026-10-06。社長「勝率を表示してください。」）。結果の字のすぐ下（2つの手の間）＝手を出した後に、必ず目に入る所。
   並びの外（position: absolute）に置く＝手のボタンの場所を動かさない。成績の行にも、同じ数を出す。
   名前（あなた・マイク）は、アイコンのすぐ上（社長「アイコンの上に名前を表示するように」）。スマホの幅は、もとから 名前 → アイコン → 手 の縦並び。
   広い画面は、名前を、手の外側のアイコンの上へ移す（相手の側は、ここ。自分の側は charsel.css＝自分のキャラクターが出ている時だけ） */
.versus .result { position: relative; }
.you-rate { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: block; width: 116px; text-align: center; font-size: 12px; line-height: 1.3; font-weight: 400; color: var(--text); white-space: nowrap; }
.you-rate strong { display: block; font-size: 15px; line-height: 1.3; }
.side-name { font-weight: 700; }
.stats li { min-width: 0; }
.stat-k { overflow-wrap: anywhere; }
@media (min-width: 520px) {
  .versus .result { align-self: flex-start; margin-top: 6px; }
  .side-ai .side-name { position: absolute; left: calc(100% + 8px); width: 80px; text-align: center; top: 50%; margin-top: -60px; }
}
/* 盤のいちばん下の行: 「キャラクターを変える」（左）と「最初からやり直す」（右）。手のボタン・入金のボタンから離す。どちらも、枠だけの控えめな見た目 */
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 10px 0 0; }
.reset-open { flex: none; display: inline-block; width: auto; min-height: 44px; padding: 9px 14px; font-size: 14px; line-height: 1.6; font-weight: 700; box-sizing: border-box; border: 1.5px solid #8a94a6; border-radius: 8px; color: var(--text); background: var(--panel); margin-left: auto; }
/* 確かめの箱（dialog）と、確かめのページ（2026-10-06 深夜に作り直し。社長「消すを左に置いてください」「ボタンを見やすくしてください」）。
   左＝する方（「消す」＝赤い地に白い字・「戻す」＝濃い灰青の地に白い字）・右＝「やめる」（白い地・濃い枠・濃い字）。2つを半分ずつ・間 12px・高さ 48px から・16px の太字。
   初めの焦点は「やめる」（js/game.js・autofocus）。字と地のコントラストは、どれも 4.5 より上（白 on #b3261e＝6.5・白 on #334155＝10.3・#1f2937 on 白＝14.7） */
.reset-dialog { width: min(92vw, 420px); max-height: 90vh; box-sizing: border-box; border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px 16px; color: var(--text); background: var(--panel); font-size: 15px; line-height: 1.9; }
.reset-dialog::backdrop { background: rgba(10, 14, 23, 0.5); }
.reset-dialog p, .reset-text { margin: 0 0 16px; overflow-wrap: anywhere; line-height: 1.9; }
.reset-warn { font-weight: 700; }
.reset-warn-line { display: block; margin: 6px 0; }
.reset-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.reset-actions > * { min-width: 0; margin: 0; }
.reset-actions .btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 8px; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.5; box-sizing: border-box; text-align: center; cursor: pointer; border-radius: 10px; border-width: 2px; border-style: solid; text-decoration: none; }
.reset-actions .btn.reset-no { background: #fff; color: #1f2937; border-color: #334155; }
.reset-actions button.btn.reset-yes { background: #b3261e; color: #fff; border-color: #b3261e; }
.reset-actions button.btn.reset-yes.reset-yes-soft { background: #334155; color: #fff; border-color: #334155; }
.reset-actions .btn:focus-visible { outline: 3px solid #0b57d0; outline-offset: 3px; }
.reset-actions .btn:active { transform: translateY(1px); filter: brightness(0.92); }
/* ◯勝◯敗（2026-10-06 13:47 社長「〇勝〇敗を表示してください。」）: 結果の字のすぐ下に、勝ち負けの数（太字）→ その下に勝率。
   「連勝」などの表示は足さない。光る・動く飾りなし */
.you-rate { width: 150px; }
.you-rate strong.you-record { display: block; font-size: 13px; line-height: 1.35; font-weight: 700; }
/* スマホの幅で、上の段のすき間を少し詰める（「連続で5回やる」のボタンまでを、640px の高さの画面に入れるため。手のボタンの大きさは変えない） */
@media (max-width: 519px) {
  .main { padding-top: 6px; }
  .lead-s { margin-bottom: 2px; line-height: 1.5; }
  .voice-row { margin-bottom: 2px; }
  .board { padding-top: 6px; }
  .char-name { margin-bottom: 0; }
  .call { margin: 2px 0 0; }
  .ava { margin: 0; }
  .ava .char, .ava .mychar { width: 52px; height: 52px; }
  .read { margin: 2px 0 4px; }
}
/* 字の無い吹き出し（あいこの時）は、場所だけ空けて、箱を見せない。「読んでいます…」などの字が入ると、また見える */
.bubble:empty { visibility: hidden; }
/* 盤の中の成績（2026-10-07。社長 10/7 0時「上の盤（手のボタンの所）」＝マイクの成績を、盤の右に）。templates/_board.html の .bd-duo。
   左＝あなた・右＝マイク（2つの手・顔の並びと同じ向き）。それぞれ 3行: ◯勝◯敗◯あいこ（太字）→ 勝率 → 残高（数字は太字）。字は 12px から。
   スマホの幅: 2つの手のすぐ下に、半分ずつの 1段（手のボタンは、この段の高さの分だけ下がる）。
   760px から: 顔の外側（左の箱は、あなたの顔の左・右の箱は、マイクの顔の右）に、並びの外（position: absolute）で置く＝手のボタンは動かない。
   ここでは、勝率と残高の数字を、見出しの下の行に出す（箱の幅 126px に「マイクの残高: 10,000」「Mike's win rate 33.3%」が 1行で入らないため。左右とも 5行にそろう）。
   光る・動く飾りなし。「連勝」の類は足さない。色は、結果の字と同じ決まりにはしない（勝ち負けで色を変えない） */
.vs-wrap { position: relative; }
.bd-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; margin: 0; }
.bd-side { min-width: 0; text-align: center; }
.bd-side p { margin: 0; font-size: 12px; line-height: 15px; color: var(--text); overflow-wrap: anywhere; }
.bd-side .bd-rec { font-size: 12px; font-weight: 700; }
.bd-rate-v { font-weight: 700; white-space: nowrap; }
.bd-num { font-size: 14px; line-height: 1; font-weight: 700; margin-left: 2px; white-space: nowrap; }
.bd-you { border-right: 1px solid var(--border); padding-right: 4px; }
.bd-mike { padding-left: 0; }
@media (max-width: 519px) { .read { margin-top: 2px; } }
@media (min-width: 520px) and (max-width: 759px) {
  .bd-duo { max-width: 428px; margin: 4px auto 0; }
}
@media (min-width: 760px) {
  .bd-duo { display: block; margin: 0; }
  .bd-side { position: absolute; top: 50%; transform: translateY(-56%); width: 126px; z-index: 2; }
  .bd-you { right: calc(50% + 222px); text-align: right; border-right: 0; padding-right: 0; }
  .bd-mike { left: calc(50% + 222px); text-align: left; }
  .bd-side p { font-size: 12px; line-height: 16px; }
  .bd-side p + p { margin-top: 3px; }
  .bd-rate-v { display: block; font-size: 15px; line-height: 19px; }
  .bd-side .bd-rec { font-size: 14px; }
  .bd-num { display: block; font-size: 17px; line-height: 20px; margin-left: 0; }
}
/* 左＝あなた・右＝マイクの間の、縦の線と「VS」（2026-10-07 社長「縦線とｖｓつけましょう。」「縦線ずれてます。」）。
   線は、.vs-wrap の真ん中に 1本（顔と手の所 → スマホの幅では、すぐ下の成績の 2列まで）。盤の下の箱・連続のまとめ・回ごとの一覧の境い目も、同じ真ん中（css/vbet.css）。
   結果の字（あなたの勝ち・負け）と「VS」は、線の上に、盤の地の色で載せる（線が字を貫かない）。3D の canvas（z-index 1）より上。光る・動く飾りなし。
   「VS」は、スマホの幅では、顔と顔の間（結果の字の上）・520px からは、2つの手の間（結果の字の下）。手のボタンの位置は動かない（並びの外） */
.vs-wrap::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--border); z-index: 0; }
.versus .result { z-index: 2; background: var(--panel); }
.versus .result:empty { background: transparent; }
.vs-mark { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); z-index: 2; padding: 1px 6px; font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; }
.bd-duo { column-gap: 0; position: relative; }
.bd-you { border-right: 0; padding-right: 4px; }
.bd-mike { padding-left: 4px; }
@media (min-width: 520px) { .vs-mark { top: auto; bottom: 14px; } }
@media (min-width: 760px) { .bd-duo { position: static; } .bd-you { padding-right: 0; } .bd-mike { padding-left: 0; } }
/* スマホの幅で、残高が 7桁＋「円」でも 1行に入るように、数字を 13px に（太字のまま。行の高さは 15px のまま＝手のボタンは動かない） */
@media (max-width: 519px) { .bd-num { font-size: 13px; margin-left: 1px; } .bd-you { padding-right: 2px; } .bd-mike { padding-left: 2px; } }

/* 写真のように見える顔（main.py の FACE_PHOTO_ENABLED が入の時だけ出る img.char-photo。2026-10-07 夜）。丸く切り抜くだけ（枠なし＝SVG の顔と同じ）。
   大きさは、上の .char・.ava .char の決まりのまま（スマホ 52〜56px・広い画面 80px）。3D の表示でも見せる（.v3d .char.char-mike） */
img.char-photo { border-radius: 50%; object-fit: cover; background: #22304f; }
img.char-photo.char-mika { background: #e7c3bb; }
/* 顔のそばの 1行「AI で作った画像です（実在の人ではありません）」（法務部の条件 1。写真の顔が入の時だけ出る。templates/_board.html）。いつも見える字・12px・地との差がはっきりした色。
   スマホの幅: 相手の成績の段のすぐ下に 1行（手のボタンは、この 1行の分だけ下がる）。760px から: 右に寄せて「読み」の行の右に置く（float＝手のボタンは動かない） */
.face-ai-note { margin: 0; font-size: 12px; line-height: 15px; color: var(--text); text-align: center; overflow-wrap: anywhere; }
@media (min-width: 760px) { .face-ai-note { float: right; margin: 4px 0 0 12px; line-height: 19.5px; text-align: right; } }