*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --purple: #7c3aed;
  --purple-light: #a78bfa;
  --purple-dark: #4c1d95;
  --bg: #05050f;
  --panel-bg: rgba(8, 6, 24, 0.88);
  --border: rgba(124, 58, 237, 0.35);
}

body {
  font-family: 'Segoe UI', 'Hiragino Sans', sans-serif;
  background: var(--bg);
  color: #e2e8f0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* スマホのアドレスバー分の表示崩れを避ける (dvh未対応ブラウザは上のvhにフォールバック) */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 設定/アバター編集などのモーダルを開いている間だけ、ページ自体のスクロールを許可する
   (通常はゲーム画面を固定するためoverflow:hiddenにしているが、スマホでは入力欄に
   フォーカスした時にOSが強制的にページを拡大表示することがあり、その状態だと
   モーダルの✕・保存ボタンが画面外に押し出されて操作できなくなる。ページをスクロール
   できるようにしておけば、どんな状況でもボタンまでスクロールして辿り着ける)。 */
body.modal-open { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ─── Login ─────────────────────────────────────────────── */

#login-screen {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1a0a3e 0%, #05050f 70%);
}

.login-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 20px;
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 340px; text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 60px rgba(124,58,237,0.15);
}

.logo { font-size: 3rem; }
.login-card h1 { font-size: 2rem; color: var(--purple-light); letter-spacing: .04em; }
.tagline { color: #666; font-size: 0.82rem; margin-top: -8px; }

.login-card input {
  padding: 11px 14px; border-radius: 9px;
  border: 1px solid #2d2d4e;
  background: rgba(0,0,0,0.5); color: #eee;
  font-size: 0.95rem;
}
.login-card input:focus { outline: none; border-color: var(--purple); }

.login-card button {
  padding: 13px; border-radius: 9px; border: none;
  background: var(--purple); color: #fff; font-size: 1rem;
  font-weight: 700; cursor: pointer; transition: background .15s;
}
.login-card button:hover { background: #6d28d9; }

.secondary-btn {
  padding: 10px !important; border-radius: 9px !important;
  border: 1px solid var(--border) !important;
  background: rgba(124,58,237,0.12) !important; color: #d8c8ff !important;
  font-size: 0.88rem !important; font-weight: 600 !important; cursor: pointer;
  transition: background .15s;
}
.secondary-btn:hover { background: rgba(124,58,237,0.25) !important; }

.appearance-row { display: flex; gap: 8px; }
.body-btn {
  flex: 1; padding: 9px !important; font-size: 0.85rem !important;
  border-radius: 9px; border: 1px solid #3b1f8c !important;
  background: transparent !important; color: #999;
  cursor: pointer; transition: background .1s, color .1s;
}
.body-btn.active { background: var(--purple) !important; color: #fff; border-color: var(--purple) !important; }
#player-color {
  width: 46px; height: 40px; padding: 2px; border-radius: 9px;
  border: 1px solid #2d2d4e; background: rgba(0,0,0,0.5); cursor: pointer;
}

.hint { font-size: 0.72rem; color: #555; }

/* ─── 顔カスタマイズ (ログイン画面/設定画面で共通、AvatarUI.js が生成) ────── */

.face-editor {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px; margin-top: 2px;
  border: 1px solid rgba(124,58,237,0.2); border-radius: 10px;
  background: rgba(0,0,0,0.2);
}
.face-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 0.8rem; color: #ccc;
}
.face-row select {
  flex: 1; max-width: 150px; padding: 6px 8px; border-radius: 7px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.82rem; font-family: inherit;
}
.face-row select:focus { outline: none; border-color: var(--purple-light); }
.face-glasses-row { justify-content: flex-start !important; }

/* ─── Canvas ─────────────────────────────────────────────── */

#canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
}

/* ─── HUD ────────────────────────────────────────────────── */

#hud {
  position: fixed; inset: 0;
  pointer-events: none;
}

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; row-gap: 4px;
  padding: 8px 16px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  font-size: 0.82rem; pointer-events: none;
}
#quiz-status { color: var(--purple-light); font-weight: 700; }

.zone-tag {
  background: rgba(124,58,237,0.25);
  border: 1px solid rgba(124,58,237,0.4);
  border-radius: 12px;
  padding: 2px 12px;
  font-size: 0.78rem;
  color: #c084fc;
  font-weight: 600;
  letter-spacing: .03em;
  transition: background .3s;
}

