/* =====================================================
   main.css - グローバルスタイル（ライトテーマ）
   ===================================================== */

:root {
  --bg: #eaeff8;
  --surface: #ffffff;
  --surface-light: #f4f7fc;
  --surface-lighter: #e6ecf8;
  --accent: #d62c52;
  --accent-dark: #b52444;
  --text: #1c2340;
  --text-dim: #5f6e9a;
  --correct: #e42828;   /* 正解＝赤 */
  --wrong:   #1a6ed8;   /* 誤答＝青 */
  --neg:     #cc3030;   /* エラー・danger ボタン用（quiz 以外の負） */
  --warn: #c87a00;
  --border: #c8d5ea;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(20,40,100,0.10);
}

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

html, body {
  height: 100%;
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  background: var(--surface-light);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  outline: none;
}

input:focus, select:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* ---------------------------------------------------
   共通ボタン
   --------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--surface-lighter);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.12s, box-shadow 0.12s;
}

.btn:hover {
  background: var(--surface-light);
  box-shadow: 0 1px 4px rgba(20,40,100,0.12);
}
.btn:active { transform: scale(0.97); }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-dark); }

.btn-danger {
  background: transparent;
  border-color: var(--neg);
  color: var(--neg);
}
.btn-danger:hover { background: rgba(204,48,48,0.08); }

