@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&text=0123456879ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzž%26&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kosugi|Kosugi+Maru|Sawarabi+Gothic|Noto+Sans+JP:400,700|Noto+Serif+JP:400,700&display=swap');
/* // カスタムプロパティ
---------------------------------------------------------------------------------------------------- */
:root {
  /* 基本フォント色 */
  --base-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--base-font-color-lightness)
  );
  --base-font-color-hue : 0; /* 基本フォント色の色相 */
  --base-font-color-saturation: 0%; /* 基本フォント色の彩度 */
  --base-font-color-lightness: 100%; /* 基本フォント色の明るさ */
  
  /* ログフォント色（色相と彩度は基本と共通） */
  --logs-font-color: hsl(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--logs-font-color-lightness)
  ); 
  --logs-font-color-lightness: 100%; /* ログフォント色の明るさ */
  
  /* ログフォント体（色相と彩度は基本と共通） */
  --logs-font-family-jp: "BIZ UDGothic";  /* 通常（ゴシック） */
  --logs-font-family-min: "Noto Serif JP"; /* 明朝体 */
  
  /* テキスト縁取り */
  --box-text-shadow-color: #000;
  --box-text-shadow:
    var(--box-text-shadow-color)  .1rem .1rem .1rem, var(--box-text-shadow-color) -.1rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem .1rem .1rem, var(--box-text-shadow-color)  .1rem -.1rem .1rem,
    var(--box-text-shadow-color)   0rem .1rem .1rem, var(--box-text-shadow-color)   0rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem  0rem .1rem, var(--box-text-shadow-color)  .1rem   0rem .1rem,
    var(--box-text-shadow-color)  .1rem .1rem .1rem, var(--box-text-shadow-color) -.1rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem .1rem .1rem, var(--box-text-shadow-color)  .1rem -.1rem .1rem,
    var(--box-text-shadow-color)   0rem .1rem .1rem, var(--box-text-shadow-color)   0rem -.1rem .1rem,
    var(--box-text-shadow-color) -.1rem  0rem .1rem, var(--box-text-shadow-color)  .1rem   0rem .1rem ;
  
  /* ボーダー */
  --border-color      : rgba(255,255,255,0.3); /* ボーダー色 */
  --border-color-pale : rgba(255,255,255,0.2); /* ボーダー色（薄い） */
  --border-color-faint: rgba(255,255,255,0.1); /* ボーダー色（とても薄い） */
  --border-color-deep : rgba(255,255,255,0.5); /* ボーダー色（濃い） */
  --border-color-input: rgba(200,220,240,0.3); /* ボーダー色（フォーム類） */
  
  /* ボックス（ウィンドウ）背景 */
  --box-bg-opacity: 0.7;
  --box-bg-color: rgba(0,0,0, var(--box-bg-opacity));
  
  /* 背景 */
  --bg-opacity: 1;
}

