/* -------------------------------------------------- */
/* 基本設定
/* -------------------------------------------------- */

/* 色 */
:root {
  --font-color: rgb(64, 32, 12);
  --bg-color: rgb(255, 240, 220);
  --strong-color: rgb(50, 100, 200);
  --caution-color: rgb(200, 75, 75);
  --sub-color: rgb(200, 100, 50);
}

/* ボディ */
body {
  padding: 12px;
  background: var(--bg-color);

  color: var(--font-color);
}

/* -------------------------------------------------- */
/* 入力系
/* -------------------------------------------------- */

/* インプット・セレクトボックス・テキストエリア */
input,
select,
textarea {
  color: var(--font-color) !important;
  background: #fff;
  border: solid 2px var(--font-color);
  border-radius: 4px;

  padding: 8px;
}

input:disabled {
  border-color: transparent;
}

/* チェックボックス */
input[type="checkbox"] {
  width: 30px;
  height: 30px;

  cursor: pointer;
}

input[type="checkbox"]:disabled {
  cursor: default;
}

/* セレクトボックス */
select:disabled {
  border-color: transparent;
  opacity: 1 !important;
  appearance: none;
}

/* ボタン */
button {
  background: var(--strong-color);
  border: solid 2px var(--strong-color);
  border-radius: 30px;
  padding: 0 16px;

  color: #fff;
  font-weight: bold;

  cursor: pointer;

  transition: all 0.25s;
}

/* ボタン：ホバー */
button:hover {
  background-color: #fff;
  color: var(--strong-color);
}

/* -------------------------------------------------- */
/* 見出し
/* -------------------------------------------------- */

h1 {
  margin: 0;
}

h2 {
  color: var(--bg-color);
  background: var(--font-color);
  border-radius: 4px;
  padding: 16px;
  margin-top: 20px;
  margin-bottom: 12px;
}

h4 {
  margin: 0px;
}

/* -------------------------------------------------- */
/* レイアウト
/* -------------------------------------------------- */

p {
  margin: 0;
}

p+p {
  margin-top: 8px;
}

td {
  padding-left: 12px;
}

ul {
  padding-inline-start: 30px;
  margin: 0;
}

li+li {
  margin-top: 8px;
}

.row_input+.row_input {
  margin-top: 8px;
}

/* 行 */
[class^="row_"] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
}

/* エリア間隔 */
[id^="area"]+[id^="area"] {
  margin-top: 20px;
}

/* -------------------------------------------------- */
/* テーブル */
/* -------------------------------------------------- */

th {
  text-align: right;
}

/* -------------------------------------------------- */
/* 説明 */
/* -------------------------------------------------- */

.note {
  margin-left: 12px;
}

.note+.note {
  margin-top: 12px;
}

.noteTitle {
  color: var(--bg-color);
  background: var(--font-color);
  border-radius: 4px;
  padding: 4px;
}

/* -------------------------------------------------- */
/* 非表示 */
/* -------------------------------------------------- */

.hidden {
  display: none !important;
}

/* -------------------------------------------------- */
/* 対応ルールブック・サプリメント
/* -------------------------------------------------- */

.bookList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.bookList_title {
  font-weight: bold;
  flex-basis: 100%;
}

/* -------------------------------------------------- */
/* 設定
/* -------------------------------------------------- */

/* ラベル */
.row_input>.inputLabel {
  display: flex;
  background-color: var(--sub-color);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 100px;
  height: 100%;
  padding: 4px 16px;

  color: var(--bg-color);
  text-align: center;
  white-space: nowrap;
}

/* インプット */
.row_input>input {
  width: 100%;
  height: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* サイト */
#select_site {
  width: 15em;
}

/* URL */
.input_url {
  width: 20em;
}

.urlSuffix {
  display: none;
}

/* ボタン */
.row_input button {
  min-width: 8em;
  height: 100%;
}

/* リンク */
.row_input a {
  height: 100%;
}

/* エラー */
.text_error {
  color: #c00;
}

/* 「クリア」ボタン */
button#buttonClear {
  background: var(--caution-color);
  border-color: var(--caution-color);
}

/* 「クリア」ボタン：ホバー */
button#buttonClear:hover {
  background-color: #fff;
  color: var(--caution-color);
}