.btn-feedback {
  background: transparent;
  border-color: var(--text-sub, #888);
  color: var(--text-sub, #888);
  text-decoration: none;
}
.btn-feedback:hover { background: rgba(128,128,128,0.1); color: var(--text-main, #eee); border-color: var(--text-main, #eee); }

.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-block { display: block; width: 100%; }

.btn-big {
  font-size: 18px;
  font-weight: 700;
  padding: 14px 8px;
  flex: 1;
}

.btn-correct {
  background: var(--correct);
  border-color: var(--correct);
  color: #fff;
}
.btn-correct:hover { background: #c01e1e; }

.btn-wrong {
  background: var(--wrong);
  border-color: var(--wrong);
  color: #fff;
}
.btn-wrong:hover { background: #1458b8; }

/* ---------------------------------------------------
   ロビー（部屋リスト画面）
   --------------------------------------------------- */

/* ===== テキストロゴ ===== */
.app-logo-text {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #1c2340;
  flex-shrink: 0;
  line-height: 1;
  white-space: nowrap;
}
.app-logo-text--bar {
  font-size: 20px;
  color: rgba(255,255,255,0.95);
}
.logo-o { color: #d62c52; }
.logo-x { color: #2060c8; }
.app-logo-text--bar .logo-o { color: #ff7090; }
.app-logo-text--bar .logo-x { color: #70aaff; }
.logo-plus {
  font-size: 0.62em;
  font-weight: 700;
  color: #6a7aaa;
  letter-spacing: 0.3px;
}
.app-logo-text--bar .logo-plus { color: rgba(255,255,255,0.60); }

/* ===== ヒーローヘッダー ===== */
.lobby-hero {
  position: relative;
  background: linear-gradient(140deg, #171f42 0%, #1e2a5a 55%, #1a3268 100%);
  padding: 32px 24px 36px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(16,30,90,0.30);
}

/* デコレーション（背景演出） */
.hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hd-big-q {
  position: absolute;
  right: 5%;
  top: -18px;
  font-size: 180px;
  font-weight: 900;
  color: rgba(255,255,255,0.038);
  line-height: 1;
  user-select: none;
  font-family: inherit;
}
.hd-ring {
  position: absolute;
  border-radius: 50%;
}
.hd-ring.r1 {
  width: 260px; height: 260px;
  border: 2px solid rgba(214,44,82,0.14);
  right: -55px; top: -100px;
}
.hd-ring.r2 {
  width: 160px; height: 160px;
  border: 1.5px solid rgba(255,255,255,0.07);
  right: 80px; bottom: -55px;
}
.hd-ring.r3 {
  width: 70px; height: 70px;
  border: 1.5px solid rgba(32,96,200,0.22);
  right: 230px; top: 18px;
}

/* ヒーロー内レイアウト */
.lobby-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

/* ブランドエリア */
.hero-brand { }
.hero-logo {
  font-size: 40px !important;
  color: #fff !important;
}
.hero-logo .logo-o { color: #ff7090 !important; }
.hero-logo .logo-x { color: #70aaff !important; }
.hero-logo .logo-plus { color: rgba(255,255,255,0.55) !important; }

.hero-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.52);
  margin-top: 7px;
  letter-spacing: 2.5px;
  font-weight: 400;
}

/* 名前入力エリア */
.hero-name-area {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hero-name-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.60);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero-name-area input {
  background: rgba(255,255,255,0.10);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  width: 240px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.hero-name-area input::placeholder { color: rgba(255,255,255,0.30); }
.hero-name-area input:focus {
  background: rgba(255,255,255,0.16);
  border-color: rgba(214,44,82,0.75);
  box-shadow: 0 0 0 3px rgba(214,44,82,0.18);
  outline: none;
}

/* ===== 更新情報バナー ===== */
.lobby-news-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  background: rgba(88,101,242,0.10);
  border-bottom: 1px solid rgba(88,101,242,0.30);
  font-size: 13px;
  color: var(--text);
  text-align: center;
}
.lobby-news-icon {
  flex-shrink: 0;
}
.lobby-news-link {
  color: #7289da;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lobby-news-link:hover {
  color: #99aaf0;
}

/* ===== リンクバー（操作ガイド・リリースノート・フィードバック） ===== */
.lobby-links-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.lobby-link-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: none;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-light);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.lobby-link-item:hover {
  background: var(--surface-lighter);
  color: var(--text);
  border-color: var(--accent);
}

/* ===== メインコンテンツ ===== */
.lobby-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 18px 56px;
}

/* ツールバー */
.lobby-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.toolbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lobby-toolbar h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.live-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1b9a55;
  background: rgba(27,154,85,0.12);
  border: 1px solid rgba(27,154,85,0.28);
  border-radius: 4px;
  padding: 2px 7px;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* 部屋を作るボタン */
.btn-create {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  box-shadow: 0 3px 14px rgba(214,44,82,0.30);
  transition: background 0.12s, transform 0.10s, box-shadow 0.12s;
}
.btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(214,44,82,0.42);
}
.btn-create:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(214,44,82,0.25); }

/* ===== 部屋リスト ===== */
.room-list-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(20,40,100,0.09);
}

.room-table {
  width: 100%;
  border-collapse: collapse;
}
.room-table th {
  background: var(--surface-light);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
}
.room-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.room-table tbody tr:last-child td { border-bottom: none; }
.room-table tbody tr {
  transition: background 0.10s;
}
.room-table tbody tr:hover { background: #f0f4fc; }
.room-table td:last-child { text-align: right; }

/* 列スタイル */
.room-table .col-no {
  width: 44px;
  text-align: center;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 12px;
}
.room-table .col-name {
  font-weight: 600;
  color: var(--text);
}
.room-table .col-count {
  width: 52px;
  text-align: center;
  white-space: nowrap;
}
.room-table .col-join {
  width: 60px;
  text-align: right;
  white-space: nowrap;
}
.room-table .col-join button {
  white-space: nowrap;
}
.room-lock-icon {
  font-size: 12px;
  opacity: 0.75;
}

/* 固定部屋バッジ */
.room-pinned-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  background: rgba(180, 83, 9, 0.10);
  border: 1px solid rgba(180, 83, 9, 0.30);
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
tr.room-pinned td {
  background: rgba(251, 191, 36, 0.07);
}
tr.room-pinned:hover td {
  background: rgba(251, 191, 36, 0.14);
}

/* ===== 空リスト表示 ===== */
.empty-notice {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-dim);
}
.empty-notice .empty-icon {
  display: block;
  font-size: 44px;
  margin-bottom: 14px;
  opacity: 0.38;
}
.empty-notice .empty-text {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.empty-notice .empty-sub {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  opacity: 0.75;
}

/* ---------------------------------------------------
   モーダル
   --------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,50,120,0.25);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay.show { display: flex; }
/* スマホでキーボードが出ても入力欄が隠れないよう上寄せ＋余白 */
@media (max-width: 700px) {
  .modal-overlay.show {
    align-items: flex-start;
    padding: 48px 0 24px;
  }
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(20,40,100,0.18);
  width: min(400px, calc(100vw - 28px));
  padding: 20px 22px;
}
.modal h3 {
  margin-bottom: 12px;
  font-size: 17px;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  color: var(--text);
}
.modal p { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.modal label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.modal label input {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* ---------------------------------------------------
   トースト通知
   --------------------------------------------------- */
#toast-container {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5500;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
}

/* ゲーム画面ではメニューバーの下に表示 */
body[data-page="room"] #toast-container {
  top: calc(42px + env(safe-area-inset-top, 0px) + 8px);
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(20, 45, 120, 0.14);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.error {
  border-color: var(--neg);
  color: var(--neg);
  background: #fff8f8;
}

/* ---------------------------------------------------
   音声通話 UI
   --------------------------------------------------- */

/* ミュートFAB（左下固定・丸ボタン） */
#mute-fab {
  position: fixed;
  bottom: 56px;         /* タスクバー(42px) + 余白 */
  left: 16px;
  z-index: 4900;
  display: none;        /* 通話有効時のみ表示 */
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.mute-fab-btn {
  position: relative;      /* アイコンの絶対配置基準 */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  outline: none;
  flex-shrink: 0;
}
.mute-fab-btn:hover  { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0,0,0,0.40); }
.mute-fab-btn:active { transform: scale(0.93); }

/* 通話中（緑） */
.mute-fab-btn.fab-talking { background: #1b9a55; }
/* ミュート中（赤） */
.mute-fab-btn.fab-muted   { background: #cc3030; }

/* アイコン：両方を絶対配置で重ねてopacityで切り替え → レイアウトシフトなし */
.fab-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.fab-talking .fab-icon-mic   { opacity: 1; }
.fab-muted   .fab-icon-muted { opacity: 1; }

/* 発話中パルス */
@keyframes fab-speaking-pulse {
  0%,100% { box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 0    rgba(27,154,85,0.50); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 10px rgba(27,154,85,0);    }
}
.mute-fab-btn.fab-talking.fab-speaking {
  animation: fab-speaking-pulse 1.0s ease-out infinite;
}

/* ラベル：幅固定でテキスト変化によるずれを防止 */
.mute-fab-label {
  display: block;
  width: 54px;             /* ボタンと同幅に固定 */
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 8px;
  padding: 2px 0;
  white-space: nowrap;
  letter-spacing: 0.3px;
  pointer-events: none;
  box-sizing: border-box;
}

/* 通話OFF状態ボタン */
.btn-voice-off {
  background: var(--surface-lighter);
  border-color: var(--border);
  color: var(--text-dim);
}
.btn-voice-off:hover { background: var(--surface-light); }

/* 通話ON状態ボタン */
.btn-voice-on {
  background: rgba(27,154,85,0.12);
  border-color: #1b9a55;
  color: #1b9a55;
  font-weight: 600;
}
.btn-voice-on:hover { background: rgba(27,154,85,0.22); }

/* メニューバー内の通話トグルエリア */
#voice-host-area {
  display: flex;
  align-items: center;
}

/* ---------------------------------------------------
   チャット通知ポップアップ
   --------------------------------------------------- */
#chat-notif-container {
  position: fixed;
  /* メニューバーの直下・右端：リーチバッジや早押しボタンと被らない位置 */
  top: calc(42px + env(safe-area-inset-top, 0px) + 8px);
  right: 14px;
  bottom: auto;
  z-index: 1900;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  max-width: 260px;
}
.chat-notif {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(20,40,100,0.16);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1.4;
  word-break: break-word;
}
.chat-notif.show {
  opacity: 1;
  transform: translateY(0);
}
.chat-notif-name {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 2px;
}
.chat-notif-text {
  font-size: 13px;
  color: var(--text);
}

/* ---------------------------------------------------
   ロビーフッター・リセット案内
   --------------------------------------------------- */
.lobby-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 22px;
  color: var(--text-dim);
  font-size: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  opacity: 0.80;
}
.footer-sep { opacity: 0.40; }
.footer-links {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.footer-links a:hover { opacity: 1; }
.footer-link-donate {
  color: #b45309 !important;
  font-weight: 600;
  opacity: 0.85 !important;
}
.footer-legal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.50;
}
.footer-legal a {
  color: var(--text-dim);
  text-decoration: none;
}
.footer-legal a:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------
   ゲームパッド設定
   --------------------------------------------------- */
.setting-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.gp-map-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp-map-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.gp-map-label {
  flex: 1;
  color: var(--text);
}
.gp-map-value {
  min-width: 64px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
}
.btn-xs {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}
.gp-capture-hint {
  font-size: 12px;
  color: var(--warn);
  padding: 6px 0;
  text-align: center;
  animation: blink 0.9s step-start infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }
/* #gamepad-status スタイルは windows.css の .gp-status-badge で管理 */

/* ---------------------------------------------------
   AQLチーム戦スコアボード（番号横並びレイアウト）
   --------------------------------------------------- */
.aql-team-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.aql-scoreboard {
  flex-shrink: 0;
  padding: 4px 0 6px;
}

/* 勝者バナー */
.aql-banner {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.aql-banner.aql-win  { background: rgba(255,220,0,.13); border: 1px solid rgba(255,200,0,.4); color: #ffd700; }
.aql-banner.aql-draw { background: rgba(150,150,150,.1); border: 1px solid var(--border); color: var(--text-dim); }

/* チームブロック */
.aql-team-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px 8px;
  margin-bottom: 2px;
  position: relative;
  overflow: hidden;
}
.aql-team-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--aql-block-color, var(--border));
  border-radius: 10px 0 0 10px;
}
.aql-team-block:nth-child(1) { --aql-block-color: #4a78c8; }
.aql-team-block:nth-child(3) { --aql-block-color: #c84a4a; }
.aql-team-block.aql-team-winner {
  border-color: #ffd700;
  box-shadow: 0 0 10px rgba(255,215,0,.30);
}
.aql-team-block.aql-team-winner::before { background: #ffd700; }
.aql-team-sep {
  height: 6px;
}

/* チームヘッダー（中央揃え縦積み） */
.aql-team-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-bottom: 8px;
  padding-left: 4px;
}
.aql-team-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  user-select: none;
}
.aql-score {
  font-size: 34px;
  font-weight: 900;
  color: var(--aql-tc-header, var(--text));
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 16px color-mix(in srgb, var(--aql-tc-header, var(--accent)) 40%, transparent);
}
.aql-score.aql-score-win {
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255,215,0,0.55);
}
.aql-team-block:nth-child(1) { --aql-tc-header: #4a78c8; }
.aql-team-block:nth-child(3) { --aql-tc-header: #c84a4a; }

/* REACH：チームヘッダーのバッジ */
.aql-reach-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #c88000;
  background: rgba(200,128,0,0.13);
  border: 1px solid rgba(200,128,0,0.40);
  border-radius: 4px;
  padding: 1px 8px;
  animation: reach-pulse 1.2s ease-in-out infinite;
}

/* REACH：チームブロック強調 */
.aql-team-block.aql-team-reach {
  border-color: rgba(200,128,0,0.55);
}
.aql-team-block.aql-team-reach::before {
  background: linear-gradient(180deg, #c88000, #e0a020);
}

@keyframes reach-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ------- AQLポジションカードグリッド（player-cardスタイルに準拠）------- */
.aql-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

/* カード本体 */
.aql-pos-card {
  --aql-tc: var(--border);
  --pc: var(--aql-tc);  /* buzz-active-pulse アニメ流用 */
  min-height: 100px;
  background: var(--surface);
  border: 3px solid var(--aql-tc);
  border-radius: 10px;
  padding: 5px 4px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s, box-shadow 0.15s;
  overflow: hidden;
  position: relative;
}
.aql-pos-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--aql-tc), color-mix(in srgb, var(--aql-tc) 60%, transparent));
  border-radius: 10px 10px 0 0;
}
.aql-pos-card:hover {
  background: color-mix(in srgb, var(--aql-tc) 7%, var(--surface));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--aql-tc) 20%, transparent);
}

/* チーム色 */
.aql-pos-card.aql-team-0 { --aql-tc: #4a78c8; }
.aql-pos-card.aql-team-1 { --aql-tc: #c84a4a; }

/* 自分の番号 */
.aql-pos-card.aql-pos-mine {
  background: color-mix(in srgb, var(--aql-tc) 10%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aql-tc) 50%, transparent);
}

/* REACH（次の正解で勝利）*/
.aql-pos-card.aql-pos-reach {
  border-color: #c88000;
  background: rgba(200,128,0,0.07);
  box-shadow: 0 0 10px rgba(200,128,0,0.30);
  animation: aql-reach-glow 1.2s ease-in-out infinite;
}
.aql-pos-card.aql-pos-reach::after {
  background: linear-gradient(90deg, #c88000, #e0b040);
}

@keyframes aql-reach-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(200,128,0,0.28); }
  50%       { box-shadow: 0 0 18px rgba(200,128,0,0.60); }
}

/* REACH バッジ（カード内下部） */
.apc-reach-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #a06000;
  background: rgba(200,128,0,0.18);
  border: 1px solid rgba(200,128,0,0.45);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ロック（封鎖済み）：灰色表示 */
.aql-pos-card.aql-pos-locked {
  --aql-tc: var(--border);
  opacity: 0.6;
  border-color: var(--border);
  background: var(--surface);
  cursor: default;
  filter: grayscale(1);
}
.aql-pos-card.aql-pos-locked::after {
  background: var(--border);
}
.aql-pos-card.aql-pos-locked:hover {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: none;
}

/* 早押し1着 */
.aql-pos-card.aql-pos-buzzing-1st {
  background: color-mix(in srgb, var(--aql-tc) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--aql-tc) 90%, white 10%);
  animation: buzz-active-pulse 0.75s ease-in-out infinite;
  transform-origin: center;
}

/* 早押し2着以降 */
.aql-pos-card.aql-pos-buzzing {
  background: color-mix(in srgb, var(--aql-tc) 5%, var(--surface));
}

/* 判定済み（薄く）*/
.aql-pos-card.aql-pos-judged {
  opacity: 0.46;
}

/* 番号トップ行 */
.apc-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  width: 100%;
  margin-top: 2px;
}
.apc-posnum {
  font-size: 17px;
  font-weight: 800;
  color: var(--aql-tc);
  line-height: 1;
  letter-spacing: -0.5px;
}
.apc-mine-star {
  font-size: 10px;
  color: var(--aql-tc);
  line-height: 1;
}

