/* asobiba — 暗めのテーブルゲーム風 */
:root {
  --bg: #0d0f14;
  --felt: #12332b;
  --felt2: #0e2a23;
  --gold: #d8b56b;
  --ink: #e8e4da;
  --dim: #8a8578;
  --accent: #e06a4d;
  --blue: #5b8fd4;
  --panel: #171a21;
  --line: #2a2f3a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* ---- トップページ ---- */
.top { overflow: auto; }
.top-main {
  max-width: 720px; margin: 8vh auto;
  padding: env(safe-area-inset-top) calc(20px + env(safe-area-inset-right))
           env(safe-area-inset-bottom) calc(20px + env(safe-area-inset-left));
}
.top-main h1 { font-size: 2.4em; color: var(--gold); margin-bottom: 0; }
.cards { margin-top: 40px; display: grid; gap: 16px; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; text-decoration: none; color: var(--ink);
  transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--gold); }
.card-title { font-size: 1.4em; color: var(--gold); margin-bottom: 8px; }
.card-desc { color: var(--dim); line-height: 1.6; }
.card-tag { margin-top: 10px; font-size: .8em; color: var(--blue); }

/* ---- ヘッダ ---- */
#top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line);
  position: relative; z-index: 6;
}
#top h1 { font-size: 1.2em; color: var(--gold); margin: 0; }
.home { color: var(--dim); text-decoration: none; font-size: .9em; }
.home:hover { color: var(--gold); }
#status { font-size: .85em; color: var(--accent); font-weight: bold; }
.spacer { flex: 1; }
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.view-toggle button {
  background: none; border: none; color: var(--dim); padding: 6px 12px;
  cursor: pointer; font-size: .85em;
}
.view-toggle button.on { background: var(--gold); color: #222; }
#hostBtn, .btn {
  background: var(--line); color: var(--ink); border: 1px solid #3a4050;
  border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: .85em;
}
#hostBtn:hover, .btn:hover { border-color: var(--gold); }
.btn.primary { background: var(--gold); color: #222; font-weight: bold; }
.btn.danger { background: #4a2020; border-color: #733; }
.btn.small { padding: 3px 9px; font-size: .8em; }
.btn:disabled { opacity: .5; cursor: default; }

#gamesBar {
  padding: 6px 16px; font-size: .8em; background: #11141a; border-bottom: 1px solid var(--line);
  position: relative; z-index: 6;
}
.game-link { color: var(--blue); margin-right: 12px; text-decoration: none; }
.game-link:hover { text-decoration: underline; }
#reversalBar { color: var(--accent); font-size: .85em; }
#reversalBar .btn { margin-left: 6px; }
#controls {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: #11141a; border-bottom: 1px solid var(--line);
  position: relative; z-index: 6;
}
#seek { flex: 1; accent-color: var(--gold); }
#pos { font-size: .8em; color: var(--dim); min-width: 70px; }

/* ---- メイン 2 カラム ---- */
#main { flex: 1; display: flex; min-height: 0; }
#tableWrap { flex: 1.6; position: relative; padding: 14px; min-width: 0; }
#table {
  position: relative; width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt2) 75%, #08110e 100%);
  border-radius: 24px; border: 3px solid #3a2c18;
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.5);
}
#lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
}
#noWolfDisc {
  width: 92px; height: 92px; border-radius: 50%;
  border: 2px dashed var(--dim); color: var(--dim);
  display: flex; align-items: center; justify-content: center;
  font-size: .8em; text-align: center; position: relative;
  background: rgba(0,0,0,.25);
}
#noWolfDisc .vote-count {
  position: absolute; top: -8px; right: -8px;
}