/* -------------------------------------------------- */
/* 読み込み履歴
/* -------------------------------------------------- */

/* コンテナ */
.logList {
  display: flex;
  gap: 8px;
  height: 100%;
}

/* カード */
.card_log {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
}

/* 読み込みボタン */
button.button_logLoad {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* 削除ボタン */
button.button_logDelete {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  margin-left: 4px;
  background: var(--caution-color);
  border-color: var(--caution-color);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* 削除ボタン：ホバー */
button.button_logDelete:hover {
  background-color: #fff;
  color: var(--caution-color);
}

/* -------------------------------------------------- */
/* ステータス
/* -------------------------------------------------- */

/* プリセットボタン */
.buttons_preset {
  margin-bottom: 8px;
}

/* キャラクター一覧に表示されるステータス */
.list_display {
  display: inline-block;
  border: solid 2px var(--font-color);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

/* キャラクター一覧に表示されないステータス */
.list_notDisplay {
  display: inline-block;
  padding: 8px;
  box-sizing: border-box;
}

/* カード */
.card_status {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  grid-gap: 8px;
  width: fit-content;
  padding: 4px;
}

/* ブロック */
.card_status>.valueBlock {
  justify-content: space-between;
  background-color: var(--sub-color);
  margin: 0 !important;
  padding: 8px;
}

/* ブロック：一覧非表示 */
.card_status>.valueBlock:nth-child(n + 9) {
  background-color: #888;
}

/* ドラッグアイコン */
.drag-handle {
  object-fit: contain;
  width: 24px;
  opacity: 0.5;
  user-select: none;
  cursor: grab;
}

/* 削除ボタン */
button.button_statusDelete {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: var(--caution-color);
  border-color: #fff;
  font-size: 1em;
}

/* 削除ボタン：ホバー */
button.button_statusDelete:hover {
  background-color: #fff;
  color: var(--caution-color);
}

/* ソート元を半透明化 */
.sortable-ghost {
  opacity: 0.4;
}

/* 入力欄 */
.valueBlock>input {
  width: 100px;
  height: 25px;

  font-size: 20px;
  text-align: right;
}

/* ステータス名 */
.valueBlock>input.status_name {
  margin-left: 0;
  margin-right: 16px;

  font-size: inherit;
  text-align: left;
}

/* 注釈エリア */
.area_note {
  margin-top: 16px;
}

/* -------------------------------------------------- */
/* テンプレート：カテゴリー
/* -------------------------------------------------- */

/* エリア */
.acordionArea {
  border: solid 4px var(--sub-color);
  border-radius: 4px;
}

/* タイトル */
.categoryTitle {
  display: flex;
  border-bottom: dotted 3px var(--font-color);

  font-size: 20px;
  font-weight: bold;
  align-items: center;

  padding: 4px;
}

.acordionArea h3 {
  color: #fff;
  margin: 0;
}

/* 武器チェックボックス */
.categoryTitle>input[type="checkbox"] {
  margin-right: 8px;
}

/* 武器：備考 */
.rollNote {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  flex-basis: 100%;
  margin: 2px;
  margin-top: 8px;
  padding: 2px 4px;

  font-size: 12px;
}

/* 能力値ボーナス：無効 */
.valueBlock.flat>.value {
  opacity: 0.5;
}

/* コンテンツ */
.acordionArea>.contents {
  display: flex;
  flex-wrap: wrap;

  padding: 8px;
}

/* 閉じる */
.acordionArea.close>.contents {
  display: none;
}

/* タイトル */
.acordionTitleRow {
  display: flex;
  align-items: center;
  background: var(--sub-color);
  padding: 4px 8px;
  z-index: 1;
  position: sticky;
  top: 0;
}

/* チェックボックス*/
.acordionTitleRow>input[type="checkbox"] {
  margin-right: 8px;
}

/* 「開閉」ボタン */
.acordionTitleRow>button {
  width: 70px;
  height: 40px;
  margin-left: auto;
}

/* -------------------------------------------------- */
/* テンプレート：行為判定
/* -------------------------------------------------- */

/* コンテナ */
.area_roll {
  min-width: 50%;
  box-sizing: border-box;

  padding: 8px;
}

/* 『平目』を一括切り替え */
.check_option {
  width: fit-content;
  margin-bottom: 16px;
}

/* -------------------------------------------------- */
/* テンプレート：技能レベル
/* -------------------------------------------------- */

/* 技能レベル：無効 */
.skillDisabled .value {
  opacity: 0.5;
}

/* -------------------------------------------------- */
/* ブロック */
/* -------------------------------------------------- */

/* 基本 */
.valueBlock {
  color: #fff;

  background-color: var(--font-color);
  border-radius: 4px;

  padding: 0 8px;
}

/* 名 */
.valueBlock>.name {
  opacity: 0.95;
}

/* 値 */
.valueBlock>.value {
  font-size: 25px;
  font-weight: bold;
}

.valueBlock>.name+.value {
  margin-left: 12px;
}

/* 修正値 */
.valueBlock>.add:not(:empty) {
  padding-left: 4px;

  font-weight: bold;
}

/* 平目 */
.skillDisabled .valueBlock,
.valueBlock.flat {
  background-color: #888 !important;
}

/* ボーナス修正 */
.valueBlock.add.plus {
  background-color: #080 !important;
}

/* ペナルティ修正 */
.valueBlock.add.minus {
  background-color: #800 !important;
}

/* 器用度 */
.valueBlock.Dex,
.valueBlock.NB1 {
  background-color: rgb(128, 0, 128);
}

/* 敏捷度 */
.valueBlock.Agi,
.valueBlock.NB2 {
  background-color: rgb(64, 64, 128);
}

/* 筋力 */
.valueBlock.Str,
.valueBlock.NB3 {
  background-color: rgb(128, 64, 64);
}

/* 生命力 */
.valueBlock.Vit,
.valueBlock.NB4 {
  background-color: rgb(128, 128, 0);
}

/* 知力 */
.valueBlock.Int,
.valueBlock.NB5 {
  background-color: rgb(0, 128, 128);
}

/* 精神力 */
.valueBlock.Mnd,
.valueBlock.NB6 {
  background-color: rgb(64, 128, 64);
}

/* -------------------------------------------------- */
/* タイトル内チェックボックス */
/* -------------------------------------------------- */

/* サプリメントラベル */
.book {
  background-color: var(--font-color);
  border-radius: 4px;

  color: #fff;
  font-size: 15px;

  padding: 0 4px;
  margin-right: 4px;
}

/* カード置き場 */
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* カード */
.card_skill {
  display: flex;
  align-items: center;

  border: solid 2px var(--font-color);
  border-radius: 4px;

  padding: 4px;
}

.card_skill.skillDisabled {
  background-color: #ccc;
}

.skillDisabled input[type="checkbox"] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* カード */
.card_skill>input[type="checkbox"] {
  margin-right: 8px;
}

/* 技能名 */
.skillName {
  font-weight: bold;
}

/* 能力値ボーナス */
.valueBlock {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: var(--font-color);
  border-radius: 4px;

  padding: 0 8px;

  color: #fff;
  font-size: 15px;
}

.skillDisabled .valueBlock {
  background-color: #888;
}

/* ブロック間隔 */
*+.valueBlock {
  margin-left: 8px;
}

/* 追加効果 */
.extraEffect {
  font-size: 15px;

  margin-left: 4px;
}

/* 条件付き */
.condition {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  color: var(--font-color);
  font-size: 15px;

  background: rgb(255, 255, 128);
  border-radius: 4px;

  margin-left: 8px;
  padding: 8px;
}

.condition.alert {
  background: rgb(192, 192, 255);
}

.skillDisabled .condition.alert {
  background: rgb(255, 192, 192) !important;
}

/* -------------------------------------------------- */
/* チャットパレット
/* -------------------------------------------------- */

#text_chatPallet {
  width: 100%;
  min-height: 300px;
  box-sizing: border-box;
  margin-bottom: 8px;
}

/* -------------------------------------------------- */
/* ナビテキスト
/* -------------------------------------------------- */

.navi_text {
  opacity: 0;
  transition: opacity 1s;
}

.navi_text.show {
  opacity: 1;
}

/* -------------------------------------------------- */
/* ローディング
/* -------------------------------------------------- */

#loading {
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 100vh;
  z-index: 100;

  color: #fff;
  font-size: 30px;
  font-weight: bold;

  background: rgba(0, 0, 0, 0.5);
}