#hud { position: fixed; inset: 12px; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
    .row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
    .panel { pointer-events: auto; background: rgba(15,17,26,0.82); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 10px 12px; font-size: 0.8rem; backdrop-filter: blur(6px); }
    .btn { background: #262b40; color: #fff; border: 1px solid rgba(255,255,255,0.2); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; }
    #btn-audio-vol { display: none; }
    /* チャットのみ(3Dなし)の人の一覧(左上)。以前はタグに直書きしていたが、スマホで上書きできるよう CSS へ移した(見た目は PC では同じ) */
    #hud-lite-line { display: block; color: #a5b4fc; font-size: 0.75rem; max-width: 320px; line-height: 1.4; overflow-wrap: anywhere; }
    /* 入退室のお知らせ(左上の Status パネルの中に 3 秒だけ出る。client-app.js の onSystemMessage) */
    #hud-notice { display: block; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.12); color: #93c5fd; font-size: 0.75rem; max-width: 320px; line-height: 1.4; overflow-wrap: anywhere; }
    /* ガチャ付与のお知らせ(画面の中央に 3 秒だけ。操作の邪魔をしない) */
    #quest-pop { position: fixed; left: 50%; top: 36%; z-index: 40; transform: translate(-50%, -50%); width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 14px 20px; text-align: center; font-size: 0.95rem; line-height: 1.5; color: #fff; background: rgba(15,17,26,0.92); border: 1px solid rgba(251,191,36,0.6); border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity 0.35s; overflow-wrap: anywhere; }
    #quest-pop.show { opacity: 1; }
    /* 「手持ちVRM読込」ボタンはいま非表示(自分の画面でしか見えないため)。機能は残してあり、この行を消せば再び表示される */
    #btn-load-vrm { display: none; }
    #chat-box { width: 320px; max-width: 90vw; }
    #chat-messages { height: 110px; overflow-y: auto; margin-bottom: 6px; font-size: 0.8rem; user-select: text; }
    /* PC(マウス操作)のときは、チャット欄を大きくする。画面の高さに合わせて 110px〜340px */
    @media (pointer: fine) {
      #chat-box { width: 400px; }
      #chat-messages { height: clamp(110px, 38vh, 340px); }
    }
    #chat-form { display: flex; gap: 6px; }
    /* チャット欄の上のバー(PC)。ボタンで展開/格納する。スマホは別のボタンを使うので非表示 */
    #chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: bold; font-size: 0.8rem; }
    #chat-unread { color: #fbbf24; font-weight: normal; margin-left: 6px; }
    body.chat-collapsed #chat-messages, body.chat-collapsed #chat-form { display: none; }
    /* PC(touch-mode でないとき)は、閉じても最新の発言を 2 行ぶんと、入力欄・送信ボタンを残す(閉じるのはメッセージ欄を縮めるだけ)。高さを変えるときは 3.2em を調整 */
    body.chat-collapsed:not(.touch-mode) #chat-messages { display: block; height: 3.2em; margin-bottom: 6px; overflow: hidden; }
    body.chat-collapsed:not(.touch-mode) #chat-form { display: flex; }
    body.chat-collapsed:not(.touch-mode) #chat-header { margin-bottom: 6px; }
    body.chat-collapsed #chat-header { margin-bottom: 0; }
    body.touch-mode #chat-header { display: none; }
    #chat-input { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.4); color: #fff; }
    /* 入室後の「アバター」パネル(「アバター」ボタンで開閉) */
    #profile-pop { position: fixed; right: 12px; top: var(--hud-bottom, 76px); z-index: 35; width: 210px; }
    #profile-swatches { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
    .avatar-item { display: block; width: 100%; text-align: left; padding: 8px 10px; }
    .avatar-item.on { border-color: #fff; background: #3b4266; box-shadow: 0 0 0 2px rgba(99,102,241,0.9); }
    #profile-note { color: #9ca3af; font-size: 0.7rem; margin-top: 6px; }
    /* アバターの色(髪・トップス・瞳。会員だけ。行は client-app.js が組み立てる) */
    #profile-colors { margin: 8px 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); }
    .color-title { font-size: 0.72rem; color: #9ca3af; margin-bottom: 4px; }
    .color-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; font-size: 0.8rem; cursor: pointer; }
    .color-row input[type="color"] { width: 48px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; background: none; cursor: pointer; }
    .color-reset { display: block; width: 100%; margin-top: 6px; }
    /* エモート一覧(😀 ボタンで開閉。内容は app-shared.js の EMOTES から組み立てる) */
    #emote-pop { position: fixed; right: 12px; top: var(--hud-bottom, 76px); z-index: 35; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - var(--hud-bottom, 76px) - 24px); overflow-y: auto; padding: 8px; }
    #emote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .emote-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #262b40; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 6px 2px; cursor: pointer; min-width: 0; }
    .emote-item:active { background: #3b4266; }
    .emote-icon { font-size: 1.6rem; line-height: 1.2; }
    .emote-label { font-size: 0.62rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #emote-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
    #emote-tabs[hidden] { display: none; }
    .emote-tab { background: #262b40; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; padding: 3px 10px; font-size: 0.72rem; cursor: pointer; }
    .emote-tab:active { background: #3b4266; }
    .emote-tab.is-active { background: #4b55a3; border-color: rgba(255,255,255,0.55); }
    /* メインメニュー(☰ ボタンで開閉。項目は app-shared.js の MENU_ITEMS から組み立てる) */
    #menu-pop { position: fixed; right: 12px; top: var(--hud-bottom, 76px); z-index: 35; width: min(240px, calc(100vw - 24px)); padding: 8px; }
    #menu-list { display: flex; flex-direction: column; gap: 6px; }
    .menu-item { display: block; width: 100%; text-align: left; padding: 10px 12px; }
    .menu-item[hidden] { display: none; }
    /* 操作方法パネル(☰ の「操作方法」で開閉。内容は client-app.js の toggleHelp が PC / スマホで切り替えて入れる) */
    #help-pop { position: fixed; right: 12px; top: var(--hud-bottom, 76px); z-index: 35; width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - var(--hud-bottom, 76px) - 24px); overflow-y: auto; padding: 10px 12px; }
    #help-list { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin-top: 8px; font-size: 0.78rem; line-height: 1.4; }
    #help-list dt { color: #a5b4fc; white-space: nowrap; }
    #help-list dd { margin: 0; }