/* // ベース設定
---------------------------------------------------------------------------------------------------- */
/* デフォルト背景 */
body {
  background-image: linear-gradient(160deg, #808899, #202233);
  background-size: cover;
  background-repeat: no-repeat;
}
.bg-image {
  filter: brightness(var(--bg-opacity));
}
.box {
  background-color: var(--box-bg-color);
  box-shadow: inset 0 0 1em rgba(255,255,255,0.15);
  text-shadow: var(--box-text-shadow);
}
/* リンク */
a { text-decoration: none; }
.link,
a[href]:link    { color: #00ffff; background: linear-gradient(to top, rgba(50,180,255,0.5) 0%, rgba(50,180,255,0.5) 20%, transparent 20%); }
a[href]:visited { color: #77ccff; }
.link:hover,
a[href]:hover   { color: #ffffff; }
.link-yt::before {
  content: "\f167" !important;
  display: inline-block;
  font-family: "Font Awesome 5 Brands" !important;
  font-weight: normal !important;
  color: #f00 !important;
}
.link-yt:hover::before {
  color: #fff !important;
}

/* 他 */
input, textarea, select, button, .button, .dice-button {
  background: rgba(30,35,50,0.8);
  color: #fff;
}
.chat-palette {
  background: rgba(20,25,30,0.8);
}
input:focus,textarea:focus,select:focus {
  background: rgba(55,60,65,0.8);
}
button, .button {
  background: linear-gradient(145deg, rgba(50,60,80,0.8), rgba(30,40,60,0.8));
  color: #dde;
}
summary:hover,
label:hover {
  color: #ffaa00;
}
label input+b {
  font-style: normal;
  color: #8899aa;
}
label input:checked+b {
  color: inherit;
}
label:hover input+b {
  color: inherit !important;
}
.chat-palette b {
  color: #ee9999;
}
.chat-palette i {
  color: #99ccee;
  font-style: normal;
}
.chat-palette em {
  color: #cc99ee;
  font-style: normal;
}

/* // カラー設定：チャット
---------------------------------------------------------------------------------------------------- */
/* 秘話 */
.secret {
  background-color: rgba(255,0,50,0.1);
}
.secret.openlater {
  background-color: rgba(0,170,190,0.1);
}
/* ベース */
#form-name {
  text-shadow: inherit;
}
#form-name :checked {
  text-shadow: none;
}
@media (max-width: 600px) {
  .box {
    background-color: rgba(0,0,0,0.7);
  }
}
.box #main-name1 {
  text-shadow: inherit;
}
.float-box {
  background: rgba(10,10,30,0.9);
  border: .1rem solid #777;
  box-shadow: 0 0 .5em .1em #000;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
}

/* トピック */
#topic-value {
  color: #afa;
}
/* ラウンド */
#round-value {
}
/* ステータス */
.gauge i { background: #7ad; }
.gauge i::before { background: linear-gradient(to left, #ff5, transparent); }
dd[data-stt*="HP"]   .gauge[data-signal="safe"]      i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="safe"]      i,
dd[data-stt*="体力"] .gauge[data-signal="safe"]      i,
dd[data-stt*="耐久"] .gauge[data-signal="safe"]      i { background: #095; }
dd[data-stt*="HP"]   .gauge[data-signal="caution"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="caution"]   i,
dd[data-stt*="体力"] .gauge[data-signal="caution"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="caution"]   i { background: #890; }
dd[data-stt*="HP"]   .gauge[data-signal="warning"]   i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="warning"]   i,
dd[data-stt*="体力"] .gauge[data-signal="warning"]   i,
dd[data-stt*="耐久"] .gauge[data-signal="warning"]   i { background: #e80; }
dd[data-stt*="HP"]   .gauge[data-signal="danger"]    i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="danger"]    i,
dd[data-stt*="体力"] .gauge[data-signal="danger"]    i,
dd[data-stt*="耐久"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="HP"]   .gauge[data-signal="knockdown"] i,
dd[data-stt*="ＨＰ"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="体力"] .gauge[data-signal="knockdown"] i,
dd[data-stt*="耐久"] .gauge[data-signal="knockdown"] i { background: #900; }

dd[data-stt*="MP"]   .gauge i,
dd[data-stt*="ＭＰ"] .gauge i { background: #42e; }

dd[data-stt*="侵蝕"] .gauge[data-signal="safe"]      i { background: #2ae; }
dd[data-stt*="侵蝕"] .gauge[data-signal="notice"]    i { background: #38e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="attention"] i { background: #46e; }
dd[data-stt*="侵蝕"] .gauge[data-signal="caution"]   i { background: #83c; }
dd[data-stt*="侵蝕"] .gauge[data-signal="warning"]   i { background: #b18; }
dd[data-stt*="侵蝕"] .gauge[data-signal="danger"]    i { background: #e00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="critical"]  i { background: #a00; }
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"]     i { background: #605; }
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"]     i { background: #005; }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"]   i { background: #000; box-shadow: inset 0 0 .3rem #808; }

dd[data-stt*="侵蝕"] .gauge[data-signal="critical"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="fatal"] i::before,
dd[data-stt*="侵蝕"] .gauge[data-signal="grave"] i::before { background: linear-gradient(to left, #f00, transparent); }
dd[data-stt*="侵蝕"] .gauge[data-signal="monster"] i::before { background: none; }

/* チャットログ */
.chat {
  background-image: linear-gradient(to right, rgba(0,0,0, 0.4), transparent);
}
@media (max-width: 600px) {
  .chat {
    background-color: rgba(0,0,0, 0.3);
  }
}
.chat h2 {
  background: linear-gradient(to right, rgba(80,85,90, 0.8), transparent);
}
.logs-font {
  color: var(--logs-font-color);
}
.logs dl {
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-faint);
}
.logs dl dt,
.logs dl dd {
}
.logs dl dd.comm mark {
  color: #ff9900;
  font-weight: bold;
  background: transparent;
}
.logs dl dd.info {
  font-size: 85%;
  color: #acd;
  background: rgba(0,0,0,0.2);
}
.logs dl dd.info i {
  font-size: 90%;
  font-style: normal;
}
.logs dl dd.info em {
  -webkit-text-emphasis: none;
          text-emphasis: none;
}
.logs dl:hover {
  background-image: linear-gradient(rgba(0,0,0, 0.3), rgba(0,0,0, 0.3));
}
.logs dl dd:hover {
  box-shadow: 0 0 0 .1rem rgba(100,200,255,0.2) inset !important;
}
/* チャットログ：リンク */
.logs a[href]::before {
  content: "\f35d";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .2rem;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  font-size: .8em;
  line-height: 1;
  color: #fff;
}
/* チャットログ：システムメッセージ */
.logs dl.system {
  color: #fff;
  background-color: rgba(50,60,80,0.6);
}
.logs dl.system dd.comm {
  font-weight: bold;
}
.logs dl.system dd.comm::before {
  content: '';
  display: inline-block;
  width: 1.6em;
  margin-left: -.5em;
  font-size: 1em;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  text-align: center;
  opacity: 1 !important;
  border-radius: 50%;
}
.logs dl.system.enter  dd.comm::before { color: #fd9; content: "\f52b"; }
.logs dl.system.exit   dd.comm::before { color: #89a; content: "\f52a"; }
.logs dl.system.topic  dd.comm::before { color: #7f7; content: "\f044"; }
.logs dl.system.memo   dd.comm::before { color: #7f7; content: "\f249"; }
.logs dl.system.ready  dd.comm::before { color: #f77; content: "\f0ae"; }
.logs dl.system.round  dd.comm::before { color: #f90; content: "\f562"; }
.logs dl.system.change dd.comm::before { color: #f55; content: "\f085"; }
.logs dl.system.bgm    dd.comm::before { color: #f8c; content: "\f001"; }
.logs dl.system.bg     dd.comm::before { color: #c8f; content: "\f03e"; }

.logs dl.system  dd.info { color: #cdf; }
.logs dl.system.round  dd.info { color: #f90; font-weight: bold; }
.logs dl.system.topic  dd.info { color: #afa; font-weight: bold; }
.logs dl.system.memo   dd.info { color: #afa; }
.logs dl.system.change dd.info { color: #f99; }

.logs dl.system.bgm dd.info small { color: #b9a; }
.logs dl.system.bgm dd.info small::before {
  content: '\f028';
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  margin: auto .2em auto .5em;
}
.logs dl.bgm dd.info a.link-yt {
  background: none;
}
.logs dl.bgm dd.info a.link-yt::before {
  margin-left: .5em;
  transform: scale(1.5);
  text-shadow: none;
}
/* チャットログ：ユニット操作 */
.logs dl dd.info.unit::before {
  color: #07d;
}
.logs dl dd.info.unit {
  color: #acf;
}
.logs dl dd.info.unit i {
  opacity: 0.70;
}
/* チャットログ：チョイス */
.logs dl dd.info.choice::before {
  color: #fe0;
}
.logs dl dd.info.choice {
  color: #ec0;
}
.logs dl dd.info.choice i,
.logs dl dd.info.choice b,
.logs dl dd.info.choice s {
  display: inline-block;
}
.logs dl dd.info.choice s {
  color: #888;
  text-decoration: none;
}
/* チャットログ：ダイス */
.logs dl dd.info.dice::before {
  color: #f33;
}
.logs dl dd.info.dice {
  color: #e55;
  letter-spacing: 0.1rem;
}
.logs dl dd.info.dice i {
  opacity: 0.85;
}
.logs dl dd.info.dice b,
.logs dl dd.info.dice strong {
  color: #f33;
}
.logs dl dd.info.dice em {
  color: #e90;
  font-weight: bold;
}
.logs dl dd.info.dice em.fail,
.logs dl dd.info.dice strong.fail {
  color: #888;
  font-weight: bold;
}
.logs dl dd.info.dice .division {
  filter: grayscale(50%);
}

/* チャットログ：威力表 */
.logs dl dd.info.dice[data-game="sw"] { color: #ea6; }
.logs dl dd.info.dice[data-game="sw"] em { color: #ee8f61; }
.logs dl dd.info.dice[data-game="sw"] em em { color: #ee875c; }
.logs dl dd.info.dice[data-game="sw"] em em em { color: #ee7d57; }
.logs dl dd.info.dice[data-game="sw"] em em em em { color: #ee7452; }
.logs dl dd.info.dice[data-game="sw"] em em em em em { color: #ee6a4d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em { color: #ee6047; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em { color: #ee5542; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em { color: #ee4a3d; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em { color: #ee3f38; }
.logs dl dd.info.dice[data-game="sw"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="sw"] em.fail { color: #888; }

/* チャットログ：ダブルクロス */
.logs dl dd.info.dice[data-game="dx"] { color: #9999ff; }
.logs dl dd.info.dice[data-game="dx"] em { color: #a18feb; }
.logs dl dd.info.dice[data-game="dx"] em em { color: #aa85d7; }
.logs dl dd.info.dice[data-game="dx"] em em em { color: #b27bc2; }
.logs dl dd.info.dice[data-game="dx"] em em em em { color: #bb71ae; }
.logs dl dd.info.dice[data-game="dx"] em em em em em { color: #c36699; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em { color: #cc5c85; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em { color: #d45271; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em { color: #dd485c; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em { color: #e53e48; }
.logs dl dd.info.dice[data-game="dx"] em em em em em em em em em em { color: #ee3333; }
.logs dl dd.info.dice[data-game="dx"] em.fail { color: #888; }

/* チャットログ：タイムスタンプ */
.logs dl dd:after {
  color: #5af;
  letter-spacing: 0rem;
  text-shadow: none;
}
/* チャットログ：水平線 */
.logs dl dd hr {
  margin: .75em 0;
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  box-shadow: var(--box-text-shadow);
}

/* // カラー設定：サイドバー
---------------------------------------------------------------------------------------------------- */
/* ステータス欄 */
#status #status-body > dl dl dt {
  color: #bce;
}
.sheet-body .status-remocon-sub ul:nth-child(odd){
  background: rgba(127,127,127,0.45);
}
.sheet-body .status-remocon-sub ul:nth-child(even){
  background: rgba(127,127,127,0.1);
}

/* // デフォルト設定：ログ
---------------------------------------------------------------------------------------------------- */
/* ログ */
.logs:empty::before {
  content: 'ログがありません';
}
#topic-value:empty::before {
  content: 'トピック';
  opacity: 0.3;
}
/* ステータス */
#status-body:empty::before {
  content: 'ステータス';
  opacity: 0.3;
}
/* 共有メモ */
#memo-list:empty::before {
  content: '共有メモ';
  opacity: 0.3;
}
/* // Font awesome
---------------------------------------------------------------------------------------------------- */
.s-icon {
  display: inline-block;
  position: relative;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  text-shadow: none;
}
.s-icon i {
  display: inline-block;
  color: transparent;
  font-style: normal;
  font-size: 10%;
}
.s-icon::after,
.s-icon::before {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-size: .9em;
  text-shadow: #000 0 0 2px, #000 0 0 2px, #000 0 0 2px;
}
.s-icon.passive::before{ content: "\f111"; font-weight: normal; }
.s-icon.setup::before  { content: "△";    font-weight: bold; }
.s-icon.major::before  { content: "\f04b"; font-weight: bold; }
.s-icon.minor::before  { content: "\f04e"; font-weight: bold; }
.s-icon.active::before { content: "\f075"; font-weight: normal; transform: scale(-1, 1); }
.s-icon.active::after  { content: "\f00c"; font-weight: bold; transform: scale(0.6,0.6);  }

/* // スクロールバー
---------------------------------------------------------------------------------------------------- */
.sp-container ::-webkit-scrollbar,
.box::-webkit-scrollbar,
.box ::-webkit-scrollbar,
.float-box::-webkit-scrollbar,
.float-box ::-webkit-scrollbar {
  width: .8rem;
  height: .8rem;
}
.sp-container ::-webkit-scrollbar-track,
.box::-webkit-scrollbar-track,
.box ::-webkit-scrollbar-track,
.float-box::-webkit-scrollbar-track,
.float-box ::-webkit-scrollbar-track {
  border-radius: .8rem;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
}
.sp-container ::-webkit-scrollbar-thumb,
.box::-webkit-scrollbar-thumb,
.box ::-webkit-scrollbar-thumb,
.float-box::-webkit-scrollbar-thumb,
.float-box ::-webkit-scrollbar-thumb {
  background-color: rgba(150, 150, 150, .5);
  border-radius: 10px;
}
.sp-container,
.box,
.box *,
.float-box,
.float-box * {
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 150, 150, .5) rgba(0, 0, 0, .5);
}