/* 右の列(自分のカード・山札・操作・プレイヤー一覧)とログ */

.me { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.me__text { flex: 1 1 140px; min-width: 0; font-size: .9rem; color: var(--muted); }
.me__text strong { color: var(--text); }

.players { display: grid; gap: 6px; }
.pl {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: #111a40; font-size: .85rem;
}
.pl[data-turn="true"] { border-color: var(--turn); box-shadow: 0 0 0 2px rgba(255, 209, 102, .35); }
.pl[data-eliminated="true"] { border-style: dashed; opacity: .75; }
.pl[data-eliminated="true"] .pl__name { text-decoration: line-through; }
.pl__avatar { width: 32px; height: 32px; border-radius: 50%; background: #33437a; object-fit: cover; display: grid; place-items: center; font-weight: 700; overflow: hidden; }
.pl__name { font-weight: 700; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pl__meta { color: var(--muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 2px 10px; }
.pl__identity { grid-column: 1 / -1; font-size: .8rem; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; color: var(--muted); }
.pl__identity .identity-lines { display: flex; flex-wrap: wrap; gap: 0 10px; list-style: none; margin: 0; padding: 0; }
.pl__identity .badge { font-size: .75rem; padding: 0 8px; }

/* ダメージボード */
.dmg { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dmg__row { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; min-height: 22px; padding: 1px 4px; border-radius: 6px; background: #0f1738; }
.dmg__row[data-has="true"] { background: #1a2556; }
.dmg__row[data-damage="14"] { border: 1px solid var(--danger); }
.dmg__n { font-weight: 700; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.dmg__row[data-has="true"] .dmg__n { color: var(--turn); }
.dmg__members { display: flex; flex-wrap: wrap; gap: 3px; }
.dchip { display: inline-flex; gap: 4px; align-items: baseline; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; background: #111a40; }
.dchip__area { color: var(--muted); font-size: .72rem; }
.dchip[data-me="true"] { border-color: var(--ok); }
.dchip[data-turn="true"] { border-color: var(--turn); box-shadow: 0 0 0 1px var(--turn); }
.dchip[data-eliminated="true"] { border-style: dashed; opacity: .7; }
.dchip[data-eliminated="true"] .dchip__name { text-decoration: line-through; }

/* 確認(選択待ち)。待っている人が誰でも、他の人には同じ1行 */
.prompt { border: 2px solid var(--turn); border-radius: var(--radius); padding: 10px; background: #231f3d; }
.prompt__title { color: var(--turn); font-weight: 700; margin: 0 0 6px; }
.prompt form { display: grid; gap: 8px; }
.prompt .options { display: grid; gap: 4px; }
.waiting { border: 2px dashed var(--line); border-radius: var(--radius); padding: 10px; color: var(--muted); }

/* ログ */
.log { max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: .9rem; }
.log li { padding: 2px 8px; border-left: 3px solid var(--line); }
.log li[data-type="turn_started"] { border-left-color: var(--turn); color: var(--turn); font-weight: 700; margin-top: 6px; }
.log li[data-type="eliminated"], .log li[data-type="game_finished"] { border-left-color: var(--danger); font-weight: 700; }
.log li[data-type="identity_revealed"] { border-left-color: var(--shadow); }
.log li[data-new="true"] { animation: log-flash 1.4s ease; }
@keyframes log-flash { from { background: rgba(255, 209, 102, .35); } to { background: transparent; } }
@media (max-width: 860px) { .log { max-height: 50vh; } }

/* ロビーのCPU(開発用) */
form.inline { display: inline; }
form.inline button { min-height: 32px; padding: 2px 10px; }

/* プレイヤー一覧をもう少し詰める(正体の詳細は、1〜2行に収める) */
.pl__identity .badge { display: none; }
.pl__identity .identity-lines li { white-space: nowrap; }
.pl__meta { gap: 0 8px; }

/* いま起きたこと(新しいイベントを、画面の上に数秒出す) */
#now-banner {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: min(92vw, 560px); display: none;
  background: rgba(10, 14, 36, .94); border: 2px solid var(--turn); border-radius: 12px; padding: 6px 14px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
#now-banner[data-show="true"] { display: block; animation: banner-in .25s ease both; }
#now-banner p { margin: 2px 0; font-weight: 700; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { #now-banner[data-show="true"] { animation: none; } }
.pl__identity .ccard { --cw: 24px; }
.pl__identity .ccard * { display: none; } /* 一覧の中の裏面は、小さな印だけ */
.pl .equipment { gap: 3px; margin-top: 2px; }
.pl .echip__btn { min-height: 22px; padding: 0 8px; font-size: .75rem; }
.pl__identity .identity-lines li { font-size: .75rem; }
.pl__name { gap: 2px 6px; }
.pl__name .badge { font-size: .72rem; padding: 0 8px; }

/* 直近の出来事 */
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: .85rem; }
.recent li { padding: 3px 8px; border-left: 4px solid var(--line); background: #111a40; border-radius: 4px; }
.recent li[data-latest="true"] { border-left-color: var(--turn); font-weight: 700; background: #1d2a5e; }
.recent li[data-type="dice_rolled"] { border-left-color: var(--citizen); }
.recent li[data-type="identity_revealed"] { border-left-color: var(--shadow); }
.recent li[data-type="ability_used"] { border-left-color: var(--raider); }
.recent li[data-type="eliminated"], .recent li[data-type="game_finished"] { border-left-color: var(--danger); }

/* エフェクト(ダメージ・回復・脱落の数字、正体公開の大きな表示)。body に出すので、画面の更新で消えない */
.fx {
  position: fixed; z-index: 45; transform: translate(-50%, 0); pointer-events: none; font-weight: 800; font-size: 1.7rem;
  text-shadow: 0 2px 4px #000, 0 0 10px #000; animation: fx-rise 2.2s ease-out both; white-space: nowrap;
}
.fx--damage { color: #ff5a5a; }
.fx--heal { color: #6df0a4; }
.fx--elim { color: #ffb4b4; font-size: 1.4rem; }
.fx--reveal { color: #ffe08a; font-size: 1.2rem; }
@keyframes fx-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.25); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}
#reveal-toast-live {
  position: fixed; left: 50%; top: 22%; z-index: 44; display: none; transform: translateX(-50%); max-width: 92vw; text-align: center;
  padding: 10px 22px; border: 3px solid var(--shadow); border-radius: 14px; background: rgba(20, 12, 44, .96);
  font-weight: 800; font-size: 1.25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); pointer-events: none;
}
#reveal-toast-live[data-show="true"] { display: block; animation: reveal-pop 3s ease both; }
@keyframes reveal-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  20% { transform: translateX(-50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx, #reveal-toast-live[data-show="true"] { animation-duration: 1ms; animation-delay: 0s; } }

/* プレイヤー一覧: 見えているキャラ(自分・公開済み)にカーソルを合わせると、能力・勝利条件のカードを出す */
.pl[data-pop="true"] { cursor: help; }
.pl__pop { display: none; position: fixed; z-index: 50; pointer-events: none; }
.pl__pop[data-open="true"] { display: block; }
.pl__pop .ccard { box-shadow: 0 14px 34px rgba(0, 0, 0, .7); }

/* ---- 席ごとの名前の色(ログ・バナー・一覧で共通。名前の文字は残すので、色だけに頼らない) ---- */
.pn { font-weight: 700; }
.seat-0 { color: #ff9b9b; }
.seat-1 { color: #ffc27a; }
.seat-2 { color: #f2e06a; }
.seat-3 { color: #9be59b; }
.seat-4 { color: #6fe3d0; }
.seat-5 { color: #7fc4ff; }
.seat-6 { color: #a9a6ff; }
.seat-7 { color: #d79bff; }
.seat-8 { color: #ff9bd6; }
.seat-9 { color: #c9c9c9; }

/* ---- ログの区切り(第N巡・開始直後の推理カード) ---- */
.log li.log__sep {
  margin: 8px 0 2px; padding: 1px 8px; border-left: 0; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em;
}
.log li.log__sep[data-kind="opening"] { color: var(--shadow); border-bottom-color: var(--shadow); }
.log li[data-opening="true"] { margin-left: 10px; border-left-color: var(--shadow); }

/* ---- 開始直後の推理カードのバナーと、一覧の印 ---- */
.opening-banner {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  background: #2a1f5a; border: 2px solid var(--shadow); border-radius: var(--radius); padding: 8px 14px;
}
.opening-banner__note { color: var(--muted); font-size: .85rem; }
.pl[data-opening-role] { border-color: var(--shadow); box-shadow: 0 0 0 2px rgba(181, 140, 255, .4); }
.pl[data-opening-role="to"] { border-style: dashed; }

/* ---- 感想戦(終了後に全員の正体とログを公開している旨) ---- */
.review-note { margin: 0; padding: 6px 12px; border: 1px dashed var(--ok); border-radius: var(--radius); color: var(--ok); font-size: .9rem; }

/* ---- 推理カードの履歴 ---- */
.ded__empty { color: var(--muted); margin: 0; }
.ded__views { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ded__view { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 10px; }
.ded__view[data-certain="true"] strong { color: var(--turn); }
.ded__pct { color: var(--muted); font-size: .85rem; margin-left: 2px; }
.ded__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 14em; overflow: auto; }
.ded__entry { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 3px 8px; border-left: 3px solid var(--line); }
.ded__entry[data-role="gave"] { border-left-color: var(--turn); }
.ded__card { color: var(--muted); }

/* ---- 直近の出来事の横のログ: 同じ高さの欄にそろえる(ログは中でスクロール) ---- */
.game__feed .log { max-height: 16em; }
@media (max-width: 860px) { .game__feed .log { max-height: 50vh; } }

/* ---- 自分のターン・回答待ちの知らせ ---- */
.turn-banner {
  text-align: center; font-weight: 800; font-size: 1.1rem; padding: 8px 14px; border-radius: var(--radius);
  background: var(--turn); color: var(--paper-ink); border: 2px solid var(--turn);
}
.turn-banner--answer { background: #231f3d; color: var(--turn); }

/* ---- 勝者の発表 ---- */
.winner-banner { border: 3px solid var(--turn); border-radius: var(--radius); padding: 10px 16px; background: #2a2540; text-align: center; }
.winner-banner h2 { margin: 0 0 4px; font-size: 1.1rem; color: var(--turn); }
.winner-banner__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1.15rem; font-weight: 700; }
.winner-banner__label { color: var(--turn); margin-right: 6px; }
.winner-banner__id { margin-left: 8px; }
.winner-banner__cond { font-size: .85rem; font-weight: 400; color: var(--muted); }

/* ---- ダメージボード: 行の境目をはっきりさせる(行ごとに色を交互にし、線で区切る) ---- */
.dmg { gap: 0; border: 1px solid #4a5a9a; border-radius: 8px; overflow: hidden; }
.dmg__row { border-radius: 0; border-bottom: 1px solid #4a5a9a; }
.dmg__row:last-child { border-bottom: 0; }
.dmg__row:nth-child(even) { background: #151f4a; }
.dmg__row:nth-child(odd) { background: #0c1330; }
.dmg__row[data-has="true"]:nth-child(even) { background: #263477; }
.dmg__row[data-has="true"]:nth-child(odd) { background: #1d2a62; }
.dmg__row[data-damage="14"] { border: 0; border-bottom: 2px solid var(--danger); }
.dmg__n { border-right: 1px solid #4a5a9a; padding-right: 6px; }

/* 最大HPごとのキャラの一覧(数字にカーソル・タップで出す) */
.dmg__n[data-hp-list] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; background: none; border-top: 0; border-left: 0; border-bottom: 0; color: inherit; font: inherit; font-weight: 700; padding: 0 6px 0 0; }
.dmg__row { position: relative; }
.dmg__hp { display: none; position: absolute; left: 30px; top: 100%; z-index: 40; min-width: 160px; max-width: 260px; padding: 6px 10px; margin-top: 2px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--turn); border-radius: 8px; font-size: .8rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .55); }
.dmg__row[data-open="true"] .dmg__hp, .dmg__n:hover + .dmg__hp, .dmg__n:focus + .dmg__hp { display: block; }
.dmg__hp b { color: var(--turn); }

/* ---- 席順: 右隣・左隣の印 ---- */
.pl__side { font-size: .72rem; padding: 0 8px; }

/* 対象を選ぶとき、カードの効果をいつも読める文字で出す(カード画像の中の文字が小さい時のため) */
.pending__effect { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--turn); background: #1a2556; border-radius: 4px; font-size: .92rem; }
.ded__now { color: var(--muted); font-size: .85rem; }
.ded__now[data-certain="true"] strong { color: var(--turn); }