/* 自分のキャラクター（main.py の CHAR_SELECT_ENABLED が入の時だけ、base.html から読まれる）。スマホの幅 360px が主。字は 12px 以上。
   自分の側の絵の置き方と大きさは、相手の顔と同じ決まり（assets/css/janken.css の .ava）。
   顔は、盤の data-mood（相手の様子）の逆（相手が勝ち＝自分は負けの顔）。社長 10/6「顔の表情が変わるのはナイスポイントですね。」＝残す。
   5体の並び（.mc）は、開いている時だけ、2つの手の段のすぐ下に出る（閉じている時は、何も足さない） */
.mychar .mm { display: none; }
.board[data-mood="idle"] .mm-idle, .board[data-mood="think"] .mm-think, .board[data-mood="win"] .mm-lose,
.board[data-mood="lose"] .mm-win, .board[data-mood="draw"] .mm-draw { display: inline; }
.mc { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px 0 2px; margin: 4px 0 6px; scroll-margin-top: 8px; }
.mc-title { font-size: 14px; line-height: 1.5; margin: 0 0 4px; }
.mc-text { font-size: 12px; line-height: 1.5; color: var(--text); margin: 0 0 4px; overflow-wrap: anywhere; }
.mc-form { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 6px; }
.mc-btn { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; min-height: 44px; padding: 4px 1px 3px; font: inherit; color: var(--text); background: #fff; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.mc-btn.on { border-color: #0b5cad; background: #e6f0fb; }
.mc-btn .mychar { display: block; width: 44px; height: 44px; }
.mc-name { font-size: 12px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; text-align: center; }
.mc-now { font-size: 12px; line-height: 1.3; color: #0b5cad; }
/* 閉じている時の「キャラクターを変える」（盤のいちばん下。手のボタンより下＝手のボタンの場所を動かさない） */
.mc-change { flex: none; }
.mc-change { display: inline-block; width: auto; min-height: 44px; padding: 9px 14px; font-size: 14px; line-height: 1.6; font-weight: 400; box-sizing: border-box; border-color: var(--border); color: var(--text); }
/* 広い画面: 「あなた」の名前を、自分のキャラクターのすぐ上へ（相手の側は janken.css） */
@media (min-width: 520px) {
  .side-you .side-name { position: absolute; right: calc(100% + 8px); width: 80px; text-align: center; top: 50%; margin-top: -60px; }
}