#hint {
  position: absolute; bottom: 105px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7); padding: 6px 18px; border-radius: 20px;
  font-size: 0.82rem; color: var(--purple-light); pointer-events: none;
  transition: opacity .2s;
}

#move-hint {
  position: absolute; bottom: 70px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55); padding: 6px 18px; border-radius: 20px;
  font-size: 0.78rem; color: #666; pointer-events: none;
  opacity: 1; transition: opacity 3s;
}

/* ─── 仮想スティック (タッチ操作端末のみ、main.jsがJSで表示を切り替える) ────── */

#touch-joystick {
  position: absolute; left: 16px; bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  width: 108px; height: 108px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--border);
  pointer-events: all; touch-action: none;
}
#touch-joystick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(167,139,250,0.55);
  border: 2px solid var(--purple-light);
}

/* ─── Panel ──────────────────────────────────────────────── */

.panel {
  position: absolute;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  backdrop-filter: blur(10px);
  pointer-events: all;
}
.panel-title { font-size: 0.78rem; color: var(--purple-light); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.hidden { display: none !important; }

/* ─── モーダル共通のヘッダー(タイトル+✕閉じるボタン) ─────────────────────
   スマホ等キーボードが無い(Escキーが無い)端末でも必ず閉じられるようにする。
   #settings-panel/#avatar-editorのように中身が縦に長いウィンドウでは、
   このヘッダーと下部のアクション行(保存ボタン等)を常に画面内に固定表示し、
   中身(.settings-body/.avatar-editor-body)だけを内部スクロールさせることで
   画面の低いスマホでもボタンが画面外にはみ出さないようにする。 */
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.panel-close-btn {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(124,58,237,0.12);
  color: #ccc; font-size: 0.95rem; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.panel-close-btn:hover { background: rgba(124,58,237,0.32); color: #fff; }

/* ─── Quiz panel ─────────────────────────────────────────── */

#quiz-panel {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: min(480px, calc(100vw - 32px)); max-width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: center; pointer-events: all;
}

#question-text {
  font-size: 1.25rem; font-weight: 700;
  color: #f0e6ff; line-height: 1.6;
  margin-bottom: 16px;
}

#buzz-result {
  font-size: 1.4rem; font-weight: 700; padding: 10px;
}

#board-area {
  display: flex; gap: 8px; margin-top: 8px;
}
#answer-input {
  flex: 1; padding: 10px 12px; border-radius: 7px;
  border: 1px solid #5b21b6;
  background: rgba(0,0,0,0.6); color: #eee;
  font-size: 0.95rem;
}
#answer-input:focus { outline: none; border-color: var(--purple-light); }
#submit-btn {
  padding: 10px 18px; border-radius: 7px; border: none;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}

#answers-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

.answer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-radius: 7px;
  background: rgba(255,255,255,0.06); font-size: 0.9rem;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── ルール設定 (司会席の「ルール設定」ボタン操作時のみ表示) ────────── */

#rules-compose {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 440px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  pointer-events: all;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 12px;
}
#rules-compose h3 {
  color: var(--purple-light); font-size: 1rem; margin-bottom: 2px;
}
#rules-compose .rules-hint { color: #999; font-size: 0.74rem; }

.rules-section {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(124, 58, 237, 0.07); border: 1px solid rgba(124, 58, 237, 0.18);
}
.rules-row {
  display: flex; align-items: center; gap: 10px;
}
.rules-row-label {
  flex: 1; font-size: 0.85rem; color: #ddd;
}

/* トグルスイッチ (勝ち抜け/失格の「無効にする」を空欄運用ではなくON/OFFで見せる) */
.switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch-slider {
  position: absolute; inset: 0; border-radius: 20px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
  transition: background .15s, border-color .15s;
}
.switch-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #ccc; transition: transform .15s;
}
.switch input:checked + .switch-slider { background: var(--purple); border-color: var(--purple-light); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); background: #fff; }
/* 無効(トグルOFF)の時はステッパーを操作不能にして「今は使われない」ことを視覚的に示す
   (チェックボックスはswitchラベルの中に入れ子でstepperの兄弟ではないため、CSSの
   隣接セレクタだけでは表現できない。main.js側でこの行に.rules-row-disabledを付け外しする) */
.rules-row-disabled .stepper { opacity: 0.35; pointer-events: none; }

