/* はじき石ゴルフ: 苔庭のミニゴルフの色の組（2026-10-23 配色の型を崩す）。地は苔の緑（彩度 40%・明度 74%）、主なボタンと選択中はピンの旗の朱に白い字（8:1。2026-10-23 山吹をやめた）、文字は墨緑。
   素材は苔色の羅紗の盤と木の縁。帯の区切りは木の色の線。--shu は強調の文字色（濃い苔の緑。太字で区別）。
   ホームと遊んでいる最中で同じ組を使う（--ui-red などは app.js が枠に、部屋の画面では .tb に渡す）。
   角丸は 6px まで・影なし・枠の中に枠を入れない。
   ホーム・帯・結果は共通の shell.home / bar / result。ここでは hg- の前置きで地の色などを足すだけ */
:root { --ink: #1a2a14; --paper: #b7d7a2; --table: #92cb71; --wood: #7a4f2c; --shu: #23482d; --sub: #365328; --acc: #b5432e; --acc-ink: #ffffff; }

.tb { position: relative; overflow: hidden; font-family: var(--ui-body, "Zen Kaku Gothic New", sans-serif); --ui-display: "Kaisei Decol", serif; color: var(--ink); user-select: none; --ui-red: var(--acc); --ui-red-ink: var(--acc-ink); --ui-card: var(--paper); --ui-ink: var(--ink); --ui-sub: var(--sub); -webkit-user-select: none; }
.tb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.tb.aim .tb-cv { cursor: crosshair; }

.tb-top { position: absolute; left: 0; right: 0; top: 0; min-height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 8px 16px; background: var(--paper); border-bottom: 3px solid var(--wood); }
.tb-hole { font-size: 21px; white-space: nowrap; }
.tb-hole b { font-size: 32px; font-weight: normal; }
.tb-hole small { font-size: 16px; color: var(--sub); margin-right: 8px; }
.tb-hole .par { margin-left: 10px; font-size: 17px; color: var(--sub); }
.tb-pl { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 1; justify-content: flex-end; }
.pc { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 4px; font-size: 18px; border-bottom: 3px solid transparent; white-space: nowrap; }
.pc i { align-self: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(30, 20, 10, .5); }
.pc b { font-size: 24px; font-weight: normal; }
.pc small { font-size: 14px; color: var(--sub); }
.pc.on { border-color: var(--shu); }
.pc.dn { opacity: .5; }

.tb-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; background: var(--paper); border-top: 3px solid var(--wood); }
.tb-msg { flex: 1; margin: 0; font-size: 20px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tb-tools { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.tb-stamps { position: absolute; left: 12px; right: 12px; bottom: 76px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: none; }
.tb-stamps > * { pointer-events: auto; }
.tb-stamps[hidden] { display: none; }
.nohud .tb-top, .nohud .tb-bot, .nohud .tb-stamps { display: none; }

.tb-banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 56px; color: var(--ink); opacity: 0; pointer-events: none; -webkit-text-stroke: 8px var(--paper); paint-order: stroke fill; }
.tb-banner.show { animation: pop 1.7s ease-out forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

.tb-slot { position: absolute; inset: 0; pointer-events: none; }
.tb-slot > * { pointer-events: auto; }
/* 部屋の画面も共通の帯・小さなウィンドウ・結果（party.js）。スタンプは右下の操作の置き場と言葉の帯の上 */
.hg-barred .tb-stamps { bottom: 116px; }
.opt { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.opt > span { font-size: 19px; color: var(--sub); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.seg .num { width: 6em; }
/* 選んでいるもの: 朱の地＋太い墨の枠。選んでいないものは薄く */
.seg .ui-btn.on { background: var(--acc); border: 3px solid var(--ink); color: var(--acc-ink); box-shadow: none; }
.seg .ui-btn.sub { opacity: .62; }
.seg .ui-btn.sub:hover, .seg .ui-btn.sub:focus-visible { opacity: 1; }
table.sc { width: 100%; border-collapse: collapse; font-size: 18px; }
table.sc td { padding: 7px 8px; border-bottom: 1px solid rgba(42, 33, 24, .15); white-space: nowrap; }
table.sc td.d { color: var(--sub); }
.dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; border: 1.5px solid rgba(30, 20, 10, .45); }
ol.rk { list-style: none; margin: 0; padding: 0; font-size: 17px; }
ol.rk li { display: flex; gap: 10px; padding: 5px 2px; border-bottom: 1px dotted rgba(42, 33, 24, .25); }
ol.rk li span { width: 2em; color: var(--sub); }
ol.rk li b { margin-left: auto; font-weight: normal; }
ol.rk li.me { color: var(--shu); }

/* ---- 共通の 3 つの画面に合わせる（hg- の前置き。共通部品の .sh-* の並びは変えない） */
.hg-tbbox { position: absolute; inset: 0; }
.hg-home { background: var(--paper); }
/* 人数は合言葉とオンラインを分けた自前の行で出す（共通部品の合計の行は隠す） */
.hg-home .sh-room [data-count] { display: none; }
.hg-count { margin: 8px 0 0; font-size: 18px; color: var(--ui-sub); }
.hg-roomnote { margin: 0; font-size: 16px; color: var(--ui-sub); }
/* 下の段: 遊び方は共通部品のボタンのまま。初めて遊ぶ前には使わない設定・記録・ランキング・詳しくは、小さめの文字のリンク寄りにして対戦のボタンと差をつける（並びと位置は共通のまま） */
.hg-home .sh-foot .ui-btn:not(:first-child) { background: transparent; border-color: transparent; font-size: 16px; padding: 8px 6px; text-decoration: underline; text-underline-offset: 4px; }
.hg-home .sh-foot .ui-btn:not(:first-child):hover { background: transparent; border-color: var(--ink); }
/* ホームの絵: CPU 同士のデモ。押しても何も起きない */
.hg-demo { position: absolute; inset: 0; pointer-events: none; }
/* 図は渡された箱（ホーム 260×160・部屋の説明画面 200×124）いっぱいに描く */
.hg-pic { width: 100%; height: 100%; pointer-events: none; }
/* 小さなウィンドウ（詳しく・設定・遊び方）の中 */
.hg-win { font-size: 19px; }
.hg-lead { margin: 0 0 12px; font-size: 22px; line-height: 1.45; }
.hg-note { margin: 6px 0; font-size: 17px; line-height: 1.5; color: var(--sub); }
.hg-h3 { margin: 16px 0 6px; font-size: 20px; }
.hg-win table.sc td { white-space: normal; }
.hg-next { margin-top: 14px; }
/* ランキング: 数の札を 3 つ横に。自己ベストは打数を大きく */
.hg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 8px; }
.hg-tile { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-top: 2px solid var(--ink); }
.hg-tile b { font-size: 36px; line-height: 1.1; }
.hg-tile span { font-size: 15px; color: var(--sub); text-align: center; }
.hg-best td:last-child { text-align: right; white-space: nowrap; }
.hg-best td b { font-size: 26px; color: var(--shu); }
/* 遊んでいる最中: 上 64px は共通の帯。人の札はその下、言葉の帯は右下の操作の置き場を避ける */
.hg-bar { background: var(--paper); border-bottom: 3px solid var(--wood); }
.hg-bar .sh-info2 { white-space: nowrap; overflow: hidden; min-width: 0; }
.hg-barred .tb-top { top: 64px; }
.hg-barred .tb-hole { display: none; }
.hg-barred .tb-pl { justify-content: flex-start; }
.hg-barred .tb-bot { height: 104px; padding-right: 200px; }
.hg-barred .tb-msg { -webkit-line-clamp: 4; font-size: 19px; }
.hg-barred.pt .tb-msg { font-size: 17px; }
.hg-barred.pt .pc { font-size: 16px; }
.hg-barred.pt .pc b { font-size: 21px; }
.hg-result .hg-sub { margin: -8px 0 0; font-size: 20px; color: var(--sub); }
.hg-result .hg-sub b { color: var(--shu); font-weight: normal; }
.hg-rank { min-width: 420px; }
.hg-rank:empty { display: none; }
.hg-rank h3 { margin: 0 0 4px; font-size: 18px; font-weight: normal; color: var(--sub); }
.hg-rank .hi { color: var(--shu); font-weight: normal; }
.hg-rank .note { margin: 4px 0 0; font-size: 16px; color: var(--sub); }
/* 強調は苔の緑の太字。.pc.on の下線も苔の緑 */
.hg-note.hi { color: var(--shu); }
.hg-note.hi,.hg-best td b, .hg-result .hg-sub b, .hg-rank .hi, ol.rk li.me { font-weight: bold; }
/* ボタンは角丸 6px まで・影なし。主なボタンは旗の朱に白い字、薄いボタンは地に墨緑の線のボタン */
.shell-stage .ui-btn, .tb .ui-btn { border-radius: 6px; box-shadow: none; }
.shell-stage .ui-btn:not(.sub), .tb .ui-btn:not(.sub) { background: var(--acc); color: var(--acc-ink); border: 2px solid var(--ink); }
.shell-stage .ui-btn.sub, .tb .ui-btn.sub { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.shell-stage .ui-btn.sub:hover, .tb .ui-btn.sub:hover { background: #a4cb8b; }
.shell-stage .ui-btn:disabled, .tb .ui-btn:disabled { opacity: .6; }
.shell-stage .sh-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }