/* 全体レイアウト */
body {
  margin: 0;
  font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #283593;
  color: #fff;
  padding: 10px 16px;
}

.app-header h1 {
  margin: 0;
  font-size: 18px;
}

.version-label {
  font-size: 12px;
  opacity: 0.8;
}

.app-main {
  padding: 10px 16px 60px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.toolbar button {
  padding: 6px 10px;
  font-size: 13px;
}

/* コンテンツエリア */
.content {
  display: flex;
  gap: 12px;
}

/* テーブル側 */
.table-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px;
  overflow: auto;
}

/* テーブル */
#boardTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#boardTable th,
#boardTable td {
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 13px;
}

#boardTable thead {
  background: #e3f2fd;
}

#boardTable th {
  text-align: center;
}

/* 列幅の調整 */
#boardTable th:nth-child(1),
#boardTable td:nth-child(1) {
  width: 72px; /* キル / 吊り */
}

#boardTable th:nth-child(2),
#boardTable td:nth-child(2) {
  width: 110px; /* 名前 */
}

/* 編集可能セル */
.editable {
  cursor: text;
}

.editable:focus {
  outline: 2px solid #64b5f6;
}

/* ステータスセル */
.status-cell {
  text-align: center;
  white-space: nowrap;
}

.status-cell label {
  font-size: 11px;
  margin-right: 2px;
}

/* 選択行 */
tr.selected-row {
  outline: 2px solid #42a5f5;
}

/* 死亡行（キル / 吊り） */
tr.dead-row td {
  background: #dddddd !important;
  color: #666666;
}

/* 役職セルの色（自動） */
.role-cell.innocent {
  background: #4caf50;
  color: #fff;
}

.role-cell.wolf {
  background: #e53935;
  color: #fff;
}

.role-cell.third {
  background: #1e88e5;
  color: #fff;
}

.role-cell.both {
  background: #fb8c00;
  color: #fff;
}

/* ロールパネル */
.role-panel {
  flex: 0 0 260px;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 600px;
  overflow: auto;
}

.role-panel h2 {
  margin: 0 0 6px;
  font-size: 15px;
}

.role-panel-help {
  margin: 0 0 10px;
  font-size: 12px;
  color: #555;
}

.role-section {
  margin-bottom: 10px;
}

.role-title {
  margin: 4px 0;
  font-size: 13px;
}

.role-title.innocent {
  color: #2e7d32;
}
.role-title.wolf {
  color: #b71c1c;
}
.role-title.third {
  color: #1565c0;
}
.role-title.both {
  color: #ef6c00;
}

.role-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.role-button {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #bbb;
  background: #fafafa;
  cursor: pointer;
}

.role-button:hover {
  background: #e3f2fd;
}

/* カラーパレット */
.color-palette {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.color-palette.hidden {
  display: none;
}

.color-palette-inner {
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  min-width: 260px;
}

.color-palette-title {
  font-size: 13px;
  margin-bottom: 6px;
}

.color-palette-grid {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 6px;
  margin-bottom: 8px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #666;
  cursor: pointer;
}

.color-clear-button,
.color-close-button {
  font-size: 12px;
  padding: 4px 8px;
  margin-right: 4px;
}

/* フッター */
.app-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eeeeee;
  border-top: 1px solid #cccccc;
  font-size: 11px;
  padding: 4px 10px;
  color: #555;
}

/* スマホ・狭い画面用 */
@media (max-width: 900px) {
  .content {
    flex-direction: column;
  }
  .role-panel {
    flex: 1 1 auto;
    max-height: none;
  }
}

.author-footer {
  margin-top: 12px;
  padding-top: 6px;
  border-top: 1px solid #ddd;
  font-size: 11px;
  color: #666;
  line-height: 1.6;
}

.author-footer a {
  color: #3366cc;
  text-decoration: none;
}

.author-footer a:hover {
  text-decoration: underline;
}

/* モーダル */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;   /* ← 画面の上寄せ */
  justify-content: center;
  padding-top: 40px;         /* 上に少し余白 */
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal {
  background: #fff;
  border-radius: 8px;
  width: 80%;                /* 少し広め */
  max-width: 1100px;
  height: 80vh;              /* 画面の80%を高さに使う */
  padding: 16px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

#modal-title {
  font-size: 15px;
  font-weight: bold;
}

#modal-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#modal-close:hover {
  transform: scale(1.1);
}

.modal-body {
  border-top: 1px solid #eee;
  margin-top: 6px;
  padding-top: 8px;
  flex: 1;                   /* ヘッダー以外の高さ全部 */
  overflow: auto;            /* 中身だけスクロール */
  font-size: 14px;
  line-height: 1.8;
}

/* もし iframe で表示する場合用（そのまま置いておいてOK） */
.modal-body iframe {
  width: 100%;
  height: 100%;
  border: none;
}


/* モーダル表示中は画面全体のスクロールを止める */
body.modal-open {
  overflow: hidden;
}


.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.toolbar-left button,
.toolbar-right button {
  margin-right: 6px;
}



.terms-box {
  margin-top: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fafafa;
  text-align: center;
}

.terms-text {
  font-size: 14px;
  margin-bottom: 10px;
  color: #444;
}

.terms-button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #4a90e2;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.terms-button:hover {
  background-color: #3b78c4;
}


.header-links {
  margin-left: auto;
  padding-right: 16px;
}

.terms-link {
  color: #fff;
  background: #4a90e2;
  padding: 6px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

.terms-link:hover {
  background: #3b78c4;
}


.disclaimer-note {
  color: #ddd;
  font-size: 12px;
  margin-left: 10px;
}