/* 数値ステッパー (+/-ボタン付き数値入力) */
.stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid #3b1f8c; border-radius: 7px; overflow: hidden;
  background: rgba(0,0,0,0.5); flex-shrink: 0;
}
.stepper-btn {
  width: 28px; height: 30px; border: none; background: rgba(124,58,237,0.25);
  color: #eee; font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1;
}
.stepper-btn:hover { background: rgba(124,58,237,0.45); }
.stepper-input {
  width: 46px; height: 30px; border: none; background: transparent;
  color: #eee; font-size: 0.9rem; text-align: center; font-family: inherit;
  -moz-appearance: textfield;
}
.stepper-input:focus { outline: none; }
.stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* セグメントコントロール (チャレンジモードの2択をボタンで見せる) */
.segmented { display: flex; gap: 6px; }
.segmented-btn {
  flex: 1; padding: 8px 6px; border-radius: 7px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #bbb; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.segmented-btn.active {
  background: var(--purple); border-color: var(--purple-light); color: #fff;
}

/* 得点編集リスト */
.rules-score-section { max-height: 260px; }
.rules-score-header { display: flex; align-items: center; justify-content: space-between; }
.danger-btn {
  padding: 6px 12px; border-radius: 7px; border: 1px solid rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.15); color: #ff8080; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.danger-btn:hover { background: rgba(239,68,68,0.3); }
.rules-score-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 190px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.rules-score-empty { color: #777; font-size: 0.78rem; padding: 6px 2px; }
.score-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,0.05);
}
.score-row-color { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.score-row-name {
  flex: 1; font-size: 0.82rem; color: #eee;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.score-field { display: flex; align-items: center; gap: 3px; font-size: 0.72rem; color: #999; }
.score-field input {
  width: 42px; padding: 4px 5px; border-radius: 6px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.82rem; font-family: inherit; text-align: center;
}
.score-field input:focus { outline: none; border-color: var(--purple-light); }
.score-apply-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(124,58,237,0.5);
  background: rgba(124,58,237,0.2); color: #d8c8ff; font-size: 0.85rem; cursor: pointer;
  flex-shrink: 0; font-family: inherit;
}
.score-apply-btn:hover { background: rgba(124,58,237,0.4); }

.rules-actions {
  display: flex; align-items: center; justify-content: space-between; margin-top: 2px;
  flex-shrink: 0;
}
#rules-save-btn {
  padding: 9px 20px; border-radius: 8px; border: none;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}
#rules-save-btn:hover { background: #6d28d9; }

/* ─── 研究室PoC: ボード(筆記)クイズの回答入力 ────────────────────────── */

#board-compose {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; pointer-events: all;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 10px;
}
#board-compose h3 { color: var(--purple-light); font-size: 1rem; margin-bottom: 4px; }
#board-compose input {
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.9rem; font-family: inherit;
}
#board-compose input:focus { outline: none; border-color: var(--purple-light); }
#board-submit-btn {
  padding: 9px 20px; border-radius: 8px; border: none;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}
#board-submit-btn:hover { background: #6d28d9; }

/* ─── フロアチャット (近くにいる人にだけ届くテキストチャット) ───────────
   回答フリップ(◯×A~D)・ボード・エモーションのボタン群も #nearby-chat-controls の
   中に同居しており、ウィンドウ全体を #chat-ctrl の💬ボタンでON/OFFする。 */

#nearby-chat-panel {
  position: absolute;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); /* 下の#mic-ctrl/#chat-ctrlの行の上に出す */
  width: 340px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  backdrop-filter: blur(10px); pointer-events: all;
}
#nearby-chat-panel .panel-title { margin-bottom: 0; }

#nearby-chat-log {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 130px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 0.8rem; line-height: 1.35;
}
.chat-msg { word-break: break-word; }
.chat-msg-name { font-weight: 700; margin-right: 5px; }

#nearby-chat-input-row { display: flex; gap: 6px; }
#nearby-chat-input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 7px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.85rem; font-family: inherit;
}
#nearby-chat-input:focus { outline: none; border-color: var(--purple-light); }
#nearby-chat-send-btn {
  padding: 8px 16px; border-radius: 7px; border: none;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}
#nearby-chat-send-btn:hover { background: #6d28d9; }

#nearby-chat-controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ─── フリップ (◯/×/A/B/C/D) ───────────────────────────────── */