/* ---- 席 ---- */
.seat {
  position: absolute; transform: translate(-50%,-50%);
  width: 108px; text-align: center; z-index: 3;
  transition: filter .3s;
}
.seat-avatar {
  width: 54px; height: 54px; margin: 0 auto;
  border-radius: 50%; background: linear-gradient(145deg, #39415a, #232a3f);
  border: 2px solid #4a5470;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4em; color: var(--gold); font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.seat.active .seat-avatar { border-color: var(--gold); box-shadow: 0 0 16px rgba(216,181,107,.7); }
.seat.exiled { filter: grayscale(1) brightness(.55); }
.seat-name { margin-top: 4px; font-size: .85em; font-weight: bold; }
.seat-model { font-size: .62em; color: var(--dim); word-break: break-all; }
.seat-word { font-size: .8em; color: var(--accent); font-weight: bold; }
.seat-word:empty { display: none; }
.seat-guess { font-size: .66em; color: var(--blue); }
.seat-guess:empty { display: none; }
.seat-step { font-size: .6em; color: #a98fd6; }
.seat-step:empty { display: none; }
.seat-belief {
  display: none; position: relative; width: 54px; height: 4px; margin: 3px auto 0;
  background: rgba(255,255,255,.12); border-radius: 2px;
}
.seat-belief.show { display: block; }
.seat-belief .belief-fill {
  height: 100%; width: 0; border-radius: 2px;
  background: var(--blue); transition: width .4s ease;
}
.seat-belief.high .belief-fill { background: var(--accent); }
.seat-belief.high::after {
  content: '少数派?'; position: absolute; left: 100%; margin-left: 6px; top: -5px;
  font-size: .9em; color: var(--accent); white-space: nowrap; font-weight: bold;
}
.seat-think { display: none; font-size: 1em; color: var(--blue); }
.seat.thinking .seat-think { display: block; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.seat-hand {
  font-size: 1.2em; height: 1.3em; line-height: 1.3em;
  opacity: 0; transform: translateY(8px); transition: all .25s;
}
.seat-hand.up { opacity: 1; transform: translateY(0); }
.seat-hand[data-level="2"] { font-size: 1.5em; }
.seat-hand[data-level="3"] { font-size: 1.9em; }
.vote-count {
  display: none; position: absolute; top: -10px; right: 6px;
  min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--accent); color: #fff; font-weight: bold; font-size: .8em;
  line-height: 22px; padding: 0 5px; z-index: 6;
}
.vote-count.show { display: block; animation: pop .3s; }
@keyframes pop { from { transform: scale(.3); } }

/* ---- 吹き出し ---- */
.bubble {
  position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; z-index: 5;
  background: #f4efe2; color: #26241e;
  border-radius: 12px; padding: 8px 11px;
  font-size: .8em; line-height: 1.5; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  animation: bubbleIn .2s ease;
  word-break: break-word;
}
.bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #f4efe2;
}
.bubble.below { bottom: auto; top: 105%; }
.bubble.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #f4efe2; }
.bubble.below.mutter::after { border-bottom-color: #d8d2c2; }
.bubble.below.question::after { border-bottom-color: #dce9f7; }
.bubble.below.defense::after { border-bottom-color: #f7e3dc; }
@keyframes bubbleIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
.bubble.mutter { background: #d8d2c2; font-size: .72em; padding: 5px 9px; opacity: .9; }
.bubble.mutter::after { border-top-color: #d8d2c2; }
.bubble.question { background: #dce9f7; }
.bubble.question::after { border-top-color: #dce9f7; }
.bubble.fade { transition: opacity 1.2s; opacity: 0; }
.bubble.defense { background: #f7e3dc; }
.bubble.defense::after { border-top-color: #f7e3dc; }

/* ---- スレッド線・投票矢印 ---- */
.thread-line { stroke: var(--gold); stroke-width: 2.5; opacity: .85; }
.thread-line.follow { stroke: var(--accent); }
.counter-line { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 4 4; opacity: .8; }
.vote-line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; opacity: .9; animation: march .8s linear infinite; }
@keyframes march { to { stroke-dashoffset: -10; } }

/* ---- オーバーレイ ---- */
#overlay {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.flash {
  position: absolute; text-align: center;
  font-size: 2em; font-weight: bold; color: var(--gold);
  text-shadow: 0 3px 14px rgba(0,0,0,.8);
  animation: flashIn .35s ease;
  transition: opacity .5s;
}
.flash.out { opacity: 0; }
.flash.mini { font-size: 1.1em; color: var(--ink); }
.flash.result-flash { font-size: 1.7em; }
.flash.reveal { font-size: 1em; }
@keyframes flashIn { from { opacity: 0; transform: scale(.8); } }
.reveal-card {
  background: rgba(13,15,20,.94); border: 2px solid var(--gold);
  border-radius: 16px; padding: 22px 34px;
}
.reveal-card h3 { color: var(--gold); margin-top: 0; }
.reveal-row { padding: 4px 0; font-size: 1.05em; }
.reveal-row.wolf { color: var(--accent); font-weight: bold; }

/* ---- サイド ---- */
#side {
  width: 340px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line);
}
#sideTabs, #sideHandle, #spotlight, #mutterLane, #seatDetail { display: none; }
#sideBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; font-size: .8em; line-height: 1.65; }
.log-line { margin: 2px 0; }
.log-line.mutter { color: var(--dim); font-size: .92em; }
.log-line.hands { color: var(--blue); }
.log-line.thread { color: var(--gold); font-weight: bold; margin-top: 8px; }
.log-line.question { color: #cfe0f5; }
.log-line.answer { padding-left: 12px; }
.log-line.counter { color: var(--blue); padding-left: 12px; font-size: .9em; }
.log-line.wrap { color: #cfe0f5; padding-left: 12px; }
.log-line.vote { color: var(--accent); }
.log-line.tally, .log-line.exile, .log-line.reversal, .log-line.result { color: var(--gold); font-weight: bold; }
.log-line.guard { color: #c98; font-size: .85em; }
.log-line.belief { color: var(--accent); font-weight: bold; }
details.guard-minor { opacity: .55; font-size: .8em; margin: 1px 0; }
details.guard-minor summary { cursor: pointer; list-style: none; }
details.guard-minor summary::before { content: '▸ '; }
details.guard-minor[open] summary::before { content: '▾ '; }
.guard-minor-detail { padding-left: 14px; color: var(--dim); word-break: break-all; }
.wolf-label.disabled { opacity: .4; }
/* T6: 情報量バッジ・下準備カード (神視点) */
.info-badge { font-size: .68em; padding: 0 4px; border-radius: 4px; margin-left: 5px; vertical-align: top; }
.info-badge.lv1 { background: #2a4a2a; color: #9d9; }
.info-badge.lv2 { background: #4a4a28; color: #dd9; }
.info-badge.lv3 { background: #4a2a2a; color: #f99; }
.prep-card { border-left: 2px solid var(--line); padding: 2px 0 2px 8px; margin: 4px 0; font-size: .85em; }
.prep-cands { color: #9db8e0; }
.prep-angles, .prep-plan { color: var(--dim); }
.info-table table { border-collapse: collapse; font-size: .85em; }
.info-table th, .info-table td { border: 1px solid var(--line); padding: 1px 8px; }
.log-line.phase { color: var(--gold); font-weight: bold; margin-top: 6px; }
.log-line.final { color: #d0c8ff; }
.log-line.defense { color: #f0c8b8; }
details.thread-log { border-left: 2px solid var(--line); margin: 4px 0 4px 6px; padding-left: 8px; }
details.thread-log summary { color: var(--dim); font-size: .85em; cursor: pointer; }
#stats { border-top: 1px solid var(--line); padding: 8px 12px; font-size: .78em; }
#coverage { border-top: 1px solid var(--line); padding: 8px 12px; font-size: .75em; }
#coverage h4, #stats h4, .heatmap h4, .inners h4 { margin: 4px 0 6px; color: var(--gold); font-size: 1em; }
.cov-row { margin-bottom: 5px; }
.cov-q { color: var(--text); }
.cov-sub { display: flex; gap: 10px; flex-wrap: wrap; padding-left: 8px; }
.cov-ok { color: var(--blue); }
.cov-ng { color: var(--accent); }
.cov-dim { color: var(--dim); }
.stats-table, .heatmap table { border-collapse: collapse; width: 100%; }
.stats-table th, .stats-table td, .heatmap th, .heatmap td {
  border: 1px solid var(--line); padding: 3px 6px; text-align: center; font-size: .95em;
}
.stats-table th, .heatmap th { color: var(--dim); font-weight: normal; }
.heatmap { overflow-x: auto; }
.heatmap td { color: #fff; }
.heatmap td.empty { color: #444; }
#godPanel { border-bottom: 1px solid var(--line); padding: 8px 12px; font-size: .78em; max-height: 45%; overflow-y: auto; }
.inner-row { padding: 2px 0; }
.inner-row b { color: var(--blue); margin-right: 6px; }
.inner-row span { color: var(--dim); }

/* PC 下段タブ (T14): #log は常時 flex:1、その下はタブ切替・高さ上限つき */
#lowerHandle {
  height: 8px; flex: none; display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
}
#lowerHandle::before { content: ''; width: 44px; height: 3px; border-radius: 2px; background: var(--line); }
#lowerTabs { flex: none; display: flex; border-top: 1px solid var(--line); }
#lowerTabs button {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); font-size: .78em; padding: 4px 0; cursor: pointer;
}
#lowerTabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
body:not(.god) #lowerTabs button[data-ltab="inners"],
body:not(.god) #lowerTabs button[data-ltab="heatmap"] { display: none; }
#sideBody > #stats, #sideBody > #coverage, #sideBody > #godPanel { display: none; }
#side[data-ltab="stats"] #stats,
#side[data-ltab="coverage"] #coverage,
#side[data-ltab="inners"] #godPanel,
#side[data-ltab="heatmap"] #godPanel {
  display: block; flex: none; height: var(--lower-h, auto);
  max-height: var(--lower-max, max(140px, 40%)); overflow-y: auto;
}
#side[data-ltab="inners"] #godPanel .heatmap { display: none; }
#side[data-ltab="heatmap"] #godPanel .inners { display: none; }

/* ---- ホストパネル ---- */
#hostPanel {
  position: fixed; right: -360px; top: 0; width: 360px; height: 100vh;
  background: #151923; border-left: 2px solid var(--gold);
  padding: 16px; overflow-y: auto; z-index: 100;
  transition: right .25s ease; font-size: .85em;
}
#hostPanel.open { right: 0; box-shadow: -12px 0 40px rgba(0,0,0,.6); }
#hostPanel .host-head { display: flex; align-items: center; justify-content: space-between; }
#hostPanel h3 { color: var(--gold); margin-top: 0; }
.host-close {
  background: none; border: 1px solid var(--dim); color: var(--dim);
  border-radius: 6px; width: 30px; height: 30px; cursor: pointer; font-size: 1em;
}
.host-close:hover { color: var(--ink); border-color: var(--ink); }
.host-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.host-box h4 { margin: 0 0 8px; color: var(--gold); font-size: .95em; }
.host-box input[type=text], .host-box input:not([type]), .host-box input[type=number], .host-box select {
  width: 100%; background: #0e1118; border: 1px solid var(--line); color: var(--ink);
  border-radius: 6px; padding: 6px 8px; margin: 3px 0; font-size: 1em;
}
.host-box .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.host-box .row label { min-width: 90px; color: var(--dim); }
.host-box .row.check { gap: 6px; color: var(--dim); cursor: pointer; }
.seat-row { display: flex; gap: 4px; align-items: center; margin: 3px 0; }
.seat-row input { flex: 1; min-width: 0; }
.seat-row .wolf-label { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
/* PC: 1 席 2 行 (表示名 | モデル id / ウルフ | 推論 | 削除)。.host-box select の width:100% で入力欄が潰れないように */
@media (min-width: 861px) {
  .seat-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    gap: 2px 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  }
  .seat-row input[list] { grid-column: 2 / 4; }
}
.host-box .btn { margin: 4px 4px 0 0; }
.suggest-out .btn { margin: 3px 3px 0 0; }
.dim { color: var(--dim); }

/* ---- スマホ・小型画面 ---- */
/* 縦スマホ(≤860px) または 高さの足りない横向き。席はアイコン+名前のみ、
   発言は卓中央のスポットライト、つぶやきは下端のチップ */
@media (max-width: 860px), (orientation: landscape) and (max-height: 560px) and (max-width: 1024px) {
  body { height: 100dvh; overflow: hidden; }

  /* ヘッダ: 折り返し許容 + safe-area */
  #top {
    gap: 6px 10px; flex-wrap: wrap;
    padding: 8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
  }
  #top h1 { font-size: 1em; }
  #status { font-size: .78em; }
  .view-toggle button { padding: 5px 9px; font-size: .78em; min-height: 34px; }
  #hostBtn, .btn { min-height: 34px; }
  #reversalBar { flex-basis: 100%; }
  #gamesBar {
    overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    padding: 6px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));
  }
  #gamesBar::-webkit-scrollbar { display: none; }
  .game-link { display: inline-block; padding: 4px 0; margin-right: 14px; }

  /* 盤面: 席はアイコン+名前のみ (詳細は席タップ) */
  #tableWrap { padding: 8px; }
  .seat { width: 64px; }
  .seat-avatar { width: 34px; height: 34px; font-size: 1em; }
  .seat-name { font-size: .72em; margin-top: 2px; }
  .seat-model, .seat-word, .seat-guess, .seat-step, .seat-belief { display: none !important; }
  /* ✋ はアイコン右上の小バッジ (席を覆わない) */
  .seat-hand {
    position: absolute; top: -10px; right: -4px; z-index: 5;
    height: auto; line-height: 1; font-size: 1em;
    transform: translateY(4px) scale(.8); opacity: 0;
  }
  .seat-hand.up { transform: none; opacity: 1; }
  .seat-hand[data-level="2"] { font-size: 1.2em; }
  .seat-hand[data-level="3"] { font-size: 1.45em; }
  #noWolfDisc { width: 58px; height: 58px; font-size: .6em; }
  /* 円盤は楕円中心 (どの人数でも席と衝突しない)。発言中はスポットライトの背後に隠れる */
  #center { top: var(--spot-cy, 50%); }
  .flash { font-size: 1.4em; }
  .flash.mini { font-size: 1em; }
  .flash.result-flash { font-size: 1.15em; }
  .flash.reveal { font-size: .82em; }
  .reveal-card { padding: 14px 16px; max-width: 88vw; max-height: 70dvh; overflow-y: auto; }

  /* スポットライト: 現在の発言を楕円中心に 1 件だけ表示 */
  #spotlight {
    display: none; position: absolute; left: 50%; top: var(--spot-cy, 50%);
    transform: translate(-50%,-50%);
    width: min(160px, 52vw); z-index: 4;
    background: #f4efe2; color: #26241e;
    border-radius: 12px; padding: 8px 10px;
    font-size: 15px; line-height: 1.55; text-align: left;
    box-shadow: 0 6px 18px rgba(0,0,0,.55); word-break: break-word;
  }
  #spotlight.show { display: block; animation: bubbleIn .2s ease; }
  #spotlight.question, #spotlight.wrap { background: #dce9f7; }
  #spotlight.defense { background: #f7e3dc; }
  .spot-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
  .spot-av {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    background: linear-gradient(145deg, #39415a, #232a3f); border: 1px solid #4a5470;
    color: var(--gold); font-size: .75em; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
  }
  .spot-name { font-size: .78em; font-weight: bold; color: #5a4a1e; }
  #spotlight.clamped .spot-text {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; overflow: hidden;
  }
  #spotlight.clamped { cursor: pointer; }
  #spotlight.clamped:not(.open) .spot-text::after { content: ' …'; color: #888; }
  #spotlight.open { max-height: 55%; overflow-y: auto; }

  /* つぶやき: 卓の下端を小さなチップが流れる (最大2件) */
  #mutterLane {
    position: absolute; left: 8px; right: 8px; bottom: 5px; z-index: 5;
    display: flex; flex-direction: column; gap: 3px; pointer-events: none;
  }
  .mutter-chip {
    background: #d8d2c2; color: #26241e; border-radius: 8px;
    padding: 2px 9px; font-size: 12.5px; opacity: .94;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mutter-chip b { color: #6b5320; margin-right: 5px; }
  .mutter-chip.fade { transition: opacity 1.2s; opacity: 0; }

  /* 席タップで詳細カード (卓中央 = 席の空いている場所) */
  #seatDetail {
    display: none; position: absolute; left: 50%; top: var(--spot-cy, 50%);
    transform: translate(-50%,-50%); z-index: 11; /* 終了フラッシュ(10)より上 */
    width: min(160px, 52vw); max-height: 60%; overflow-y: auto;
    background: rgba(13,15,20,.96); border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 10px; font-size: 12.5px; text-align: left;
  }
  #seatDetail.show { display: block; }
  .sd-row { display: flex; gap: 8px; padding: 1px 0; }
  .sd-row b { min-width: 46px; color: var(--dim); font-weight: normal; flex: none; }
  .sd-row span { word-break: break-all; }
  .sd-row:first-child span { font-weight: bold; color: var(--gold); }

  /* 卓が横長 (低い) とき: 席は下端 1 列、発言/詳細カードは上段バナー、チップは横並び */
  #table[data-layout="row"] #spotlight {
    top: 4px; transform: translateX(-50%);
    width: min(300px, 62%); max-height: 40%; overflow-y: auto;
    font-size: 15px;
  }
  #table[data-layout="row"] #spotlight.clamped .spot-text { -webkit-line-clamp: 3; }
  #table[data-layout="row"] #seatDetail {
    top: 4px; transform: translateX(-50%);
    width: min(240px, 70%); max-height: 40%;
  }
  #table[data-layout="row"] #center { top: 10%; left: 88%; }
  #table[data-layout="row"] #noWolfDisc { width: 50px; height: 50px; font-size: .55em; }
  #table[data-layout="row"] #mutterLane { flex-direction: row; justify-content: center; bottom: 3px; }
  #table[data-layout="row"] .mutter-chip { max-width: 48%; }

  /* メイン: 卓 + 下部タブパネル (既定は低め、ハンドルで拡大可) */
  #main { flex-direction: column; order: 1; }
  #tableWrap { flex: 1 1 auto; min-height: 0; }
  #side {
    width: 100%; flex: none; height: 30%; min-height: 140px; max-height: 55%;
    border-left: none; border-top: 1px solid var(--line);
    position: relative; z-index: 6;
  }
  #sideHandle {
    height: 16px; flex: none; display: flex; align-items: center; justify-content: center;
    cursor: grab; touch-action: none;
  }
  #sideHandle::before {
    content: ''; width: 44px; height: 4px; border-radius: 2px; background: var(--line);
  }
  #sideTabs { display: flex; border-bottom: 1px solid var(--line); }
  #sideTabs button {
    flex: 1; min-height: 40px; background: none; border: none;
    border-bottom: 2px solid transparent; color: var(--dim);
    font-size: .82em; cursor: pointer;
  }
  #sideTabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
  body:not(.god) #sideTabs button[data-tab="inners"],
  body:not(.god) #sideTabs button[data-tab="heatmap"] { display: none; }
  #sideBody > * {
    display: none !important; height: 100%; max-height: none;
    overflow-y: auto; border: none; margin: 0;
  }
  #side[data-tab="log"] #log,
  #side[data-tab="stats"] #stats,
  #side[data-tab="coverage"] #coverage,
  #side[data-tab="inners"] #godPanel,
  #side[data-tab="heatmap"] #godPanel { display: block !important; }
  #side[data-tab="inners"] .heatmap { display: none; }
  #side[data-tab="heatmap"] .inners { display: none; }
  /* PC 下段タブはモバイルでは使わない (従来の下部タブ #sideTabs を使用) */
  #lowerTabs, #lowerHandle { display: none !important; }

  /* リプレイ操作バー: 下部固定・44px タップ領域 */
  #controls {
    order: 2; flex-wrap: wrap; gap: 8px; position: relative; z-index: 6;
    background: #11141a;
    padding: 8px calc(8px + env(safe-area-inset-right))
             calc(10px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }
  #controls .btn { min-height: 44px; min-width: 44px; font-size: .9em; }
  #speeds { display: flex; gap: 6px; flex-wrap: wrap; }
  #seek { order: 5; flex: 1 1 60%; height: 44px; }
  #pos { order: 6; align-self: center; }

  /* ホストパネル: 全画面シート */
  #hostPanel {
    left: 0; right: 0; top: 0; width: auto; height: 100dvh;
    border-left: none; transform: none; transition: none; display: none;
    padding: 14px calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left));
    font-size: .95em;
  }
  #hostPanel.open { display: block; box-shadow: none; }
  #hostPanel .host-box input, #hostPanel .host-box select { font-size: 16px; padding: 9px 10px; }
  #hostPanel .btn { min-height: 44px; }
  .host-box { margin-bottom: 14px; }
  /* 席エディタ: 1 席 1 カード */
  .seat-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px;
    align-items: center; border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 10px; margin: 8px 0;
  }
  .seat-row > input { grid-column: 1 / -1; margin: 0; } /* 表示名・モデル id は 1 行ずつ */
  .seat-row .wolf-label { min-height: 40px; font-size: 1.1em; }
  .seat-row .wolf-label input { width: 22px; height: 22px; }
  .seat-row .reasoning-sel { min-height: 40px; }
  /* 主要操作は下部固定 */
  #hostPanel .host-box:last-of-type {
    position: sticky; bottom: 0; z-index: 2; background: #151923;
    padding-top: 10px; padding-bottom: max(12px, env(safe-area-inset-bottom));
    margin-bottom: 0; border-top: 2px solid var(--line);
  }
}

/* 横向きスマホ: 高さが足りないのでサイドを右に (タブUIは維持)。
   卓は「席を下端1列・発言カードを上段」のレイアウト */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1024px) {
  #main { flex-direction: row; }
  #tableWrap { flex: 1 1 auto; }
  #side {
    width: min(300px, 46%); height: auto; min-height: 0; max-height: none;
    border-top: none; border-left: 1px solid var(--line);
  }
  #sideHandle { display: none; }
  .seat { width: 54px; }
  .seat-avatar { width: 30px; height: 30px; font-size: .9em; }
  .seat-name { font-size: .66em; }
  /* 行レイアウト時は高さを削ってでも重なりを防ぐ */
  #table[data-layout="row"] #spotlight { font-size: 13.5px; max-height: 38%; }
  #table[data-layout="row"] #spotlight.clamped .spot-text { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}