/* シリトリ・チェイン・レゾナンス スタイルシート
   （もとはindex.html内の<style>タグに直接書いていたが、ファイルが大きくなってきたので
   分離した。中身は元の<style>タグの中身をそのまま移しただけで、内容の変更はなし。） */
  :root {
    --bg: #f4f4f6;
    --card: #ffffff;
    --accent: #34363c;
    --accent-light: #ececed;
    --accent-contrast: #ffffff;
    --text: #222;
    --muted: #888;
    --danger: #e5484d;
    --warn: #b8860b;
  }
  /* ダークモード用パレット。html要素のdata-theme属性で切り替える。
     var(--xxx)を参照している箇所はこれだけで自動的に追従するが、
     決め打ちの色（#fffの入力欄背景、#eee/#ddd系の枠線など）は
     ブラウザ標準のフォーム部品の色も含めて個別に上書きが必要なため、
     このすぐ下にまとめて記述する。 */
  :root[data-theme="dark"] {
    --bg: #141414;
    --card: #1e1e1e;
    --accent: #d9dadd;
    --accent-light: #2b2b2e;
    --accent-contrast: #1a1a1a;
    --text: #e8e8e8;
    --muted: #999999;
    --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-en { 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); }
  .btn-guest { background: var(--accent-light); color: var(--accent); border: 2px solid 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; }

  .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; }

  /* ホスト切断バナー */
  #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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
  }
  #topbarControls .btn-small, #soloTopbarControls .btn-small { flex-shrink: 0; }
  #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;
  }
  .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; }
  .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;
    background: linear-gradient(to top,
      #3b82f6 0%, #3b82f6 42%,
      #22c55e 42%, #22c55e 64%,
      #eab308 64%, #eab308 79%,
      #f97316 79%, #f97316 89%,
      #ef4444 89%, #ef4444 96%,
      #a855f7 96%, #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;
  }

  /* 「まだ下に続きがあるよ」ボタン。#themeToggleFabと対になる位置（右下）に置く。
     hidden時にID優先度でdisplay:noneが上書きされないよう、このルールではdisplayを
     指定せず、ボタン要素本来の表示（inline-block）とline-height/text-alignだけで
     中央に「↓」を表示する。 */
  #scrollDownHint {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: 14px;
    z-index: 260;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--card);
    color: var(--accent);
    font-size: 15px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    padding: 0;
    transition: bottom 0.2s ease;
  }

  /* 「先頭（お題）に戻る」ボタン。#scrollDownHintの真上に重ならないよう積み重ねて置く。
     長い回答履歴を下までスクロールした状態から、無制限モードなどで長く遊ぶ人が
     お題や最新の回答までワンタップで戻れるようにするためのもの。 */
  #scrollTopHint {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    bottom: 14px;
    z-index: 260;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--card);
    color: var(--accent);
    font-size: 15px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    cursor: pointer;
    padding: 0;
    transition: bottom 0.2s ease;
  }

  /* パソコンなど画面が広い場合：フル画面の左端に固定すると中央寄せの本体コンテンツから
     大きく離れてしまうため、本体（#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;
    }
  }

  /* 対象者の番になった時、自分のターン表示を金色にパルスさせて見逃しを防ぐ
     （マルチプレイの#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);
  }

  /* ボーナスモード中は見逃しにくいよう、ページ背景をゲージと同系色（金〜紫）の
     ゆっくり動くグラデーションにして少し派手に見せる。カード自体は白背景のままなので
     文字の読みやすさはそのまま、カードの隙間・余白部分が賑やかになるイメージ。 */
  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;
  }