/* シリトリ・チェイン・レゾナンス スタイルシート
   （もとはindex.html内の<style>タグに直接書いていたが、ファイルが大きくなってきたので
   分離した。中身は元の<style>タグの中身をそのまま移しただけで、内容の変更はなし。） */
  /* ノイズ画像で紙の質感を出す方向は、controlしても「色がわずかに揺らぐ」程度にしか
     感じられず、かつボタンの境界がぼやける懸念もあったため撤回。代わりに、背景・カード・
     文字色そのものを少し暖色寄りにすることで、テクスチャなしで落ち着いた「紙・インク」の
     雰囲気に寄せている（真っ白・真っ黒ではなく、わずかに黄み寄りのオフホワイト／
     ウォームブラックにするだけの、色調のみの変更）。 */
  :root {
    --bg: #f6f3ec;
    --card: #fdfbf6;
    --accent: #34363c;
    --accent-light: #eae7de;
    --accent-contrast: #ffffff;
    --text: #29241f;
    --muted: #8c8477;
    --danger: #e5484d;
    --warn: #b8860b;
  }
  /* ダークモード用パレット。html要素のdata-theme属性で切り替える。
     var(--xxx)を参照している箇所はこれだけで自動的に追従するが、
     決め打ちの色（#fffの入力欄背景、#eee/#ddd系の枠線など）は
     ブラウザ標準のフォーム部品の色も含めて個別に上書きが必要なため、
     このすぐ下にまとめて記述する。 */
  :root[data-theme="dark"] {
    --bg: #17130f;
    --card: #221e18;
    --accent: #dcd9d2;
    --accent-light: #2e2a23;
    --accent-contrast: #1a1611;
    --text: #ece7de;
    --muted: #9c9384;
    --danger: #ff7a7e;
    --warn: #e3b64f;
  }
  /* input/select/textareaはCSS変数を参照していなくても、ブラウザの標準スタイルで
     常に白背景・黒文字になってしまうため、ダークモード時は明示的に上書きする。
     元々の各入力欄の個別スタイル（#ddd枠線など）より必ず勝つよう!importantにしている。 */
  [data-theme="dark"] input,
  [data-theme="dark"] select,
  [data-theme="dark"] textarea {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: #3a3d48 !important;
  }
  [data-theme="dark"] .field input.locked { background: #262a35 !important; color: #aaa !important; }
  [data-theme="dark"] .btn-secondary { background: #262a35 !important; }
  [data-theme="dark"] #resumeBanner .btn-secondary { border-color: rgba(255,255,255,0.18) !important; }
  [data-theme="dark"] #deleteResumeRoomBtn { background: rgba(255,122,126,0.14) !important; border: 1px solid rgba(255,122,126,0.4) !important; }
  [data-theme="dark"] #deleteResumeRoomBtn:hover { background: rgba(255,122,126,0.22) !important; }
  [data-theme="dark"] .invite-box { background: #1a1d25 !important; }
  [data-theme="dark"] .player-list-simple .row { background: #20232d !important; }
  [data-theme="dark"] .player-chip { background: #262a35 !important; }
  /* 自分の番のハイライト（.player-chip.active）は、上の非アクティブ時の暗い背景色
     （#262a35）で丸ごと上書きされてしまい、明るい--accent前提の文字色(--accent-contrast)
     と組み合わさって「暗い背景に黒い文字」で見えなくなっていたため、専用ルールで戻す。 */
  [data-theme="dark"] .player-chip.active { background: var(--accent) !important; color: var(--accent-contrast) !important; }
  [data-theme="dark"] .clap-btn { background: #262a35 !important; }
  [data-theme="dark"] .history-item { border-bottom-color: #333644 !important; }
  [data-theme="dark"] .hi-challenge-bar { border-top-color: #3a3d48 !important; }
  [data-theme="dark"] hr { border-top-color: #3a3d48 !important; }
  [data-theme="dark"] .btn-danger-outline { background: rgba(255,122,126,0.14) !important; border-color: rgba(255,122,126,0.4) !important; }
  [data-theme="dark"] .btn-danger-outline:hover { background: rgba(255,122,126,0.22) !important; }
  [data-theme="dark"] .kick-btn { background: rgba(255,122,126,0.14) !important; border-color: rgba(255,122,126,0.4) !important; }
  [data-theme="dark"] .kick-btn:hover { background: rgba(255,122,126,0.22) !important; }
  /* option-box系で「background:#fafafa」を決め打ちしている箇所（ヘルプの補足ボックス、
     ソロモードのトグルボックスなど）をまとめて上書き（インラインstyle属性を直接狙う）。 */
  [data-theme="dark"] [style*="#fafafa"] { background: #1e212a !important; border-color: #3a3d48 !important; }
  [data-theme="dark"] #soloBestScoresText { color: #bbb !important; }
  /* ソロモードの自己ベスト表。モードごとに行の長さや桁数がバラバラで
     文字列を並べるだけだと揃って見えなかったため、表組みにして列で揃える。 */
  .solo-best-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
  .solo-best-table th, .solo-best-table td { padding: 4px 6px; text-align: right; }
  .solo-best-table th:first-child, .solo-best-table td:first-child { text-align: left; }
  .solo-best-table thead th { font-weight: normal; color: var(--muted); border-bottom: 1px solid #ddd; }
  .solo-best-table tbody tr:not(:last-child) td { border-bottom: 1px solid #eee; }
  [data-theme="dark"] .solo-best-table thead th { border-bottom-color: #3a3d48 !important; }
  [data-theme="dark"] .solo-best-table tbody tr:not(:last-child) td { border-bottom-color: #333644 !important; }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    background: var(--bg);
    color: var(--text);
  }
  .hidden { display: none !important; }

  /* スマホを横向きにした時だけ出す、縦向きを促す全画面案内。
     高さに余裕のあるタブレット・PCの横向きまで塞いでしまわないよう、
     「横向き」かつ「高さがかなり低い（=スマホサイズ）」の両方を満たす時だけ表示する。
     z-indexは他のどの要素（チャットの398、招待モーダルの399等）よりも確実に高くしておく。 */
  #landscapeBlocker { display: none; }
  @media (orientation: landscape) and (max-height: 500px) {
    #landscapeBlocker {
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--bg);
      color: var(--text);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      text-align: center;
      padding: 24px;
    }
  }
  /* 「このまま続ける」で、今回横向きのままでいる間だけ強制的に隠す
     （JS側で縦向きに戻ったのを検知したらこのクラスを外し、次に横向きにするとまた出る）。 */
  #landscapeBlocker.landscape-blocker-dismissed { display: none !important; }
  .landscape-blocker-icon { font-size: 42px; }
  .landscape-blocker-text { font-size: 15px; max-width: 280px; line-height: 1.6; }

  /* 共通カード画面（ランディング／作成／ロビー／ルール／参加／待機） */
  .screen {
    max-width: 480px;
    margin: 40px auto;
    background: var(--card);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  .screen h1 { font-size: 20px; margin-top: 0; text-align: center; }
  /* タイトル下のカタカナ表記。控えめな飾り文字として、本文より小さく・字間を空けて表示する。 */
  .screen h1 + .title-sub { font-size: 11px; font-weight: bold; letter-spacing: 2px; color: var(--muted); text-align: center; margin-top: -6px; margin-bottom: 10px; }
  .screen p.desc { font-size: 13px; color: #888; text-align: center; margin-top: -8px; }

  /* チャット欄（画面下に固定表示）が、ロビー・ルール確認・待機・結果発表画面の
     一番下のボタンに重なって隠れてしまわないよう、これらの画面の下に
     チャット欄より確実に大きい余白を確保しておく。 */
  #screen-host-lobby, #screen-host-rules, #screen-guest-waiting, #screen-result {
    margin-bottom: 110px;
  }

  /* iOS Safariは、フォーカスした入力欄のfont-sizeが16px未満だと自動でズームしてしまい、
     その間レイアウトが崩れて見える。個別の指定を全部拾いきれなくても崩れないよう、
     まずベースラインで全てのinput/select/textareaを16px以上にしておく
     （下の個別指定はこのベースラインを16px以上に上書きするためのもの）。 */
  input, select, textarea { font-size: 16px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .field input, .field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
  }
  .field input.locked { background: #eee; color: #777; }

  .btn { display: inline-block; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; cursor: pointer; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-primary { background: var(--accent); color: var(--accent-contrast); width: 100%; margin-top: 12px; font-size: 16px; padding: 12px; }
  .btn-secondary { background: #eee; color: var(--text); }
  /* 「前回の部屋に戻る」バナーはボタン自体に枠線がなく、周囲のバナー背景
     （--accent-light）と地の色が近いため、境界が分かりにくかった。
     枠線を付けて輪郭をはっきりさせ、「削除する」は既存の危険操作の配色
     （薄い赤地＋赤枠）に揃えて「戻る」との違いも一目で分かるようにする。 */
  #resumeBanner .btn-secondary { border: 1px solid rgba(0,0,0,0.15); }
  #deleteResumeRoomBtn { background: #fff0f0; border: 1px solid #ffd8d8; }
  #deleteResumeRoomBtn:hover { background: #ffe5e5; }
  .btn-small { font-size: 11px; padding: 3px 8px; border-radius: 6px; cursor: pointer; border: none; }
  .error-text { color: var(--danger); font-size: 13px; margin-top: 8px; min-height: 18px; text-align: center; }

  .landing-choice { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .landing-choice button { padding: 16px; font-size: 16px; border-radius: 10px; border: none; cursor: pointer; }
  .btn-host { background: var(--accent); color: var(--accent-contrast); }
  /* border指定だけ「.landing-choice .btn-guest」と2クラス指定にして、直前の
     「.landing-choice button { border: none; }」より詳細度を上げている。
     .btn-guest単体（1クラス）だと詳細度が同点になり、CSS上はborder:noneの方が
     後発として勝ってしまい、狙った2px枠線が実際には一度も表示されていなかった
     （ゲストボタンの見た目が実質ホストボタンと同化していた）ため修正。 */
  .btn-guest { background: var(--accent-light); color: var(--accent); }
  .landing-choice .btn-guest { border: 2px solid var(--accent); }
  /* ソロモードは「実際に選べる遊び方の1つ」として、ヘルプ・ダークモード切替のような
     ただの補助ボタン（.btn-secondaryの灰色）とは区別したい一方、多人数プレイが本命
     である以上、部屋に参加する（.btn-guest、アクセントカラーの枠線あり）と並ぶ強さ
     には見せたくない。そこで、guestと同じ配色ファミリー（accent-light背景＋accent
     文字色）は踏襲しつつ、guestを特徴づけている枠線だけを外すことで、色味は仲間だが
     一段落ち着いた強さ、という中間の主張度にしている。 */
  .btn-solo { background: var(--accent-light); color: var(--accent); }

  /* 控えめな見た目は保ちつつ、タップ領域が小さすぎて押しにくかった分だけ拡大
     （文字サイズを少し上げ、上下に余白を持たせてタップしやすくする）。 */
  .back-link { display: block; text-align: center; margin-top: 14px; padding: 10px; font-size: 14px; color: var(--muted); cursor: pointer; text-decoration: underline; }
  /* 「部屋を終了する」用。他のボタン群（.btn-primary/.btn-secondary）と同じくボタンの見た目に
     揃えつつ、危険な操作であることが分かるよう既存の警告バッジと同じ配色（薄い赤）にしている。 */
  .btn-danger-outline {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #fff0f0;
    color: var(--danger);
    border: 1px solid #ffd8d8;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 16px;
  }
  .btn-danger-outline:hover { background: #ffe5e5; }

  /* データ設定画面の、項目ごとの個別削除ボタン。.btn-danger-outlineと同じ配色を
     .btn-small相当のサイズに縮めたもの。 */
  /* 説明文が2〜3行に折り返す項目だと、flexの縮小でボタン側も潰れて
     「削除」の文字まで2行に割れてしまい、行ごとにボタンの見た目が
     バラバラになっていたため、常に中身の幅を保つよう固定する。 */
  .data-reset-btn { background: #fff0f0; color: var(--danger); border: 1px solid #ffd8d8; white-space: nowrap; flex-shrink: 0; }
  .data-reset-btn:hover { background: #ffe5e5; }
  /* データ設定画面で、現在そのデータが保存されていない項目にだけ出す小さな注記。 */
  .data-status-empty { font-size: 10px; color: var(--muted); }

  .invite-box { background: #f5f6fa; border-radius: 10px; padding: 14px; text-align: center; margin: 16px 0; }
  .invite-box .invite-label { font-size: 12px; color: #888; }
  .invite-box .code { font-size: 30px; font-weight: bold; letter-spacing: 4px; color: var(--accent); margin: 4px 0; }
  .invite-box .link-row { display: flex; gap: 6px; margin-top: 8px; }
  .invite-box .link-row input { flex: 1; font-size: 16px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; }
  .qr-box { background: #fff; border-radius: 10px; padding: 12px; margin-top: 12px; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }

  /* 観戦モード：対局には加わらず見るだけの参加者。チャットは通常通り使える。 */
  .spectator-line { font-size: 11px; color: var(--muted); margin-top: 8px; text-align: center; }
  /* ロビーで手持ち無沙汰なホストが一人しりとりを実況し、観戦者・待機中のゲストが
     それを見ながら🥰で応援できる「暇つぶし中継」機能。 */
  .hsf-entry { padding:4px 0; border-bottom:1px solid #eee; }
  .hsf-entry:last-child { border-bottom: none; }
  .hsf-row { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; }
  .hsf-love-btn { border:none; background:var(--accent-light); border-radius:12px; padding:2px 8px; font-size:12px; cursor:pointer; white-space:nowrap; }
  .hsf-love-btn.loved { background:#ffd7e3; }
  [data-theme="dark"] .hsf-entry { border-bottom-color:#333644 !important; }
  [data-theme="dark"] .hsf-love-btn.loved { background:rgba(255,122,126,0.3) !important; }
  #spectatorNotice { display: none; text-align: center; color: var(--muted); font-size: 13px; padding: 14px 0; }
  body.spectator-mode #answerForm,
  body.spectator-mode #warnText,
  body.spectator-mode #gameErrorText {
    display: none;
  }
  body.spectator-mode #spectatorNotice { display: block; }
  /* 観戦者は地雷文字を決定しないので、待機画面の地雷入力フォームは表示しない。 */
  body.spectator-mode #screen-guest-waiting .field { display: none; }

  .player-list-simple { margin-top: 14px; }
  .player-list-simple .row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #f8f9fc; border-radius: 8px; margin-bottom: 6px; font-size: 14px; }
  .player-list-simple .row-right { display: flex; align-items: center; gap: 8px; }
  .kick-btn { font-size: 11px; color: var(--danger); background: #fff0f0; border: 1px solid #ffd8d8; border-radius: 6px; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
  .kick-btn:hover { background: #ffe5e5; }
  .host-tag { font-size: 10px; background: var(--accent); color: var(--accent-contrast); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
  .player-count-label { text-align: center; font-size: 13px; color: #888; margin-bottom: 4px; }

  .option-box {
    margin-top: 4px;
    padding: 12px;
    background: var(--accent-light);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
  }
  .option-box label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }

  /* ルール設定の「おすすめプリセット」ボタン。押した1つだけ塗りつぶして
     選択中であることを伝え、自分で個別設定をいじった瞬間にactiveを
     外すことで「カスタム設定になった」ことが分かるようにしている。 */
  .btn-preset {
    padding: 8px 6px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
  }
  .btn-preset.active {
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: bold;
  }

  /* 上級者モードON中はハンデ戦のチェック欄を使えなくする際、見た目でも
     「今は選べない」と分かるように少し薄くする（チェックボックス自体は
     disabled属性でブラウザ標準の見た目にもなる）。 */
  .rule-disabled {
    opacity: 0.55;
  }

  /* 「プリセットの中身を見る」の折りたたみ。ボタン自体に説明文まで載せると
     ボタンが巨大化してしまうため、任意で開ける詳細として別に用意している
     （<details>はJS無しで開閉できるうえキーボード操作にも対応するため採用）。
     ブラウザ既定の三角マーカーは統一感がないので消し、代わりに矢印を自前で
     付けて開閉状態に応じて回転させる。 */
  .preset-detail {
    margin-top: 10px;
  }
  .preset-detail summary {
    font-size: 12px;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .preset-detail summary::-webkit-details-marker {
    display: none;
  }
  .preset-detail summary::before {
    content: "▶";
    display: inline-block;
    font-size: 9px;
    margin-right: 5px;
    transition: transform 0.15s ease;
  }
  .preset-detail[open] summary::before {
    transform: rotate(90deg);
  }
  .preset-detail-list {
    margin: 8px 0 0;
    padding-left: 1.2em;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
  }
  .preset-detail-list li {
    margin-bottom: 6px;
  }
  .preset-detail-list li:last-child {
    margin-bottom: 0;
  }
  .preset-detail-list b {
    color: var(--text);
  }

  /* ホスト切断バナー */
  #hostOfflineBanner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff3cd;
    color: #8a6d00;
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  /* チャットウィジェット */
  /* 他のカード画面（.screen）はmax-width:480pxで中央寄せなので、
     チャット欄も横幅をそれに揃える。left/right:0のままmax-widthと
     margin:0 autoを併用すると、画面幅が480pxを超える場合だけ
     中央寄せの480px幅になり、480px以下（スマホ等）ではこれまで通り
     画面いっぱいに広がる。 */
  #chatWidget {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 300;
    transition: bottom 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #chatCollapsedBar {
    position: relative; /* スクリム（#chatDrawerBackdrop、z-index:298）より確実に手前に
                            出して、ドロワーを開いている間も入力欄が隠れないようにする */
    z-index: 300;
    background: var(--card);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    transition: border-radius 0.24s ease, box-shadow 0.24s ease, border-top-color 0.24s ease;
    border-top: 1px solid transparent;
  }
  /* ドロワー（チャット一覧）を開いている間は、その真下にぴったり接するので、
     角丸と自分の影をやめて、ドロワーの角丸・影と1枚につながって見えるようにする。
     代わりに細い境界線だけ入れて、履歴と入力欄の切れ目を示す。 */
  #chatCollapsedBar.chat-bar-attached {
    border-radius: 0;
    box-shadow: none;
    border-top-color: rgba(0,0,0,0.08);
  }
  #chatLatestLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    padding: 2px 4px 5px;
    cursor: pointer;
  }
  #chatLatestLineText {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #chatLatestLineOpenHint {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: bold;
  }
  #chatSendForm { display: flex; gap: 6px; }
  #chatInput {
    flex: 1;
    padding: 7px 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 16px;
  }
  #chatInput:focus { outline: none; border-color: var(--accent); }
  #chatSendBtn {
    padding: 7px 16px;
    border: none;
    border-radius: 16px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  /* チャットの背景をぼかす幕（スクリム）。ドロワーを開いた時、後ろのゲーム画面との
     境界が「唐突な線」に見えてしまっていたのを、画面全体をふわっと暗くすることで
     自然な「モーダルが開いた」印象に変える。タップで閉じられるようにもしておく。 */
  #chatDrawerBackdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(20, 22, 30, 0.36);
    z-index: 298;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  #inviteDuringGameBackdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    background: rgba(20, 22, 30, 0.5);
    z-index: 398;
  }
  #inviteDuringGameModal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 340px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    z-index: 399;
  }
  #chatDrawerBackdrop.chat-backdrop-visible {
    opacity: 1;
    pointer-events: auto;
  }
  #chatDrawer {
    position: fixed;
    left: 0; right: 0;
    top: 15%;
    bottom: 62px;
    top: 15vh;
    top: 15dvh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: column;
    z-index: 299;
    /* display:noneのままだとtransitionが再生できないため、hiddenクラードではなく
       opacity/transformで開閉を表現する（下のchat-drawer-openが開いた状態）。 */
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
    transform-origin: bottom center;
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  #chatDrawer.chat-drawer-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  #chatDrawerHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
  }
  #chatDrawerHeader button {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
  }
  #chatMessages { flex: 1; overflow-y: auto; padding: 10px 14px; }
  .chat-msg { margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
  .chat-msg .chat-name { font-weight: bold; color: var(--accent); margin-right: 4px; }
  .chat-msg.mine .chat-name { color: #22c55e; }
  .chat-msg .chat-time { font-size: 10px; color: var(--muted); margin-left: 4px; }

  /* ゲーム画面 */
  #topbar, #soloTopbar {
    position: sticky;
    top: 0;
    background: var(--card);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 10;
  }
  #topbarControls, #soloTopbarControls {
    padding: 8px 12px 4px;
    /* #topbar/#soloTopbar自体は背景の帯として画面いっぱいに広げたいが、中身のボタン類は
       #main/#soloMainと同じ最大幅600px・中央寄せにしないと、画面が広いPCでは
       「終了する」ボタンだけが本体コンテンツから離れた画面の右端に来てしまうため。 */
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  #topbarControls .btn-small, #soloTopbarControls .btn-small { flex-shrink: 0; }
  /* ソロモードはボタンが2つ（ルール・終了する）だけなので、両端に寄せるだけの
     flexで十分。 */
  #soloTopbarControls { display: flex; align-items: center; justify-content: space-between; }
  /* マルチプレイは「ルール・募集・終了して結果を見る」の3つ。space-betweenのままだと
     「募集」の位置が両隣のボタンの幅に引っ張られて画面中央からズレてしまう
     （「終了して結果を見る」が長いテキストのため特にズレが目立つ）ため、
     左右を1frずつの均等な余白にして「募集」が常に画面の真ん中に来るように
     した（対局画面ではテーマ切り替えボタン自体が表示されないため、右側の
     余白を気にする必要はない）。 */
  #topbarControls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
  }
  #topbarControls > button:nth-child(1) { justify-self: start; }
  #topbarControls > button:nth-child(2) { justify-self: center; }
  #topbarControls > button:nth-child(3) { justify-self: end; }
  #endBtn, #soloEndBtn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 3px 4px;
  }
  #chipRow, #soloChipRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0 12px 10px;
    /* #topbarControls/#soloTopbarControlsと同じ理由で、本体コンテンツと同じ
       最大幅600px・中央寄せに揃える。 */
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .player-chip {
    flex: 1 1 110px;
    max-width: 220px;
    min-width: 90px;
    background: #f0f1f6;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    transition: 0.2s;
  }
  .player-chip.active { background: var(--accent); color: var(--accent-contrast); transform: scale(1.04); }
  .player-chip .name { font-size: 13px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* .nameの中身を包む要素。display:inline-blockにすることで、text-align/overflowの
     影響を受けずに「実際の文字だけの幅」をscrollWidthで測れるようにしている
     （JS側のfitChipName()参照）。縮小表示（transform:scale）もこちら側に掛ける。 */
  .player-chip .name-inner { display: inline-block; white-space: nowrap; }
  .player-chip .score { font-size: 18px; margin-top: 2px; }
  /* スマホ幅では、flexの折り返し任せだと人数や端末幅次第で不揃いに2段落ちしてしまう
     （例：Galaxy S9で3人でも崩れる）ため、6列グリッド＋各チップが2列分を占める形にして
     基本は1行3人ずつの整った段組みにする。さらに、余りが出る人数（2人・5人）は
     最後の行を中央寄せにし、ちょうど4人のときだけ2列×2行の「田」の字型にすることで、
     どの人数でも見た目が整うようにしている。 */
  @media (max-width: 819px) {
    #chipRow, #soloChipRow {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    #chipRow .player-chip, #soloChipRow .player-chip {
      grid-column: span 2;
    }
    /* 4人：2列×2行（田の字）にする */
    #chipRow[data-count="4"] {
      grid-template-columns: repeat(4, 1fr);
    }
    /* 2人：1行に2つだけなので中央に寄せる */
    #chipRow[data-count="2"] .player-chip:nth-child(1) { grid-column: 2 / span 2; }
    #chipRow[data-count="2"] .player-chip:nth-child(2) { grid-column: 4 / span 2; }
    /* 5人：1段目は3人のまま、2段目の2人だけ中央に寄せる */
    #chipRow[data-count="5"] .player-chip:nth-child(4) { grid-column: 2 / span 2; }
    #chipRow[data-count="5"] .player-chip:nth-child(5) { grid-column: 4 / span 2; }
    .player-chip { padding: 6px 6px; min-width: 0; max-width: none; }
    .player-chip .name { font-size: 12px; }
    .player-chip .score { font-size: 16px; }
  }

  /* padding-bottomの200pxは、JS側で実際の#bottombar/#soloBottombarの高さを測って
     上書きするまでの初期値・フォールバック値（フォームの内容次第ではこれより
     高さが必要になることがあるため、JS側での動的な上書きが本体）。 */
  #main, #soloMain { max-width: 600px; margin: 0 auto; padding: 16px; padding-top: 8px; padding-bottom: 200px; }

  /* ===== 全員共有ボーナスゲージ ===== */
  /* 画面左端に縦長のゲージを固定表示。全員のよみ入力文字数で共通の1本のゲージが貯まり、
     満タンになった瞬間の次の回答者だけがそのターン得点1.5倍のボーナスを獲得する。
     形は「上に行くほど少し太くなる逆台形」にし、左端は垂直、右端だけ斜めにする。 */
  #gaugeBonusWidget {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    top: 50%;
    transform: translateY(-50%);
    /* 以前は250でチャット・回答フォームより手前に出ていた。画面の低い端末では
       画面中央固定のこのゲージが画面下固定の回答フォーム（#bottombar、z-index:60）と
       重なり、星アイコン（クリック可能）が回答欄のタップを奪ってしまっていたため、
       チャット（z-index:298〜300）・回答フォーム（60）の両方より低くする。 */
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    /* 画面（ビューポート）に対してfixedなので、スクロールしても位置がずれないのは意図通り。
       ただしJS側（alignGaugeWidgetVertical）で「前の単語」カードの位置に合わせてtopを
       再計算しており、これが対局中の通信更新のたびに何度も呼ばれることで、位置がわずかに
       ピクピクと揺れて見える不具合があったため、実際に動く時だけ滑らかに移動するようにする
       （再計算しても値がほぼ変わらない大半のケースでは、そもそもtopを書き換えないよう
       JS側でも変化量チェックを入れている）。 */
    transition: top 0.18s ease;
  }
  /* ゲージの頭にちょこんと乗っているように見せるため、下にマイナスマージンで
     トラックの上端に少し食い込ませる。z-indexでトラックより手前に出す。 */
  #gaugeBonusIcon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: -11px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
    pointer-events: auto; /* ウィジェット全体はpointer-events:noneだが、アイコンだけは
      隠し機能（タップで試聴）のため反応させる */
  }
  #gaugeBonusTrack {
    position: relative;
    width: 30px;
    height: 160px;
    background: #dcdce3;
    overflow: hidden;
    /* 左辺(x=0)は上下とも同じ位置＝垂直。右辺は上100%幅→下58%幅で少し斜めに絞る。 */
    clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
    /* ただのグレーの塊に見えないよう、輪郭線をはっきり見せつつ、内側に光と影をつけて
       筒のような立体感を出す（左から光が当たっているイメージ）。 */
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,0.35),
      inset -4px 0 8px rgba(0,0,0,0.25),
      inset 3px 0 5px rgba(255,255,255,0.45);
    /* clip-pathで欠けた形の輪郭に沿って落ちる、くっきりめのドロップシャドウ（浮いて見える立体感）。
       近い影＋広がる影の2枚重ねで、よりオーバーな存在感を出す。 */
    filter:
      drop-shadow(3px 6px 4px rgba(0,0,0,0.5))
      drop-shadow(6px 14px 14px rgba(0,0,0,0.4));
  }
  /* 常に「満タン時の全区間の色」を表示しておき、上から#gaugeBonusMaskで隠すことで
     現在値までの色（青〜紫のどこか）だけを正しく見せる。 */
  #gaugeBonusGradient {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    /* 色の境目（42/64/79/89/96%）をぼかして滲ませているが、帯の幅が狭い
       赤・紫（レアな高得点ゾーン）ほどぼかしを小さくして、色の主張・レア感が
       薄まらないようにしている。逆に幅が広い青・緑はぼかしを大きめにして
       全体としてなめらかなグラデーションに見せる（境目の位置自体は変えていない）。 */
    background: linear-gradient(to top,
      #3b82f6 0%, #3b82f6 36%,
      #22c55e 48%, #22c55e 59.5%,
      #eab308 68.5%, #eab308 76%,
      #f97316 82%, #f97316 87%,
      #ef4444 91%, #ef4444 95%,
      #a855f7 97%, #a855f7 100%);
  }
  #gaugeBonusMask {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 100%;
    background: #dcdce3;
    transition: height 0.35s ease;
  }
  /* 入力中・送信前に「決定したらここまで伸びる」目安を白でうっすら重ねる */
  #gaugeBonusPreviewFill {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 0;
    background: rgba(255,255,255,0.8);
    transition: height 0.15s ease, bottom 0.15s ease;
  }
  /* ボーナス開始の瞬間に全員へ見せる、ふわっと光る演出。
     以前は#gaugeBonusWidget自体（外側の箱）にtransform: translateY(-50%) scale(...)を
     アニメーションさせていたが、#gaugeBonusWidgetはスマホ幅ではJS側（alignGaugeWidgetVertical）
     がtransformを'none'にしてtopのpx指定だけで位置決めしている。CSSアニメーションは
     実行中その要素のtransformを丸ごと上書きしてしまうため、アニメーション中（1.4秒間）
     だけ強制的にtranslateY(-50%)が適用され、星がガクッと動いて元に戻る不具合になっていた。
     位置決め用のtransformを持たない内側の#gaugeBonusIcon（星アイコン自体）の方だけを
     アニメーションさせることで、外側の位置決めと完全に独立させる。 */
  @keyframes gaugeBonusFlash {
    0% { filter: drop-shadow(0 0 0 rgba(168,85,247,0)); transform: scale(1); }
    30% { filter: drop-shadow(0 0 14px rgba(168,85,247,0.85)); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 0 rgba(168,85,247,0)); transform: scale(1); }
  }
  #gaugeBonusIcon.gauge-bonus-flash { animation: gaugeBonusFlash 1.4s ease-out; }

  #themeToggleFab {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 260;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--card);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    padding: 0;
  }

  /* FABをタップした瞬間だけ現れて、今どのモードに切り替わったかを一瞬伝える
     小さなトースト（スマホの長押しではtitleツールチップが出ないための代替）。
     普段はopacity:0で存在を消しておき、.showが付いた時だけフワッと出す。
     カード地の背景だけだと周りに馴染みすぎて気づきにくいことがあるため、
     スクロールヒントのボタンと同じくアクセントカラーの細いボーダーで
     ほどよく目立たせている（塗りつぶしにはしない）。 */
  #themeToggleToast {
    position: fixed;
    top: calc(max(10px, env(safe-area-inset-top)) + 42px);
    right: max(10px, env(safe-area-inset-right));
    z-index: 260;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--accent);
    font-size: 12px;
    line-height: 1;
    padding: 7px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  #themeToggleToast.show {
    opacity: 1;
    transform: translateY(0);
  }

  /* 招待リンク・QRコードから参加直後の数秒だけFABの左側に出す軽い案内
     （showThemeToggleJoinHint参照）。FABの高さ(34px)に対して縦中央に
     揃うよう、top位置をFABの中心に合わせてtranslateYで半分ずらしている。
     見た目はタップ後の#themeToggleToastと揃え、横方向にふわっと現れる
     ようtranslateXでスライドさせる。 */
  #themeToggleJoinHint {
    position: fixed;
    top: calc(max(10px, env(safe-area-inset-top)) + 17px);
    right: calc(max(10px, env(safe-area-inset-right)) + 42px);
    z-index: 260;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--accent);
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    max-width: 200px;
    text-align: right;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  #themeToggleJoinHint.show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  /* 「まだ下に続きがあるよ↓」「先頭（お題）に戻る↑」の2つのボタン共通スタイル。
     #themeToggleFabと対になる位置（右下）に、#scrollTopHintが#scrollDownHintの
     真上に重ならないよう積み重なって表示される（bottom位置はJS側で動的計算）。
     矢印は文字（Unicode記号）だとiPhoneとAndroidで太さの見え方が結構違う
     （Android系フォントだと細く貧弱に見える）ため、中身は文字ではなく自前の
     SVGアイコン（stroke="currentColor"でこのcolor指定＝テーマのアクセント
     カラーをそのまま継承）にしてあり、それをflexboxで中央寄せしている。 */
  .scroll-hint-btn {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: 14px;
    z-index: 260;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* 塗りつぶしだと矢印の色と背景が近くなって逆に見づらかったので、色は元の
       カード地にし、代わりにアクセントカラーの細めのボーダーで目立たせる
       （太すぎると悪目立ちしたため1pxに調整） */
    border: 1px solid var(--accent);
    background: var(--card);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    padding: 0;
    transition: bottom 0.2s ease;
    /* 表示された瞬間だけ軽くポップさせて気づきやすくする（display:noneから復帰する
       たびに毎回頭から再生されるので、ループさせなくても「出た瞬間」感が出せる） */
    animation: scrollHintPop 0.5s ease-out;
  }
  @keyframes scrollHintPop {
    0% { transform: translateY(6px) scale(0.85); opacity: 0; }
    60% { transform: translateY(-3px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* パソコンなど画面が広い場合：フル画面の左端に固定すると中央寄せの本体コンテンツから
     大きく離れてしまうため、本体（#main / #soloMain、最大幅600px・中央寄せ）のすぐ横、
     縦位置も画面中央ではなく回答履歴に近い上の方へ寄せる。スペースに余裕がある分
     ひとまわり大きく表示する。 */
  @media (min-width: 820px) {
    #gaugeBonusWidget {
      left: calc(50% - 360px);
      top: 260px;
    }
    #gaugeBonusIcon {
      font-size: 32px;
      margin-bottom: -15px;
    }
    #gaugeBonusTrack {
      width: 44px;
      height: 220px;
    }
  }

  /* 画面モード切り替え(#themeToggleFab)・スクロール移動(#scrollDownHint/#scrollTopHint)の
     丸いボタンも、上のゲージと同じ理由（画面が広いとフル画面の端に固定され、
     中央寄せの本体コンテンツから大きく離れてしまう）で、パソコンなど画面が広い場合は
     本体（最大幅600px・中央寄せ）のすぐ右に寄せる。 */
  @media (min-width: 820px) {
    #themeToggleFab,
    #themeToggleToast,
    #scrollDownHint,
    #scrollTopHint {
      right: calc(50% - 300px - 50px);
    }
    #themeToggleJoinHint {
      right: calc(50% - 300px - 50px + 42px);
    }
  }

  /* 対象者の番になった時、自分のターン表示を金色にパルスさせて見逃しを防ぐ
     （マルチプレイの#turnLabel、ソロの#soloBonusNoticeの両方で使う共通クラス）。 */
  /* 押すと実際の通知音が試聴できる隠し要素（ヘルプ画面の👏🥰、ゲージの⭐️）共通のスタイル。
     見た目はただの絵文字のままにしておき、押した時だけポンと弾ませて反応を伝える。 */
  .help-emoji-btn { cursor: pointer; display: inline-block; user-select: none; }
  @keyframes helpEmojiPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.5); }
    100% { transform: scale(1); }
  }
  .help-emoji-btn.pop { animation: helpEmojiPop 0.35s ease; }

  /* ヘルプ画面が長くなってきたので付けた目次。タップした項目まで滑らかにスクロールする
     （クリック処理はJS側でdata-target属性を見てscrollIntoViewする）。 */
  .help-toc-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent-light);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .help-toc-btn:active {
    background: var(--accent-light);
  }

  /* ヘルプの各項目（1〜16）の間に、さりげない仕切り線と少し広めの余白を入れて
     項目の切れ目を分かりやすくする。目次から個別にジャンプできるようになった分、
     多少縦に長くなっても構わない、という判断。最初の項目の上には引かない
     （p + p なので直前にpがある場合だけ効く）。 */
  #helpRulesList p + p {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--accent-light);
  }

  /* 目次を「基本機能／おまけ機能／そのほかの注意点」の3カテゴリに分けたための見出しと
     グループ枠。ルール設定画面（screen-host-rules）の「■ 基本ルール」「その他の設定」
     という区分けに寄せている。 */
  .help-toc-cat-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--accent);
    text-align: center;
    margin: 12px 0 4px;
  }
  .help-toc-cat-label:first-child { margin-top: 0; }
  .help-toc-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 8px;
  }

  /* 本文側（#helpRulesList）の同じ3カテゴリの見出し。目次より少し大きく、
     区切り線付きにして「ここから新しいまとまり」と分かるようにする。 */
  .help-section-heading {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent);
    margin: 24px 0 10px;
    padding-top: 16px;
    border-top: 1px solid var(--accent-light);
  }
  .help-section-heading:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* 更新履歴の箇条書き。list-style-position: outside（既定値）にすることで、
     長い項目が折り返した2行目以降が「・」マーカーの位置ではなく1行目の
     文字位置に揃う（ぶら下げインデント）。ブラウザ既定のpadding-left（約40px）
     だと余白が広すぎて浮いて見えたため、他の本文の余白感に合わせて詰めた。 */
  .changelog-list {
    margin: 0;
    padding-left: 1.2em;
  }
  .changelog-list li {
    margin-bottom: 4px;
  }
  .changelog-list li:last-child {
    margin-bottom: 0;
  }

  /* 各項目本文（#help-item-2など）の先頭にある「2. 文字の重なり判定」のような
     項目タイトルは、これまで本文中の「厳格」「ゆるめ」等の小見出しと全く同じ
     太字・サイズだったため、パッと見て見分けにくいという指摘があった。
     .help-section-heading（🔹基本機能などのカテゴリ見出し）と全く同じ扱いにすると
     今度はカテゴリ見出しと項目タイトルの区別がつかなくなるため、色はアクセント
     カラーで揃えつつ、罫線・余白は付けずワンランク下の見出しだと分かるようにする。
     b:first-of-typeで各<p>内の最初の<b>（＝項目タイトル）だけを対象にし、
     「①個人地雷」等、本文中に出てくる他の<b>には影響しない。 */
  #screen-help p[id^="help-item-"] > b:first-of-type {
    font-size: 14px;
    color: var(--accent);
  }

  /* ヘルプが長くなったので、都度一番下までスクロールしなくても戻れるよう、
     戻るボタンを画面下に浮かせておく。作りは#bottombarと同じ考え方
     （画面下固定・safe-area-inset-bottom考慮）。#screen-helpの内側に
     置いているので、画面が非表示（.hidden）の間は親ごと一緒に隠れる。 */
  #helpBackBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
  }
  #helpBackBar .btn {
    max-width: 480px;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  /* 浮かせた戻るボタンの分だけ、スクロールした時に本文の最後の項目が
     隠れないよう余白を確保する（#screen-host-lobby等のチャット欄向け
     margin-bottomと同じ考え方）。 */
  #screen-help {
    margin-bottom: 90px;
  }

  /* このゲームについて画面にも、小話が増えて長くなってきたため
     ヘルプ画面と同じ「画面下固定の戻るボタン」を採用。 */
  #aboutBackBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
  }
  #aboutBackBar .btn {
    max-width: 480px;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  #screen-about {
    margin-bottom: 90px;
  }

  /* About画面下部の小さなリンクカード（日本語版へのリンク／コーヒー代の投げ銭）共通スタイル。
     他のボタン（カード地＋アクセントの縁取り）とはあえて質感を変え、グラデーション＋
     角丸の正方形にして「特別な存在」として一線を引いている。文字は幅に合わせて自然に折り返す。 */
  .about-link-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 128px;
    min-height: 128px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none; /* <a>タグになったので、下線を消す */
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    padding: 12px 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  .about-link-card .about-link-icon {
    font-size: 26px;
    line-height: 1;
  }
  .about-link-card .about-link-caption {
    font-size: 10px;
    opacity: 0.8;
    margin-top: 2px;
  }
  #coffeeSupportBox {
    background: linear-gradient(135deg, #6f4e37, #a9744f);
  }
  #japaneseVersionBox {
    background: linear-gradient(135deg, #b3313c, #d9515c);
  }

  /* ボーナスモード中は見逃しにくいよう、ページ背景をゲージと同系色（金〜紫）の
     ゆっくり動くグラデーションにして少し派手に見せる。カード自体は白背景のままなので
     文字の読みやすさはそのまま、カードの隙間・余白部分が賑やかになるイメージ。 */
  body.bonus-mode-active {
    background: linear-gradient(120deg, #fff2c2, #ffd9a0, #ffc2e8, #d9baff, #fff2c2);
    background-size: 400% 400%;
    animation: bonusBgShift 8s ease infinite;
  }
  @keyframes bonusBgShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .bonus-turn-highlight {
    background: linear-gradient(90deg, #fff7d6, #ffe9b3, #fff7d6);
    border-radius: 8px;
    padding: 6px 10px;
    animation: bonusTurnPulse 1s ease-in-out infinite;
  }
  /* .bonus-turn-highlightの背景は常に薄い黄色系の固定色（ダークモードでも変わらない）。
     一方で文字色は#turnLabel b { color: var(--accent); }やbody直下の色（var(--text)）に
     依存しており、ダークモードではどちらも明るい色になるため、明るい背景に明るい文字が
     重なってほぼ読めなくなっていた（マルチプレイの#turnLabel、ソロの#soloBonusNoticeの
     両方で発生）。背景色が固定なので、文字色もライト・ダーク問わず読みやすい濃い色に固定する。
     IDセレクタである#turnLabel bより詳細度で勝つよう、IDとクラスを両方指定している。 */
  #turnLabel.bonus-turn-highlight b,
  #soloBonusNotice.bonus-turn-highlight b {
    color: #7a4a00;
  }
  @keyframes bonusTurnPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(245,158,11,0); }
    50% { box-shadow: 0 0 14px rgba(245,158,11,0.55); }
  }

  .hi-gauge-bonus { font-size: 11px; color: #a855f7; font-weight: normal; margin-left: 4px; }
  #prevWordCard, #soloPrevWordCard {
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  #prevWordCard .label, #soloPrevWordCard .label { font-size: 12px; color: var(--muted); }
  #prevWordCard .word, #soloPrevWordCard .word { font-size: 26px; font-weight: bold; margin-top: 4px; }
  #prevWordCard .word-sub, #soloPrevWordCard .word-sub { font-size: 13px; color: var(--muted); margin-top: 2px; min-height: 16px; }
  .yomi-overlap-preview { font-size: 15px; min-height: 20px; padding: 2px 2px; color: var(--text); }
  .overlap-mark { border-radius: 4px; padding: 0 2px; transition: background 0.15s, color 0.15s; }
  .overlap-invalid { background: #ffcdd2; color: #b71c1c; text-decoration: line-through; }
  #turnLabel { text-align: center; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
  #turnLabel b { color: var(--accent); }
  #penaltyInfoBar { text-align: center; font-size: 12px; color: var(--warn); min-height: 16px; margin-bottom: 6px; }
  #pendingFinishBar {
    text-align: center;
    background: #fff3cd;
    color: #8a6d00;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 13px;
  }
  #pendingFinishBar .btn-primary { width: auto; padding: 8px 20px; font-size: 14px; }

  #history, #soloHistoryBox { background: var(--card); border-radius: 12px; padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  /* スマホ幅（ゲージが画面端に固定表示される範囲）では、ゲージと回答履歴が重なりすぎて
     文字が読みにくくならないよう、履歴カードの左側だけ少し広げる。
     ただし完全に離すのではなく、ゲージの先端が少しだけ重なる程度に留める。 */
  @media (max-width: 819px) {
    #history, #soloHistoryBox { padding-left: 20px; }
  }
  #history h3, #soloHistoryBox h3 { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
  .history-item { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
  .history-item:last-child { border-bottom: none; }
  .hi-row-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
  .hi-player { color: var(--muted); }
  .hi-word { font-weight: bold; }
  .hi-score { color: var(--accent); font-weight: bold; white-space: nowrap; }
  .hi-desc { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
  .hi-desc-source { font-size: 10px; color: var(--accent); margin-left: 4px; }
  .hi-unverified { font-size: 10px; color: var(--warn); margin-left: 4px; }
  .google-search-link { color: var(--accent); font-size: 11px; text-decoration: underline; }
  .hi-penalty { font-size: 11px; color: var(--danger); font-weight: normal; margin-left: 4px; }
  .hi-reactions { display: flex; gap: 6px; margin-top: 4px; }
  .hi-challenge-bar {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #eee;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
  }
  .hi-challenge-note { font-size: 11px; color: var(--warn); }
  .clap-btn {
    border: none;
    background: #f0f1f6;
    color: var(--muted);
    border-radius: 12px;
    padding: 2px 9px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  .clap-btn.clapped { background: var(--accent-light); color: var(--accent); font-weight: bold; }
  .clap-btn.love-btn.loved { background: #ffe4f0; color: #e0559a; font-weight: bold; }
  .clap-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* 回答入力欄（表記・よみ・回答する／パス）は、すぐ上に浮かぶチャット欄（白背景）と
     ボタンまで含めてひとまとまりに見えるよう、バー全体を薄いブルーグレー
     （アクセントカラーの薄色版・他の強調ボックスと同じ色）にしている。
     #bottombarは「自分の番でない間はスライドして隠す」ため、transformで
     アニメーションする（.bottombar-waitingで下に隠れる）。 */
  #bottombar, #soloBottombar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--accent-light);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    /* ボーナスゲージ（#gaugeBonusWidget、z-index:50）より確実に手前に出す。
       画面が低い古い端末（Galaxy S9等）だと、画面中央固定のゲージと画面下固定の
       回答フォームが重なることがあり、z-indexの明示指定がないとゲージ側が
       手前に来てしまい回答欄をタップしにくくなっていたため。 */
    z-index: 60;
  }
  #bottombar {
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  }
  #bottombar.bottombar-waiting {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
  #answerForm, #soloAnswerForm { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
  #answerForm .input-group, #soloAnswerForm .input-group { display: flex; flex-direction: column; gap: 4px; }
  #yomiInput, #wordInput, #soloYomiInput, #soloWordInput { width: 100%; padding: 8px 10px; font-size: 16px; border: 2px solid #ddd; border-radius: 10px; }
  #yomiInput:focus, #wordInput:focus, #soloYomiInput:focus, #soloWordInput:focus { outline: none; border-color: var(--accent); }
  #yomiInput, #soloYomiInput { font-size: 16px; }
  .input-label { font-size: 10px; color: var(--muted); padding-left: 4px; }
  .answer-actions { display: flex; gap: 8px; }
  .answer-actions .btn { margin-top: 0; }
  .answer-actions .btn-primary { flex: 2; }
  .answer-actions .btn-secondary { flex: 1; }
  #warnText { max-width: 600px; margin: 4px auto 0; font-size: 12px; color: var(--warn); text-align: center; min-height: 16px; }
  #gameErrorText { max-width: 600px; margin: 4px auto 0; font-size: 12px; color: var(--danger); text-align: center; min-height: 16px; }
  #turnInfo { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; margin-bottom: 8px; }
  #turnOfflineNote { text-align: center; font-size: 12px; color: var(--warn); font-weight: bold; margin-top: 4px; margin-bottom: 4px; }
  #turnInfo b { color: var(--accent); }
  /* ボーナスタイム中はbody.bonus-mode-activeの薄い黄色〜紫系グラデーション背景の上に
     直接文字が乗る。#turnInfo・#turnOfflineNoteは通常時はvar(--muted)/var(--accent)/
     var(--warn)（ダークモードだと明るい色）で問題ないが、この背景の上では.bonus-turn-
     highlightと同じ理由で読みにくくなるため、ここでも濃い色に固定する。 */
  body.bonus-mode-active #turnInfo,
  body.bonus-mode-active #turnInfo b,
  body.bonus-mode-active #turnOfflineNote {
    color: #7a4a00;
  }