/* プレイヤー名（常に2スロット） */
.apc-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  justify-content: center;
  width: 100%;
  gap: 0;
  padding: 2px 0;
}
.apc-name {
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.6;
}
.apc-no-player {
  color: var(--text-dim);
  font-weight: 300;
  opacity: 0.5;
}

/* ポイント（大）*/
.apc-pts-row { flex-shrink: 0; line-height: 1; }
.apc-pts {
  font-size: 28px;
  font-weight: 900;
  color: var(--aql-tc);
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -1px -1px 0 color-mix(in srgb, var(--aql-tc) 25%, transparent),
     1px -1px 0 color-mix(in srgb, var(--aql-tc) 25%, transparent),
    -1px  1px 0 color-mix(in srgb, var(--aql-tc) 25%, transparent),
     1px  1px 0 color-mix(in srgb, var(--aql-tc) 25%, transparent);
}

/* バツ数エリア */
.apc-wrongs {
  line-height: 1;
  flex-shrink: 0;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.apc-wrong-zero {
  font-size: 8px;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.35;
  letter-spacing: 1px;
}
.apc-wrong-x {
  font-size: 11px;
  font-weight: 700;
  color: #c86020;
  letter-spacing: -1px;
}
.apc-wrong-seal {
  font-size: 9px;
  font-weight: 800;
  color: var(--neg);
  background: rgba(220,50,50,0.14);
  border: 1px solid rgba(220,50,50,0.30);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.5px;
}

/* チームカラーテキスト（チームヘッダー名）*/
.aql-team-color-0 { color: #4a78c8; }
.aql-team-color-1 { color: #c84a4a; }

/* チーム名インライン編集 input */
.aql-name-edit-input {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  background: var(--surface-light);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
  padding: 2px 6px;
  width: 120px;
  max-width: 100%;
  outline: none;
}

/* =====================================================
   イントロクイズ（音声早押し）
   ===================================================== */

/* 参加者ウィンドウ body */
.aq-body {
  gap: 6px;
  padding: 10px 14px;
}

/* ファイル名表示 */
.aq-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* プログレスバー行 */
.aq-progress-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aq-progress {
  flex: 1;
  height: 8px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-light);
  border: 1px solid var(--border);
}
.aq-progress::-webkit-progress-bar { background: var(--surface-light); }
.aq-progress::-webkit-progress-value {
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.25s linear;
}
.aq-progress::-moz-progress-bar {
  background: var(--accent);
  border-radius: 4px;
}

/* 時刻表示 */
.aq-time {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ステータス */
.aq-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-height: 16px;
}

/* 司会者ウィンドウ body */
.aq-host-body {
  gap: 10px;
  padding: 10px 14px;
}

/* 著作権注意文 */
.upload-copyright-notice {
  font-size: 11px;
  line-height: 1.5;
  color: var(--warn);
  background: rgba(200, 122, 0, 0.08);
  border-left: 3px solid var(--warn);
  border-radius: 0 4px 4px 0;
  padding: 6px 8px;
}

/* ファイル選択ラベル */
.aq-file-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.aq-file-label input[type="file"] {
  font-size: 13px;
  color: var(--text);
}

/* アップロード状態 */
.aq-upload-status {
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ランダム開始ラベル */
.aq-random-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

/* =====================================================
   共有ウィンドウ（win-share）
   ===================================================== */
.share-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.share-url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-url-input {
  flex: 1;
  font-size: 12px;
  font-family: 'Noto Sans JP', monospace;
  background: var(--surface-light);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text-dim);
  cursor: text;
  min-width: 0;
}
.share-copy-btn {
  flex-shrink: 0;
  white-space: nowrap;
}
.share-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* =====================================================
   招待バナー（ロビー）
   ===================================================== */
.invite-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #e8f5e9;
  border-top: 1px solid #c8e6c9;
  border-bottom: 1px solid #c8e6c9;
  color: #1b5e20;
  padding: 11px 20px;
  font-size: 14px;
  flex-wrap: nowrap;
}
.invite-banner > button {
  flex-shrink: 0;
  white-space: nowrap;
}
.invite-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.invite-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.invite-banner-label {
  font-weight: 500;
  line-height: 1.4;
}
.invite-banner-sub {
  font-size: 12px;
  color: #388e3c;
  line-height: 1.3;
}

/* 招待対象の部屋を一覧で強調 */
tr.invite-highlight td {
  background: #fffde7;
}
tr.invite-highlight:hover td {
  background: #fff9c4;
}

/* Discord Activity バナー（ロビー） */
.discord-activity-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #eef0fd;
  border-top: 1px solid #c9ccf5;
  border-bottom: 1px solid #c9ccf5;
  color: #2f3680;
  padding: 11px 20px;
  font-size: 14px;
  flex-wrap: nowrap;
}
.discord-activity-banner > button {
  flex-shrink: 0;
  white-space: nowrap;
}
.discord-activity-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.discord-activity-banner-title {
  font-weight: 600;
  line-height: 1.4;
}
.discord-activity-banner-sub {
  font-size: 12px;
  color: #5865F2;
  line-height: 1.3;
}