#flip-panel {
  display: flex; gap: 8px; pointer-events: all;
}
.flip-btn {
  width: 46px; height: 46px; border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--panel-bg); color: #eee;
  font-size: 1.15rem; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, transform .1s;
}
.flip-btn:active { transform: scale(0.92); }
.flip-btn.flip-circle { color: #ff5555; }
.flip-btn.flip-cross  { color: #6699ff; }
.flip-btn.active {
  background: var(--purple); border-color: var(--purple-light);
  color: #fff; transform: translateY(-4px);
}
#board-write-input {
  height: 46px; padding: 0 12px; border-radius: 10px; width: 180px;
  border: 2px solid var(--border); background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.9rem; font-family: inherit;
}
#board-write-input:focus { outline: none; border-color: var(--purple-light); }

/* ─── Audio control ──────────────────────────────────────── */

#mic-ctrl {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(16px + env(safe-area-inset-left, 0px));
  pointer-events: all;
}
#chat-ctrl {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: calc(82px + env(safe-area-inset-left, 0px)); /* #mic-ctrlぶん(50px+余白)右に並べる */
  pointer-events: all;
}
#audio-ctrl {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex; gap: 10px;
  pointer-events: all;
}
#mute-btn, #settings-btn, #emote-btn, #chat-toggle-btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--panel-bg); color: #eee;
  font-size: 1.3rem; cursor: pointer; pointer-events: all;
  backdrop-filter: blur(8px); transition: background .15s;
}
#mute-btn.muted { background: #7f1d1d; border-color: #dc2626; }
#emote-btn.active, #chat-toggle-btn.active { background: var(--purple); border-color: var(--purple-light); }

/* ─── エモーション選択パネル ─────────────────────────────── */

#emote-panel {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px;
  backdrop-filter: blur(10px); pointer-events: all;
}
.emote-item {
  width: 42px; height: 42px; border-radius: 8px;
  border: 2px solid transparent; background: rgba(255,255,255,0.06);
  font-size: 1.3rem; cursor: pointer;
  transition: background .15s, transform .1s;
}
.emote-item:hover { background: rgba(255,255,255,0.14); }
.emote-item:active { transform: scale(0.9); }

/* ─── 個人設定パネル ─────────────────────────────────────── */

