/* 王冠ひとつ: 盤のまわりの置き場所と色だけ。ホーム・帯・結果・ボタンの見た目は共通（shell.js と /ui.css）のまま */
/* 色（2026-10-31 世界観シート world.json: 市立動物園のサル山）:
   地 #713d28（日陰の擬岩の赤茶。HSL 17/48/30）・文字 #f4f7f2（霜の白 8.1）・薄い文字 #e3cdbf・主なボタン #e8811a（熟れ柿。字は焦げ茶 #2a160c 6.2）
   飾り: 緑青 #2e7d6b（帯・盤とウィンドウの縁の鉄パイプ・堀の水）・ブリキ真鍮 #d9b23a（王冠・題字の飾り）
   ボタン（ui-btn）は共通の部品なので上書きせず、shell.home の theme（--ui-red など）で色だけ渡す。
   一番後ろ（枠の外）の色は共通なので触らない。ホーム・遊ぶ画面・部屋で同じ組。canvas 側は view.js の THEME */
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.shell-stage { background: #713d28; --ui-shade: rgba(113, 61, 40, .97); --ui-chip: rgba(232, 129, 26, .3); }
/* 題字（76px）は文字のゲーム名（54px×1.3 ≒ 70px）より 6px 高いので、下のボタンの位置を前と同じに保つ */
.sh-home .sh-logo { margin-bottom: -6px; }
/* 遊び方の札で選んでいる方（shell.js の指定は地の文字色に白い字なので、霜の白の地では焦げ茶の字にする） */
.shell-stage .sh-tabs button[aria-selected="true"] { background: #f4f7f2; color: #2a160c; }
/* 背景（solo.js の drawRock）: 擬岩の段々・右上の麻袋の座布団と柿のヘタ・下の端の鉄パイプの柵と堀の水面 */
.m063-ledges { position: absolute; inset: 0; width: 100%; height: 100%; }
.m063-props { position: absolute; top: 12px; right: 16px; width: 132px; height: 44px; }
.m063-moat { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60px; }
/* 遊んでいる最中の帯: 地の色に緑青の鉄パイプで区切る */
.shell-stage .sh-bar { background: #713d28; border-bottom: 5px solid #2e7d6b; }
/* 小さなウィンドウ: 麻袋の布目に鉄パイプ（緑青）の縁。outline なので大きさは変わらない */
.shell-stage .sh-box {
  outline: 5px solid #2e7d6b; outline-offset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 1.5H6M1.5 0V6' stroke='%23f4f7f2' stroke-opacity='.06' stroke-width='1.2'/%3E%3C/svg%3E");
}

.m063-cv { position: absolute; left: 0; top: 0; touch-action: none; }
.m063-cv[hidden] { display: none; }
/* ホームの絵の CPU 同士のデモ。見せるだけで押しても何も起きない */
.m063-art { display: block; pointer-events: none; }

/* 「詳しく」「設定」の中（共通の小さなウィンドウで開く） */
.m063-keys { margin: 6px 0; padding-left: 1.2em; font-size: 18px; line-height: 1.6; }
.m063-set { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 10px 0; font-size: 18px; }
.m063-row { display: flex; gap: 8px; flex-wrap: wrap; }
.m063-set .ui-btn[aria-pressed="true"] { outline: 3px solid #e8811a; outline-offset: 1px; }
.m063-list { list-style: none; margin: 6px 0; padding: 0; font-size: 16px; }
.m063-list li { display: flex; justify-content: space-between; padding: 3px 2px; border-bottom: 1px solid rgba(244, 247, 242, .25); }
.m063-list li.me { background: rgba(232, 129, 26, .3); }
.m063-mine { font-size: 20px; margin: 4px 0 10px; line-height: 1.5; }
.m063-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.m063-recs > div { border: 1.5px solid rgba(244, 247, 242, .35); padding: 6px 8px; text-align: center; }
.m063-recs span { display: block; font-size: 14px; opacity: .8; }
.m063-recs b { display: block; font-size: 30px; line-height: 1.2; }
.m063-recs small { font-size: 15px; }
.m063-recs .m063-recent { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.m063-recs .m063-wide { grid-column: 1 / -1; }
.m063-quiet { color: #e3cdbf; font-size: 15px; margin: 4px 0; }

/* 遊んでいる最中の［飛びつく］。使えない間は薄く（押しても何も起きない）。「持つ間は飛べない」も 1 行に収める */
.m063-jump { min-width: 220px; touch-action: none; white-space: nowrap; }
.m063-jump.m063-off { opacity: .45; }

/* 結果: 点と一言のすぐ下に［もう一度］だけ。順位の表（最大 9 人）とランキング、控えめの［ホームへ］はその下に詰めて枠に収める */
.shell-stage .m063-table { font-size: 16px; }
.shell-stage .m063-table li { padding: 1px 14px; border-radius: 4px; }
.m063-sub { font-size: 20px; margin: 0; }
.m063-new { color: #ecc95a; font-weight: 700; }
/* 遊び方の図（260×160 の canvas） */
.m063-pic { display: block; margin: 0 auto; }
/* もう少しで自己ベストのときの［もう一度］: ブリキ真鍮の縁（色だけ） */
.m063-gold { outline: 4px solid #d9b23a; outline-offset: 2px; }