@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|Zen+Old+Mincho:900|&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300..600,0..1,-25');

/* // カスタムプロパティ
---------------------------------------------------------------------------------------------------- */
: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) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem,
    var(--box-text-shadow-color) 0 0 .2rem, var(--box-text-shadow-color) 0 0 .3rem ;
  
  /* ボーダー */
  --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));
  --float-bg-color: rgba(10,10,30,0.9);
  
  --chara-name-bg: #0005;

  /* 背景 */
  --bg-opacity: 1;

  /* ボタン・インプットhover */
  --hover-inset-color: #7af;
}
.no-text-shadow {
  --chara-name-bg: #0007;
}
@media (max-width: 600px) {
  :root {
    --box-bg-color: rgba(0,0,0, 0.8);
  }
  #base {
    --box-bg-color: rgba(0,0,0, 0.6);
  }
}

/* // ベース設定
---------------------------------------------------------------------------------------------------- */
/* デフォルト背景 */
@layer base {
  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);
  }
  .box.sheet {
    background-image: linear-gradient(to bottom, rgba(0,0,0, 0.7), transparent 5em);
  }
  .logs dl dt,
  .system.enter b,
  .system.exit b,
  .box:not(#status):not(.sheet) .chara-name {
    background-color: var(--chara-name-bg);
  }
  .logs dl dt {
    border-radius: .5em;
  }
  .no-text-shadow .box {
    text-shadow: none;
  }
  .no-text-shadow #status #status-body > dl > dt {
    text-shadow: var(--box-text-shadow);
  }
  .no-text-shadow .logs dl dt:empty {
    background: none;
  }
  /* リンク */
  a { text-decoration: none; }
  .link,
  a[href]:link    {
    color: #00ffff;
  }
  a[href]:visited { color: #77ccff; }
  .link:hover,
  a[href]:hover   { color: #ffffff; }

  /* 他 */
  input, textarea, select, button, .button, .dice-button, .toggle-button+label {
    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.dice-param {
    color: #cc99ee;
    font-style: normal;
  }
  .chat-palette i.palette-param {
    color: #99ccee;
    font-style: normal;
  }
  .chat-palette i.unit-status {
    color: #99eecc;
    font-style: normal;
  }
  .chat-palette i.room-status {
    color: #eecc99;
    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;
}
.chat .form-name {
  color: inherit;
}
.chat .form-name option {
  background-color: #000;
  font-family: inherit;
  font-weight: inherit;
}
.box #main-name1 {
  text-shadow: inherit;
}
.float-box {
  background: var(--float-bg-color);
  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: #bfc;
}
/* ラウンド */
#round-value {
}
/* ステータス */
.gauge i { background: #7ad; }
.gauge i::before { background: linear-gradient(to left, #ff5, transparent); }
[data-stt*="HP"]   .gauge[data-signal="safe"]      i,
[data-stt*="ＨＰ"] .gauge[data-signal="safe"]      i,
[data-stt*="体力"] .gauge[data-signal="safe"]      i,
[data-stt*="耐久"] .gauge[data-signal="safe"]      i { background: #095; }
[data-stt*="HP"]   .gauge[data-signal="caution"]   i,
[data-stt*="ＨＰ"] .gauge[data-signal="caution"]   i,
[data-stt*="体力"] .gauge[data-signal="caution"]   i,
[data-stt*="耐久"] .gauge[data-signal="caution"]   i { background: #890; }
[data-stt*="HP"]   .gauge[data-signal="warning"]   i,
[data-stt*="ＨＰ"] .gauge[data-signal="warning"]   i,
[data-stt*="体力"] .gauge[data-signal="warning"]   i,
[data-stt*="耐久"] .gauge[data-signal="warning"]   i { background: #e80; }
[data-stt*="HP"]   .gauge[data-signal="danger"]    i,
[data-stt*="ＨＰ"] .gauge[data-signal="danger"]    i,
[data-stt*="体力"] .gauge[data-signal="danger"]    i,
[data-stt*="耐久"] .gauge[data-signal="danger"]    i { background: #e00; }
[data-stt*="HP"]   .gauge[data-signal="knockdown"] i,
[data-stt*="ＨＰ"] .gauge[data-signal="knockdown"] i,
[data-stt*="体力"] .gauge[data-signal="knockdown"] i,
[data-stt*="耐久"] .gauge[data-signal="knockdown"] i { background: #900; }

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

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

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

/* チャットログ */
.tab-group {
  background-image: linear-gradient(to right, rgba(0,0,0, 0.4), transparent);
}
.tab-group .option:hover {
  background-color: rgba(0,0,0, 0.8);
}
@media (max-width: 600px) {
  .tab-group {
    background-color: rgba(0,0,0, 0.3);
  }
}
.tablist {
  background-color: #0004;
}
.tablist li.bold {
  background-color: #7895;
  color: #fc0;
}
.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::before,
.logs dl::after {
  color: hsla(
    var(--base-font-color-hue),
    var(--base-font-color-saturation),
    var(--base-font-color-lightness),
    0.5
    );
}
.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:hover {
  background-color: rgba(0,0,0, 0.3);
}
.logs dl dd:not(.commands):hover {
  box-shadow: 0 0 0 .1rem rgba(100,200,255,0.2) inset;
}
/* チャットログ：リンク */
.logs a[href],
#topic a[href] {
  text-decoration: underline;
  text-decoration-thickness: .2em;
  text-decoration-color: rgba(50,180,255,0.5);
  text-underline-offset: .1em;
  text-decoration-skip-ink: none;
}
.logs a[href]::before, 
#topic a[href]::before {
  content: "\e89e";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  font-size: .8em;
  line-height: 1;
  color: #fff;
}
/* 一部チャットログの折り畳み */
.logs dl dd.info:has(details) {
  &::before {
    display: none;
  }

  details {
    position: relative;

    &[open] {
      padding-left: calc(1.2em + 0.1em);
      border-left: 0.1em solid rgba(255, 255, 255, 0.35);
      margin-bottom: 0.35em;
    }

    > summary::before {
      content: "\e5d7";
      font-family: "Material Symbols Outlined", sans-serif;
      font-variation-settings: 'FILL' 1;
      display: inline-flex;
      width: 1.2em;
      height: 1.2em;
      justify-content: center;
      align-content: center;
    }

    &:not([open]) > summary::before {
      position: relative;
      top: 1px;
    }

    &[open] > summary::before {
      content: "\e5d6";
    }

    &[open] > summary > .title {
      display: none;
    }

    > summary {
      position: absolute;
      top: 0;
      left: 0.1em;
      list-style: none;

      &:hover::before {
        filter: brightness(150%);
      }
    }
  }
}
/* チャットログ：システムメッセージ */
.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 {
  line-height: 1;
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  text-align: center;
  vertical-align: text-bottom;
}
.logs dl.system.enter  dd.comm::before { color: #fd9; content: "\ea77"; }
.logs dl.system.exit   dd.comm::before { color: #89a; content: "\e9ba"; transform: scaleX(-1); }
.logs dl.system.topic  dd.comm::before { color: #7f7; content: "\f88d"; }
.logs dl.system.memo   dd.comm::before { color: #7f7; content: "\f1c6"; }
.logs dl.system.map    dd.comm::before { color: #7f7; content: "\e9b0"; }
.logs dl.system.ready  dd.comm::before { color: #f77; content: "\e6b1"; }
.logs dl.system.round  dd.comm::before { color: #f90; content: "\eb49"; }
.logs dl.system.change dd.comm::before { color: #f55; content: "\f1b8"; }
.logs dl.system.bgm    dd.comm::before { color: #f8c; content: "\e405"; }
.logs dl.system.bg     dd.comm::before { color: #c8f; content: "\e1bc"; }

.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: #bfc; font-weight: bold; }
.logs dl.system.memo   dd.info { color: #ded; }
.logs dl.system.change dd.info { color: #f99; }

.logs dl.system.exit b,
.logs dl.system.enter b {
  margin: 0 .2em;
  padding: .1em .2em;
  border-radius: .5rem;
}

.logs dl.system.bgm dd.info small { color: #b9a; }
.logs dl.system.bgm dd.info small::before {
  content: '\e050';
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
  margin: auto .1em auto .5em;
  line-height: 1;
  vertical-align: text-bottom;
}
.logs dl.bgm dd.info a.link-yt {
  background: none;
}
.logs dl.bgm dd.info a.link-yt::before {
  content: "\e41b";
  display: inline-block;
  margin-left: .5em;
  transform: scale(1.6, 1.4);
  vertical-align: text-bottom;
  text-shadow: none;
  color: #f00;
}
.logs dl.bgm dd.info .link-yt:hover::before {
  color: #fff;
}
/* チャットログ：ユニット操作 */
.logs dl dd.info.unit::before {
  color: #07d;
}
.logs dl dd.info.unit {
  color: #acf;
}
.logs dl dd.info.unit i {
  opacity: 0.70;
  font-style: normal;
}
.logs dl dd.info.unit :is(.minus, .zero.hp),
#status #status-body > dl[data-name] > dd.details > ul.details > li > dl dd .value .minus,
#status #status-body > dl[data-name] > dd.details > ul.details > li:is([data-stt="HP"], [data-stt$=":HP"]) > dl dd .value .zero,
.popup-unit-view .status-list > .status-item > .value .minus,
.popup-unit-view .status-list > .status-item:is([data-status-name="HP"], [data-status-name$=":HP"]) > .value .zero {
  color: #CD5C5C;
}
/* チャットログ：チョイス */
.logs dl dd.info.choice::before {
  color: #fe0;
}
.logs dl dd.info.choice {
  color: #db5;
}
.logs dl dd.info.choice > b,
.logs dl dd.info.choice > s {
  display: inline-block;
}
.logs dl dd.info.choice > b.result {
  margin: 1px .25em;
  padding: 0 .25em;
  border-width: 0px 1px;
  border-style: solid;
  border-color: #eda7;
  border-radius: .5em;
  font-size: 94%;
  font-weight: normal;
  font-family: inherit;
  vertical-align: top;
  background-color: #fe01;
  color: #feb;
}
.logs dl dd.info.choice s {
  color: #888;
  text-decoration: none;
}
.logs dl dd.info.choice b.result {
  background-color: #db52;
  padding: 0 0.25em;
}
/* チャットログ：ダイス */
.logs dl dd.info.dice::before {
  color: #f33;
}
.logs dl dd.info.dice {
  color: #e77;
  letter-spacing: 0.1rem;

  details {
    > summary {
      .code {
        [open] & {
          display: none;
        }
      }

      .row-count {
        margin-left: 0.5em;
        font-size: 80%;
        background-color: rgba(255, 255, 255, 0.2);
        padding-left: 0.2em;
        padding-right: 0.2em;

        [open] & {
          display: none;
        }
      }
    }

    &:not([open]) > summary {
      display: grid;
      height: 1.5em;
      grid-template-rows: 100%;
      grid-template-columns: max-content 1fr max-content;

      &::before {
        grid-column: 1 / 2;
      }

      .code {
        grid-column: 2 / 3;

        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .row-count {
        grid-column: 3 / 4;
      }
    }
  }
}
.logs dl dd.info.dice i {
  margin-left: .2rem;
  font-size: 90%;
  font-style: normal;
  opacity: 0.85;
}
.logs dl dd.info.dice b,
.logs dl dd.info.dice strong {
  color: #f55;
}
.logs dl dd.info.dice em {
  color: #eb0;
  font-weight: bold;
  -webkit-text-emphasis: none;
          text-emphasis: none;
}
.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 .row {
  display: block;

  &:hover {
    background-color: rgba(238, 170, 102, 0.1);
  }
}

/* チャットログ：威力表 */
.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="sw"] {
  .hit {
    font-weight: bold;

    &:has(.hit-labels) {
      filter: brightness(200%);
    }
  }

  .miss {
    color: gray;

    em {
      color: inherit;
    }
  }
}

/* チャットログ：ダブルクロス */
.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: #5afa;
  letter-spacing: 0rem;
  text-shadow: none;
}
/* チャットログ：編集済 */
.logs dl dd span.rewrited {
  position: absolute;
  top: auto;
  right: -.5rem;
  bottom: 0;
  color: var( --base-font-color);
  font-size: 90%;
  line-height: 1;
  text-shadow: none;
  opacity: 0.2;
  animation-name: rewrited-mark-fade-in;
  animation-duration: 0.1s;
  animation-timing-function: ease-out;
}
@keyframes rewrited-mark-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.2;
  }
}
.logs dl dd span.rewrited::before {
  content: "\e9a2";
  font-family: "Material Symbols Outlined";
  font-variation-settings: 'FILL' 1;
}
/* チャットログ：水平線 */
.logs hr {
  margin: .75em 0;
  border-width: .1rem 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  box-shadow: var(--box-text-shadow);
}
.no-text-shadow .logs hr {
  text-shadow: none;
}
/* チャットログ：見出し */
.logs h1 {
  position: relative;
  margin: 2em 0;
  padding: 1em 0;
  border-width: 3px 0;
  border-style: solid;
  border-color: var(--base-font-color);
  text-align: center;
  font-size: 200%;
  font-family: "Zen Old Mincho","游明朝","Yu Mincho","游明朝体","YuMincho" !important;
  line-height: 1;
}
.logs h1 span {
  line-height: 1 !important;
}
.logs h1::before {
  content: "";
  position: absolute;
  inset: auto 0 calc(-.7em + 3px);
  height: .7em;
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to bottom, var(--border-color), transparent);
  pointer-events: none;
}
.logs h1::after {
  content: "";
  position: absolute;
  inset: calc(-.7em + 3px) 0 auto;
  height: .7em;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: var(--border-color-deep);
  background-image: linear-gradient(to top, var(--border-color), transparent);
  pointer-events: none;
}
.logs h2 {
  position: relative;
  margin: 1.5em 0 .5em;
  padding: .6em;
  border-width: 3px 0 3px 0px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-color: #fff1;
  font-size: 150%;
  line-height: 1;
}
.logs h2::before {
  content: "";
  position: absolute;
  inset: 2px 0 2px;
  border-width: 1px 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff7, transparent);
  border-image-slice: 1;
  pointer-events: none;
}
.logs .center h2 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
}
.logs .center h2::before {
  border-image: linear-gradient(to right, transparent, #fff7, transparent);
  border-image-slice: 1;
}
.logs h3 {
  position: relative;
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 130%;
  line-height: 1;
}
.logs h3::before {
  content: "";
  position: absolute;
  inset: 0;
  border-width: 2px 0 0;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color),  transparent 70%);
  border-image-slice: 1;
  pointer-events: none;
}
.logs .center h3 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs .center h3::before {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
}
.logs h4 {
  margin: 1em 0 .5em;
  padding: .6em;
  border-width: 0 0 1px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(15deg, #fff1, transparent);
  font-size: 110%;
  line-height: 1;
}
.logs .center h4 {
  border-image: linear-gradient(to right, transparent, var(--base-font-color), transparent);
  border-image-slice: 1;
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs dl.system.round .comm > h4 {
  display: inline;
  margin: 0;
  margin-block: 0;
  margin-inline: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 100%;
  line-height: inherit;
}
#logviewer .logs dl.system.round .comm > h4 {
  font-size: 110%;
}
.logs h5 {
  margin: 1em 0 .5em;
  padding: .4em;
  background-image: linear-gradient(to right, #fff1, transparent);
  font-size: 100%;
  line-height: 1;
}
.logs .center h5 {
  background-image: linear-gradient(to right, transparent, #fff1, transparent);
}
.logs h6 {
  width: max-content;
  margin: 1em 0 .5em;
  padding: .2em 1.7em .2em .2em;
  border-width: 0 0 2px;
  border-style: solid;
  border-image: linear-gradient(to right, #fff5, #fff4, #fff3, transparent);
  border-image-slice: 1;
  font-size: 100%;
  line-height: 1;
}
.logs .center h6 {
  margin-left: auto;
  margin-right: auto;
  padding: .2em 1.7em .2em;
  border-image: linear-gradient(to right, transparent, #fff3, #fff5, #fff3, transparent);
  border-image-slice: 1;
}

.logs .system .info .state-differences {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 80%;

  & .unit {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: max-content 1fr;

    & .unit-name {
      grid-row: 1 / -1;
      grid-column: 1 / 2;
    }

    & .unit-name::after {
      content: "::";
      margin: 0 0.25em;
    }

    & .state-list {
      grid-row: 1 / -1;
      grid-column: 2 / 3;
      padding: 0;
      margin: 0;
      width: 100%;

      & .state {
        width: 100%;
        height: auto;
        display: block;

        & .state-name {
        }

        & .property-list {
          list-style-type: none;
          padding: 0;
          margin: 0;
          display: inline-flex;
          flex-flow: row;
          justify-content: flex-start;
          align-items: center;

          & .property {
            padding: 0;
            margin: 0 0 0 0.25em;
            display: inline-flex;
            flex-flow: row;
            justify-content: flex-start;
            align-items: center;

            & .property-name {
              display: inline;
            }

            & .property-name::after {
              content: ":";
            }

            & .difference {
              display: inline-flex;
              flex-flow: row;
              justify-content: flex-start;
              align-items: center;

              & [data-unit]:not([data-unit=""]) {
                font-family: "Ytchat-Monospace", monospace;
              }

              & [data-unit]:not([data-unit=""])::after {
                content: attr(data-unit);
              }

              & .after:is([data-value="0"], [data-value^="-"]) {
                color: grey;
              }
            }
          }

          & .property::before {
            content: "[";
          }

          & .property::after {
            content: "]";
          }
        }
      }
    }
  }
}

#memo-view h1 { font-size: 130%; }
#memo-view h2 { font-size: 125%; }
#memo-view h3 { font-size: 120%; }
#memo-view h4 { font-size: 105%; }
/* チャットログ：テーブル */
.logs table,
#topic table {
  margin: calc(.5em + 1px) 1px;
  border-collapse: collapse;
  border-style: hidden;
  outline-width: 1px;
  outline-style: solid;
  outline-color: var(--border-color-deep);
}
#topic table {
  margin: 1px;
}
.logs table thead th,
.logs table thead td,
#topic table thead th,
#topic table thead td {
  padding: 1em;
  border-width: 0;
  font-size: 90%;
}
.logs table thead tr,
#topic table thead tr {
  background: rgba(100,127,200,0.3);
}
.logs table tbody th,
.logs table tbody td,
#topic table tbody th,
#topic table tbody td {
  padding: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color-pale);

  &.align-center {
    text-align: center;
  }

  &.align-right {
    text-align: right;
  }
}
.logs table tbody tr:nth-child(even) {
  background: rgba(127,127,127,0.15);
}
/* チャットログ：リスト */
.logs ul,
#topic ul {
  padding-left: 1.5em;
  list-style-type: square;
}

/* チャットログ：グリッド */
.logs, #topic {
  .content-grid {
    display: grid;
    width: max-content;
    height: max-content;
    font-size: 90%;

    > .grid-item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5rem 1.0rem;
      min-width: 3em;
      min-height: 3em;

      --side-thin-width: 1px;
      --side-thin-style: solid;
      --side-thin-color: rgba(128, 128, 128, 0.15);

      --side-bold-width: 2px;
      --side-bold-style: solid;
      --side-bold-color: rgba(240, 240, 240, 0.9);

      --side-dash-width: 1px;
      --side-dash-style: dashed;
      --side-dash-color: rgba(240, 240, 240, 0.9);

      &[data-top-side="thin"] {
        border-top-width: var(--side-thin-width);
        border-top-style: var(--side-thin-style);
        border-top-color: var(--side-thin-color);
      }

      &[data-top-side="bold"] {
        border-top-width: var(--side-bold-width);
        border-top-style: var(--side-bold-style);
        border-top-color: var(--side-bold-color);
      }

      &[data-top-side="dash"] {
        border-top-width: var(--side-dash-width);
        border-top-style: var(--side-dash-style);
        border-top-color: var(--side-dash-color);
      }

      &[data-right-side="thin"] {
        border-right-width: var(--side-thin-width);
        border-right-style: var(--side-thin-style);
        border-right-color: var(--side-thin-color);
      }

      &[data-right-side="bold"] {
        border-right-width: var(--side-bold-width);
        border-right-style: var(--side-bold-style);
        border-right-color: var(--side-bold-color);
      }

      &[data-right-side="dash"] {
        border-right-width: var(--side-dash-width);
        border-right-style: var(--side-dash-style);
        border-right-color: var(--side-dash-color);
      }

      &[data-bottom-side="thin"] {
        border-bottom-width: var(--side-thin-width);
        border-bottom-style: var(--side-thin-style);
        border-bottom-color: var(--side-thin-color);
      }

      &[data-bottom-side="bold"] {
        border-bottom-width: var(--side-bold-width);
        border-bottom-style: var(--side-bold-style);
        border-bottom-color: var(--side-bold-color);
      }

      &[data-bottom-side="dash"] {
        border-bottom-width: var(--side-dash-width);
        border-bottom-style: var(--side-dash-style);
        border-bottom-color: var(--side-dash-color);
      }

      &[data-left-side="thin"] {
        border-left-width: var(--side-thin-width);
        border-left-style: var(--side-thin-style);
        border-left-color: var(--side-thin-color);
      }

      &[data-left-side="bold"] {
        border-left-width: var(--side-bold-width);
        border-left-style: var(--side-bold-style);
        border-left-color: var(--side-bold-color);
      }

      &[data-left-side="dash"] {
        border-left-width: var(--side-dash-width);
        border-left-style: var(--side-dash-style);
        border-left-color: var(--side-dash-color);
      }
    }
  }
}

/* チャットログ：数式 */
.logs, #topic, .chat-palette {
  span.formula {
    margin-left: 0.35em;
    margin-right: 0.35em;
    display: inline;
    line-height: 1em;
    height: 1.625em;
    position: relative;

    .chat-palette & {
      height: 1em;
    }

    &::before {
      content: "\ea5f";
      font-family: "Material Symbols Outlined", sans-serif;
      font-variation-settings: 'FILL' 0;
      opacity: 0.5;
      text-shadow: none;
      position: relative;
      top: 2px;
    }

    > .left {
      font-weight: normal;
    }

    > .equals-sign {
      margin-right: 0.25em;
    }

    > .right {
      font-weight: bold;

      code {
        font-family: inherit;
      }
    }
  }
}

/* チャットログ：ユニット参照 */
.logs, #topic {
  span.unit-reference {
    border-radius: 0.3em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    --background-opacity: 0.1;
    background: rgba(255, 255, 255, var(--background-opacity));
    text-shadow: none;
    margin-left: 0.15em;
    margin-right: 0.15em;
    cursor: default;

    &:hover {
      --background-opacity: 0.2;

      #logviewer & {
        --background-opacity: 0.1;
      }
    }
  }
}
.popup-unit-view {
  display: block;
  position: fixed;
  z-index: 11;
  background-color: rgba(11, 11, 36, 0.60);
  padding: 1rem;
  border-radius: 1rem;
  cursor: default;

  span, ul, li {
    pointer-events: none;
  }

  > .unit-name {
    display: block;
    font-weight: bold;
    padding-bottom: 0.1em;
    border-bottom: 0.125em solid white;
    margin-bottom: 0.5em;
  }

  .status-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 90%;

    > .status-item {
      margin: 0;
      padding: 0 0 0.25em 0;
      position: relative;
      display: grid;
      min-width: 6em;
      grid-template-rows: 1em;
      grid-template-columns: max-content 1fr max-content;

      &:not(:last-child) {
        margin-bottom: 0.6rem;
      }

      > .status-name,
      > .value {
        grid-row: 1 / -1;
        display: flex;
        flex-flow: row;
        align-items: center;
        z-index: 1;
        line-height: 100%;
      }

      > .status-name {
        grid-column: 1 / 2;
        margin-right: 1em;
        padding-left: 3px;
      }

      > .value {
        grid-column: 3 / 4;
        padding-right: 3px;

        .current,
        .max {
          display: inline;
        }

        .max {
          &::before {
            content: "/";
          }
        }

        .current + .max {
          margin-left: 0.125em;
          opacity: 0.9;
          font-size: 90%;
        }
      }

      > .gauge {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1rem;
        background-color: #333;

        > .fill {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          background-color: #095;
        }
      }
    }
  }
}

/* チャットログ：マップ埋め込み */
.logs .embedded-map.not-initialized {
  &::before {
    content: "この場所ではマップ埋め込みを利用できません";
    color: yellow;
  }
}
.logs .system.topic .embedded-map.not-initialized {
  &::before {
    content: "埋め込みマップ";
    color: #7a7a6c;
    border: 1px solid #7a7a6c;
    border-radius: 0.25em;
    padding: 0.2em;
  }
}
#topic {
  .embedded-map {
    width: 100%;

    &.not-initialized {
      height: 0;
      overflow: hidden;

      &::before {
        content: none;
      }

      * {
        visibility: hidden;
      }
    }

    &:not(.not-initialized) {
      width: 100%;
      height: 12rem;
      margin: 0.5em auto;

      &.map.sw25.advanced-combat-map {
        --range-layer-0-height: 0rem;
        --range-layer-1-height: 0rem;
        --range-layer-2-height: 0rem;
        --range-layer-3-height: 0rem;
        --map-height: calc(12rem + var(--range-layer-0-height) + var(--range-layer-1-height) + var(--range-layer-2-height) + var(--range-layer-3-height));
        height: var(--map-height);

        --layer-height: calc((1.5 + 0.75) * 16px);

        &:has(.ranges .layer[data-layer="0"]:not(:empty)) {
          --range-layer-0-height: var(--layer-height);
        }

        &:has(.ranges .layer[data-layer="1"]:not(:empty)) {
          --range-layer-1-height: var(--layer-height);
        }

        &:has(.ranges .layer[data-layer="2"]:not(:empty)) {
          --range-layer-2-height: var(--layer-height);
        }

        &:has(.ranges .layer[data-layer="3"]:not(:empty)) {
          --range-layer-3-height: var(--layer-height);
        }
      }

      &.map.sw25.advanced-combat-map:has(.ranges:not(:empty)) {
        padding-top: 0;
      }
    }
  }
}

/* // カラー設定：サイドバー
---------------------------------------------------------------------------------------------------- */
/* ステータス欄 */
#status #status-body > dl dl dt,
#status #status-body > dl[data-name] > dd.details > ul.details > li.group > .group-name {
  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:not(:has(li:not(.removed)))::before {
  content: '共有メモ';
  opacity: 0.3;
}
/* // Material Symbok
---------------------------------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-size: 1.2em;
  vertical-align: text-bottom;
  font-variation-settings: 'wght' 300, 'FILL' 0;
}
.material-symbols-outlined i {
  display: inline-block;
  font-size: 0px;
  opacity: 0;
}
summary .material-symbols-outlined {
  font-variation-settings: 'wght' 500, 'FILL' 1;
}
.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: "Material Symbols Outlined";
  font-variation-settings: 'wght' 300, 'FILL' 1;
  font-style: normal;
  text-shadow: var(--box-text-shadow);
}
.no-text-shadow .s-icon::after,
.no-text-shadow .s-icon::before {
  text-shadow: none;
}
.s-icon.passive::before{ content: "\ef4a"; font-variation-settings: 'FILL' 0; }
.s-icon.setup::before  { content: "\e86b"; font-variation-settings: 'FILL' 0; }
.s-icon.major::before  { content: "\e037"; transform: scale(1.2); }
.s-icon.minor::before  { content: "\e01f"; transform: scaleY(1.4); }
.s-icon.active::before { content: "\e625"; font-variation-settings: 'FILL' 0; transform: scaleX(-1) }

/* // カラーピッカー
---------------------------------------------------------------------------------------------------- */
body .pcr-app {
  background-color: #000e;
}

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