#settings-panel {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; max-width: calc(100vw - 32px);
  /* iOS Safariの100vhはアドレスバー等を含めた最大表示域を指すため、実際に見えている
     範囲より大きくなることがあり、その差分ぶん保存ボタンが画面外に押し出されて
     押せなくなっていた。実際に見えている範囲を指す100dvhを優先して使う。 */
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  pointer-events: all;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden; /* ヘッダーと下部の保存ボタンは常に表示し、中身だけスクロールさせる */
}
#settings-panel h3 { color: var(--purple-light); font-size: 1rem; }
.settings-body {
  flex: 1 1 auto; min-height: 0; /* flexコンテナ内でoverflow-y:autoを効かせるために必須 */
  overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 16px;
  padding-right: 4px;
}
.settings-section { display: flex; flex-direction: column; gap: 8px; }
.settings-section h4 {
  font-size: 0.76rem; color: #a78bfa; text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid rgba(124,58,237,0.25);
  padding-bottom: 4px;
}
.settings-section label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: #ccc;
}
.settings-section input[type="text"] {
  padding: 8px 10px; border-radius: 7px; width: 100%;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.9rem; font-family: inherit;
}
.settings-section input[type="text"]:focus { outline: none; border-color: var(--purple-light); }
.settings-section select {
  padding: 6px 8px; border-radius: 7px;
  border: 1px solid #3b1f8c; background: rgba(0,0,0,0.5);
  color: #eee; font-size: 0.85rem; font-family: inherit;
}
.settings-section input[type="range"] { flex: 1; accent-color: var(--purple); }
.range-val { font-size: 0.76rem; color: #999; min-width: 2.6em; text-align: right; }
.settings-checkbox { font-size: 0.78rem !important; }
.settings-color-row { display: flex; gap: 14px; flex-wrap: wrap; }
.settings-color-row label { flex-direction: column; align-items: flex-start; gap: 4px; }
.settings-color-row input[type="color"] {
  width: 44px; height: 34px; padding: 2px; border-radius: 7px;
  border: 1px solid #2d2d4e; background: rgba(0,0,0,0.5); cursor: pointer;
}
.settings-status { font-size: 0.76rem; color: #888; }
.set-body-btn, .ae-body-btn, .ae-bottom-btn {
  flex: 1; padding: 9px; font-size: 0.85rem;
  border-radius: 9px; border: 1px solid #3b1f8c;
  background: transparent; color: #999;
  cursor: pointer; transition: background .1s, color .1s;
}
.set-body-btn.active, .ae-body-btn.active, .ae-bottom-btn.active { background: var(--purple); color: #fff; border-color: var(--purple); }
#settings-save-btn {
  padding: 9px 20px; border-radius: 8px; border: none;
  background: var(--purple); color: #fff; font-weight: 700; cursor: pointer;
}
#settings-save-btn:hover { background: #6d28d9; }

/* ─── アバター編集 (プレビュー付き、ログイン画面/設定パネル共通) ────────── */

#avatar-editor {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 620px; max-width: calc(100vw - 32px);
  /* #settings-panelと同じ理由でdvhを優先する(iOS Safariの100vhはアドレスバー分
     実際より大きく、保存ボタンが画面外に押し出されて押せなくなることがあった)。 */
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  pointer-events: all;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden; /* ヘッダーと下部の保存ボタンは常に表示し、中身だけスクロールさせる */
  /* #login-screen(z-index:200)より手前に出す(ログイン前でも開けるウィンドウのため)。 */
  z-index: 210;
}
#avatar-editor h3 { color: var(--purple-light); font-size: 1rem; }
.avatar-editor-body {
  flex: 1 1 auto; min-height: 0; /* flexコンテナ内でoverflow-y:autoを効かせるために必須 */
  display: flex; flex-wrap: wrap; gap: 18px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px;
}
.avatar-editor-preview {
  flex: none; width: min(220px, 100%); height: 300px;
  border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #241a44 0%, #0a0818 75%);
  border: 1px solid rgba(124,58,237,0.25);
}
.avatar-editor-preview canvas { width: 100%; height: 100%; display: block; }
.avatar-editor-controls {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ae-range-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: #ccc;
}

/* ─── Animations ─────────────────────────────────────────── */

@keyframes buzz-flash {
  0%   { background: rgba(255,200,0,0.25); }
  100% { background: transparent; }
}
.buzz-flash { animation: buzz-flash .5s ease; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── スマホ対応 (幅の狭い画面向けに主要UIを一回り小さくする) ────────────── */

@media (max-width: 640px) {
  .login-card { min-width: 0; width: calc(100vw - 32px); padding: 28px 20px; }
  .logo { font-size: 2.4rem; }
  .login-card h1 { font-size: 1.6rem; }

  #topbar { font-size: 0.72rem; padding: 6px 10px; gap: 4px; }
  #topbar span { max-width: 100%; }

  #mute-btn, #settings-btn, #emote-btn, #chat-toggle-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  #chat-ctrl { left: calc(74px + env(safe-area-inset-left, 0px)); } /* ミュートボタンが44pxになった分、詰める */

  .flip-btn { width: 40px; height: 40px; font-size: 1rem; }
  #board-write-input { width: 130px; }

  #nearby-chat-panel { width: calc(100vw - 32px); }
  #nearby-chat-log { max-height: 96px; }

  #touch-joystick { width: 92px; height: 92px; bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  #touch-joystick-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

  #rules-compose, #settings-panel, #avatar-editor { padding: 14px 16px; }
  /* flex-wrap:wrap を残したまま column にすると、はみ出た分が縦に積まれず
     横に新しい列としてはみ出してしまう(マルチカラムラップ)ため、nowrap で
     確実に縦一列に積み、プレビュー/操作パネルとも幅いっぱいに広げる。 */
  .avatar-editor-body { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .avatar-editor-preview { width: 100%; }
  .avatar-editor-controls { width: 100%; }
}

/* 横向き(ランドスケープ)のスマホは縦の余白が少ないため、上下位置をさらに詰める */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  #touch-joystick { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  #nearby-chat-panel { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  #hint { bottom: 78px; }
  #move-hint { bottom: 50px; }
}

/* ─── タッチ端末での入力欄の自動ズーム対策 ─────────────────────────────
   iOS Safariはfont-sizeが16px未満の<input>/<select>/<textarea>にフォーカスすると
   ページを強制的に拡大表示する。head の viewport で user-scalable=no にしていても
   このフォーカス時の拡大だけは発生することがあり、拡大されたままだと設定画面/
   アバター編集画面の✕・保存ボタンが表示領域の外に押し出されて操作できなくなって
   いた(スマホでの「設定画面が閉じられない」報告の主因)。(pointer: coarse)は
   画面幅に関わらずタッチ操作端末を判定できるので、横向きでも確実に効かせる。 */
@media (pointer: coarse) {
  .login-card input,
  .face-row select,
  #answer-input,
  .stepper-input,
  .score-field input,
  #board-compose input,
  #nearby-chat-input,
  #board-write-input,
  .settings-section input[type="text"],
  .settings-section select {
    font-size: 16px;
  }
}