/*
 * Copyright (C) 2023 煙人計画 <moyu@vaporoid.com>
 *
 * This file is part of 昭和横濱物語.
 *
 * 昭和横濱物語 is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * 昭和横濱物語 is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with 昭和横濱物語. If not, see <https://www.gnu.org/licenses/>.
 */

/*************************************************************************/

@font-face {
  font-family: 'PromptFont';
  font-display: swap;
  src: url(PromptFont.woff2);
  unicode-range: U+219E-21A1,U+21D2-21D3;
}

/*************************************************************************/

:root {
  --font-size: 24px;
  --font-family: 'BIZ UDPMincho', 'Source Serif Pro', serif;
  --font-family-title-ja: 'Yuji Syuku', serif;
  --font-family-title-en: 'Averia Serif Libre', serif;
  --font-family-console: 'Share Tech', 'BIZ UDPGothic', sans-serif;
  --font-family-logging: 'Share Tech Mono', 'BIZ UDGothic', monospace;
  --font-family-barcode: 'Libre Barcode 128';
  --font-family-kcode: 'PromptFont';

  --color-title: #C63322;
  --color-console: #029D93;
  --color-disabled: #666;
  --color-banner: #FFD800;
  --color-fill: rgba(31, 31, 31, 0.5);
  --color-fill-active: rgba(2, 157, 147, 0.25);
  --color-fill-disabled: rgba(102, 102, 102, 0.25);
  --color-stroke: #FFF;
  --color-stroke-active: var(--color-console);
  --color-stroke-disabled: var(--color-disabled);
  --color-graph: rgba(2, 157, 147, 0.5);
}

@media (orientation: portrait) {
  :root {
    --screen-width: calc(var(--font-size) * 27);
    --screen-height: calc(var(--font-size) * 48);
    --background-image: url(bg-portrait.jpg);
    --background-image-kcode: url(bg-portrait-kcode.jpg);
  }
}

@media (orientation: landscape) {
  :root {
    --screen-width: calc(var(--font-size) * 48);
    --screen-height: calc(var(--font-size) * 27);
    --background-image: url(bg-landscape.jpg);
    --background-image-kcode: url(bg-landscape-kcode.jpg);
  }
}

@media (hover: hover) {
  :root {
    --cursor-pointer: pointer;
  }
}

/*************************************************************************/

.demeter-main-system-ui .lil-gui {
  --font-family: 'Share Tech', 'BIZ UDPGothic', sans-serif;
  --font-family-mono: 'Share Tech Mono', 'BIZ UDGothic', monospace;
}

/*
 * 仮想キーボードが出ないように、タッチによるフォーカスを阻止する。
 */
.demeter-main-system-ui .lil-gui input[type='number'],
.demeter-main-system-ui .lil-gui input[type='text'] {
  pointer-events: none;
}

/*
 * 入力対象のタイトルとコントローラの背景色を変更したいので、marginとpaddingを
 * 調整する。
 */

.demeter-main-system-ui .lil-gui .controller {
  margin: 0;
  padding: calc(var(--spacing) * 0.5) var(--padding);
}

.demeter-main-system-ui .lil-gui .children {
  margin: 0;
  padding: calc(var(--spacing) * 0.5) 0 0 0;
}

.demeter-main-system-ui .lil-gui .children .lil-gui {
  margin: calc(var(--spacing) * 0.5) 0 0 0;
  padding: 0;
}

/*
 * 疑似クラスの効果を打ち消す。
 */

div.demeter-main-system-ui .lil-gui .title,
div.demeter-main-system-ui .lil-gui .title:hover,
div.demeter-main-system-ui .lil-gui .title:active,
div.demeter-main-system-ui .lil-gui .title:focus {
  background-color: var(--title-background-color);
  opacity: 1;
  text-decoration: none;
}

/*
 * 入力対象のタイトルとコントローラの背景色を設定する。
 */

div.demeter-main-system-ui .lil-gui .title.demeter-focus {
  /* #111111と#029D93を3:1で混合。*/
  background-color: #0D3432;
}

div.demeter-main-system-ui .lil-gui .controller.demeter-focus {
  /* #1F1F1Fと#029D93を3:1で混合。*/
  background-color: #183F3C;
}

/*************************************************************************/

body.demeter {
  margin: 0;
  color: #FFF;
  background-color: #111;

  /*
   * 画面端でぽよぽよするのを止める。
   */
  overflow: hidden;

  /*
   * 全域で選択を禁止する。テキストを含む要素のカーソルが変わらないので、明示的
   * に上書きする。
   */
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

/*************************************************************************/

.demeter-backgrounds {
  display: none;
}

.demeter-background {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
  opacity: 0;
  filter: brightness(0.2) saturate(0);
  transition: opacity 2s, filter 2s;
}

.demeter-background-kcode {
  background-image: var(--background-image-kcode);
}

.demeter-background-main {
  background-image: var(--background-image);
}

.demeter-background.demeter-active {
  opacity: 1;
}

.demeter-background.demeter-saturate {
  filter: brightness(0.2) saturate(1);
}

.demeter-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

/*************************************************************************/

@media(orientation: portrait) {
  :root {
    --title-width: calc(var(--font-size) * 27);
    --title-height: calc(var(--font-size) * 26);
  }
}

@media(orientation: landscape) {
  :root {
    --title-width: calc(var(--font-size) * 35);
    --title-height: calc(var(--font-size) * 22);
  }
}

.demeter-title-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-title-unlock-audio {
  cursor: var(--cursor-pointer, auto);
}

.demeter-title {
  position: absolute;
  width: var(--title-width);
  height: var(--title-height);
  left: calc((var(--screen-width) - var(--title-width)) * 0.5);
  top: calc((var(--screen-height) - var(--title-height)) * 0.5);
}

.demeter-title-ja {
  position: absolute;
  width: var(--title-width);
  height: calc(var(--font-size) * 6);
  color: var(--color-title);
  font-family: var(--font-family-title-ja);
  font-kerning: none;
  font-size: calc(var(--font-size) * 4);
  line-height: calc(var(--font-size) * 6);
  text-align: center;
}

.demeter-title-ja > span {
  filter: url(#demeter-title-ja-filter);
}

.demeter-title-en {
  position: absolute;
  width: var(--title-width);
  height: var(--font-size);
  left: 0;
  top: calc(var(--font-size) * 6);
  color: var(--color-title);
  font-family: var(--font-family-title-en);
  font-kerning: none;
  font-size: var(--font-size);
  line-height: var(--font-size);
  text-align: center;
}

.demeter-title-en > span {
  filter: url(#demeter-title-en-filter);
}

.demeter-title-text {
  position: absolute;
  width: var(--title-width);
  height: calc(var(--font-size) * 2);
  left: 0;
  top: calc(var(--font-size) * 12);
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
}

.demeter-title-icon {
  display: none;
  position: absolute;
  width: var(--title-width);
  height: calc(var(--font-size) * 2);
  left: 0;
  top: calc(var(--font-size) * 16);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  transform-origin: center bottom;
}

.demeter-title-choices {
  display: none;
  position: absolute;
}

@media(orientation: portrait) {
  .demeter-title-choices {
    width: calc(var(--font-size) * 23);
    height: calc(var(--font-size) * 12);
    left: calc(var(--font-size) * 2);
    top: calc(var(--font-size) * 14);
  }
}

@media(orientation: landscape) {
  .demeter-title-choices {
    width: calc(var(--font-size) * 35);
    height: calc(var(--font-size) * 8);
    left: 0;
    top: calc(var(--font-size) * 14);
  }
}

.demeter-title-choice {
  position: absolute;
  width: calc(var(--font-size) * 11);
  height: calc(var(--font-size) * 4);
}

.demeter-title-choice2 {
  left: calc(var(--font-size) * 12);
  top: 0;
}

.demeter-title-choice3 {
  left: 0;
  top: calc(var(--font-size) * 4);
}

.demeter-title-choice4 {
  left: calc(var(--font-size) * 12);
  top: calc(var(--font-size) * 4);
}

@media(orientation: portrait) {
  .demeter-title-choice5 {
    left: 0;
    top: calc(var(--font-size) * 8);
  }

  .demeter-title-choice6 {
    left: calc(var(--font-size) * 12);
    top: calc(var(--font-size) * 8);
  }
}

@media(orientation: landscape) {
  .demeter-title-choice5 {
    left: calc(var(--font-size) * 24);
    top: 0;
  }

  .demeter-title-choice6 {
    left: calc(var(--font-size) * 24);
    top: calc(var(--font-size) * 4);
  }
}

.demeter-title-choice-text {
  position: absolute;
  width: calc(var(--font-size) * 7);
  height: calc(var(--font-size) * 2);
  left: calc(var(--font-size) * 2);
  top: var(--font-size);
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  pointer-events: none;
}

.demeter-title-choice-text.demeter-disabled {
  color: var(--color-disabled);
}

.demeter-title-choice-banner {
  position: absolute;
  width: calc(var(--font-size) * 6);
  height: var(--font-size);
  color: var(--color-banner);
  font-family: var(--font-family-console);
  font-size: calc(var(--font-size) * 2 / 3);
  line-height: var(--font-size);
  text-align: center;
  transform: translate(calc(var(--font-size) * 6.5), calc(var(--font-size) * 2.25)) rotate(-22.5deg);
  transform-origin: center;
  pointer-events: none;
}

.demeter-title-kcode {
  position: absolute;
  left: var(--font-size);
  top: var(--font-size);
  font-family: var(--font-family-kcode);
  font-size: calc(var(--font-size) * 0.75);
  line-height: calc(var(--font-size) * 0.75);
}

.demeter-title-kcode-item {
  opacity: 0;
  transition: opacity 0.5s;
}

.demeter-title-kcode-item.demeter-active {
  opacity: 1;
}

.demeter-title-version {
  position: absolute;
  right: var(--font-size);
  top: var(--font-size);
  font-family: var(--font-family-console);
  font-size: calc(var(--font-size) * 0.75);
  line-height: calc(var(--font-size) * 0.75);
  text-align: right;
}

.demeter-title-notice {
  right: var(--font-size);
  top: calc(var(--font-size) * 2);
}

/*************************************************************************/

.demeter-start-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-start {
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: calc(var(--font-size) * 14);
  left: calc((var(--screen-width) - var(--font-size) * 25) * 0.5);
  top: calc((var(--screen-height) - var(--font-size) * 14) * 0.5);
}

.demeter-start-display {
  position: absolute;
  width: calc(var(--font-size) * 15);
  height: calc(var(--font-size) * 12);
  left: calc(var(--font-size) * 5);
  top: 0;
}

.demeter-start-text {
  position: absolute;
  width: calc(var(--font-size) * 25);
  left: 0;
  top: calc(var(--font-size) * 12);
  color: var(--color-console);
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
}

.demeter-start-image {
  display: block;
  width: calc(var(--font-size) * 15);
  height: calc(var(--font-size) * 12);
  pointer-events: none;
}

.demeter-start-notice {
  right: var(--font-size);
  top: var(--font-size);
}

/*************************************************************************/

.demeter-main-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-main-logging {
  position: absolute;
  width: calc(var(--font-size) * 10);
  height: calc(var(--font-size) * 5);
  font-family: var(--font-family-logging);
  font-size: calc(var(--font-size) * 0.5);
  line-height: var(--font-size);
  color: var(--component-color, #FFF);
  opacity: var(--component-opacity, 0.25);
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.demeter-main-logging::-webkit-scrollbar {
  display: none;
}

@media(orientation: portrait) {
  .demeter-main-logging {
    left: var(--font-size);
    top: calc(var(--font-size) * 7);
  }
}

@media(orientation: landscape) {
  .demeter-main-logging {
    left: var(--font-size);
    top: var(--font-size);
  }
}

.demeter-main-audio-visualizer {
  position: absolute;
  width: calc(var(--font-size) * 10);
  height: calc(var(--font-size) * 5);
}

@media(orientation: portrait) {
  .demeter-main-audio-visualizer {
    left: var(--font-size);
    top: calc(var(--font-size) * 13);
  }
}

@media(orientation: landscape) {
  .demeter-main-audio-visualizer {
    left: var(--font-size);
    top: calc(var(--font-size) * 6.5);
  }
}

.demeter-main-frame-rate-visualizer {
  position: absolute;
  width: calc(var(--font-size) * 10);
  height: calc(var(--font-size) * 5);
}

@media(orientation: portrait) {
  .demeter-main-frame-rate-visualizer {
    left: var(--font-size);
    top: calc(var(--font-size) * 19);
  }
}

@media(orientation: landscape) {
  .demeter-main-frame-rate-visualizer {
    left: var(--font-size);
    top: calc(var(--font-size) * 12);
  }
}

.demeter-main-lip-sync {
  position: absolute;
  width: calc(var(--font-size) * 10);
  height: calc(var(--font-size) * 10);
}

@media(orientation: portrait) {
  .demeter-main-lip-sync {
    left: var(--font-size);
    top: calc(var(--font-size) * 25);
  }
}

@media(orientation: landscape) {
  .demeter-main-lip-sync {
    left: calc(var(--font-size) * 12);
    top: calc(var(--font-size) * 7);
  }
}

.demeter-main-lip-sync-face {
  display: block;
  position: absolute;
  width: calc(var(--font-size) * 10);
  height: calc(var(--font-size) * 10);
  filter: url(#demeter-main-lip-sync-filter);
}

.demeter-main-lip-sync-lip {
  position: absolute;
  width: calc(var(--font-size) * 2.5);
  height: calc(var(--font-size) * 2);
  left: calc(var(--font-size) * 3.75);
  top: calc(var(--font-size) * 6.5);
}

.demeter-main-silhouette {
  position: absolute;
  width: calc(var(--font-size) * 16);
  height: calc(var(--font-size) * 25);
}

@media(orientation: portrait) {
  .demeter-main-silhouette {
    top: calc(var(--font-size) * 7);
    right: 0;
  }
}

@media(orientation: landscape) {
  .demeter-main-silhouette {
    top: var(--font-size);
    right: 0;
  }
}

.demeter-main-menu {
  position: absolute;
  width: calc(var(--font-size) * 24);
  height: calc(var(--font-size) * 4.75);
  left: calc((var(--screen-width) - var(--font-size) * 24) * 0.5);
  top: 0;
}

.demeter-main-menu-frame {
  position: absolute;
}

.demeter-main-menu-frame svg {
  display: block;
  stroke-width: 1px;
}

.demeter-main-menu-items {
  position: absolute;
}

.demeter-main-menu-item {
  position: absolute;
  width: calc(var(--font-size) * 7);
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  pointer-events: none;
}

.demeter-main-menu-item.demeter-disabled {
  color: var(--color-disabled);
}

.demeter-main-menu-item1 {
  left: calc(var(--font-size) * 8.5);
  top: calc(var(--font-size) * 0.25);
}

.demeter-main-menu-item2 {
  left: calc(var(--font-size) * 1.5);
  top: calc(var(--font-size) * 0.25);
}

.demeter-main-menu-item3 {
  left: calc(var(--font-size) * 15.5);
  top: calc(var(--font-size) * 0.25);
}

.demeter-main-menu-item4 {
  left: calc(var(--font-size) * 0.5);
  top: calc(var(--font-size) * 2.5);
}

.demeter-main-menu-item5 {
  left: calc(var(--font-size) * 16.5);
  top: calc(var(--font-size) * 2.5);
}

.demeter-main-menu-title {
  position: absolute;
  width: calc(var(--font-size) * 9);
  left: calc(var(--font-size) * 7.5);
  top: calc(var(--font-size) * 2.5);
  font-family: var(--font-family-title-ja);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
}

/*
 * 実際のサイズはtransformのscale(1.5)の結果であることに注意。
 */
.demeter-main-system-ui {
  position: absolute;
  left: calc((var(--screen-width) - var(--font-size) * 18) * 0.5);
  top: calc(var(--font-size) * 5);
  transform: scale(1.5);
  transform-origin: left top;
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.demeter-main-system-ui::-webkit-scrollbar {
  display: none;
}

@media (orientation: portrait) {
  .demeter-main-system-ui {
    width: calc(var(--font-size) * 18 / 1.5);
    height: calc(var(--font-size) * 30 / 1.5);
  }
}

@media (orientation: landscape) {
  .demeter-main-system-ui {
    width: calc(var(--font-size) * 18 / 1.5);
    height: calc(var(--font-size) * 13 / 1.5);
  }
}

.demeter-main-choices {
  display: none;
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: calc(var(--font-size) * 12);
}

@media (orientation: portrait) {
  .demeter-main-choices {
    left: var(--font-size);
    top: calc(var(--font-size) * 23);
  }
}

@media (orientation: landscape) {
  .demeter-main-choices {
    left: calc(var(--font-size) * 11.5);
    top: calc(var(--font-size) * 5.5);
  }
}

.demeter-main-choice {
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: calc(var(--font-size) * 4);
}

.demeter-main-choice-text {
  position: absolute;
  width: calc(var(--font-size) * 21);
  height: calc(var(--font-size) * 2);
  left: calc(var(--font-size) * 2);
  top: var(--font-size);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  pointer-events: none;
}

.demeter-main-choice-barcode {
  display: inline-block;
  position: absolute;
  right: calc(var(--font-size) * 0.5);
  top: var(--font-size);
  font-family: var(--font-family-barcode);
  font-size: var(--font-size);
  line-height: var(--font-size);
  pointer-events: none;
}

.demeter-main-choice svg {
  display: block;
}

.demeter-main-choice2 {
  left: 0;
  top: calc(var(--font-size) * 4);
}

.demeter-main-choice3 {
  left: 0;
  top: calc(var(--font-size) * 8);
}

.demeter-main-paragraph {
  position: absolute;
  left: var(--font-size);
  bottom: var(--font-size);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  cursor: var(--cursor-pointer, auto);
}

@media (orientation: portrait) {
  .demeter-main-paragraph {
    width: calc(var(--font-size) * 25);
    height: calc(var(--font-size) * 12);
  }
}

@media (orientation: landscape) {
  .demeter-main-paragraph {
    width: calc(var(--font-size) * 46);
    height: calc(var(--font-size) * 8);
  }
}

.demeter-main-paragraph-speaker {
  position: absolute;
  left: 0;
  top: 0;
}

@media (orientation: portrait) {
  .demeter-main-paragraph-speaker {
    width: calc(var(--font-size) * 25);
    height: calc(var(--font-size) * 2);
    text-align: center;
  }
}

@media (orientation: landscape) {
  .demeter-main-paragraph-speaker {
    width: calc(var(--font-size) * 6);
    height: calc(var(--font-size) * 2);
  }
}

.demeter-main-paragraph-text {
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: calc(var(--font-size) * 8);
}

@media (orientation: portrait) {
  .demeter-main-paragraph-text {
    left: 0;
    top: calc(var(--font-size) * 2);
  }
}

@media (orientation: landscape) {
  .demeter-main-paragraph-text {
    left: calc(var(--font-size) * 6);
    top: 0;
  }
}

.demeter-main-paragraph-icon {
  display: none;
  position: absolute;
  width: calc(var(--font-size) * 2);
  height: calc(var(--font-size) * 2);
  right: 0;
  bottom: 0;
  line-height: calc(var(--font-size) * 2);
  text-align: right;
  transform-origin: center bottom;
}

@media (orientation: portrait) {
  .demeter-main-notice {
    right: var(--font-size);
    top: calc(var(--font-size) * 7);
  }
}

@media (orientation: landscape) {
  .demeter-main-notice {
    right: var(--font-size);
    top: var(--font-size);
  }
}

/*************************************************************************/

.demeter-data-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-data-back {
  position: absolute;
  width: calc(var(--font-size) * 10 + 1);
  height: calc(var(--font-size) * 2 + 1);
}

.demeter-data-back-frame {
  position: absolute;
}

.demeter-data-back-frame svg {
  display: block;
}

.demeter-data-back-item {
  position: absolute;
  width: calc(var(--font-size) * 6.5);
  left: calc(var(--font-size) * 3.5);
  top: 0;
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  pointer-events: none;
}

.demeter-data-back-in-the-ussr {
  font-size: 50%;
  opacity: 0;
  transition: opacity 1s;
}

@media (hover: hover) {
  .demeter-data-back:hover .demeter-data-back-in-the-ussr {
    opacity: 1;
  }
}

.demeter-data-title {
  position: absolute;
  width: calc(var(--font-size) * 15);
  height: calc(var(--font-size) * 3);
}

@media (orientation: portrait) {
  .demeter-data-title {
    left: calc(var(--font-size) * 11);
    top: 0;
  }
}

@media (orientation: landscape) {
  .demeter-data-title {
    left: calc(var(--font-size) * 16.5);
    top: 0;
  }
}

.demeter-data-title-frame {
  position: absolute;
}

.demeter-data-title-frame svg {
  display: block;
  stroke: var(--color-stroke);
  stroke-width: 1px;
}

.demeter-data-title-item {
  position: absolute;
  width: calc(var(--font-size) * 13);
  left: var(--font-size);
  top: 0;
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
}

@media (orientation: portrait) {
  .demeter-data-tapes {
    position: absolute;
    width: calc(var(--font-size) * 23);
    height: calc(var(--font-size) * 25);
    left: calc(var(--font-size) * 2);
    top: calc(var(--font-size) * 12);
  }
}

@media (orientation: landscape) {
  .demeter-data-tapes {
    position: absolute;
    width: calc(var(--font-size) * 38);
    height: calc(var(--font-size) * 17);
    left: calc(var(--font-size) * 5);
    top: calc(var(--font-size) * 6);
  }
}

.demeter-data-tape {
  position: absolute;
  width: calc(var(--font-size) * 11);
  height: calc(var(--font-size) * 7);
  filter: brightness(0.5) saturate(0.5) sepia(0.5);
  transition: filter 0.5s;
}

.demeter-data-tape.demeter-focus {
  filter: brightness(1) saturate(1) sepia(0.5);
}

.demeter-data-tape > img {
  position: absolute;
  display: block;
  width: calc(var(--font-size) * 11);
  height: calc(var(--font-size) * 7);
  cursor: var(--cursor-pointer, auto);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.demeter-data-tape-label,
.demeter-data-tape-label-select {
  position: absolute;
  width: calc(var(--font-size) * 8);
  color: #000;
  font-family: var(--font-family-console);
  font-size: calc(var(--font-size) * 0.7);
  line-height: calc(var(--font-size) * 0.7);
  pointer-events: none;
}

.demeter-data-tape-label {
  left: calc(var(--font-size) * 1.5);
  top: 25px;
}

.demeter-data-tape-label-select {
  left: calc(var(--font-size) * 1.5);
  top: 27px;
}

@media (orientation: portrait) {
  .demeter-data-notice {
    right: var(--font-size);
    top: calc(var(--font-size) * 3);
  }
}

@media (orientation: landscape) {
  .demeter-data-notice {
    right: var(--font-size);
    top: var(--font-size);
  }
}

/*************************************************************************/

@media (orientation: portrait) {
  .demeter-load-tape-tutorial {
    left: 0;
    top: calc(var(--font-size) * 9);
  }

  .demeter-load-tape-preview {
    left: 0;
    top: calc(var(--font-size) * 18);
  }

  .demeter-load-tape-save1 {
    left: calc(var(--font-size) * 12);
    top: 0;
  }

  .demeter-load-tape-save2 {
    left: calc(var(--font-size) * 12);
    top: calc(var(--font-size) * 9);
  }

  .demeter-load-tape-save3 {
    left: calc(var(--font-size) * 12);
    top: calc(var(--font-size) * 18);
  }
}

@media (orientation: landscape) {
  .demeter-load-tape-tutorial {
    left: calc(var(--font-size) * 13.5);
    top: 0;
  }

  .demeter-load-tape-preview {
    left: calc(var(--font-size) * 27);
    top: 0;
  }

  .demeter-load-tape-save1 {
    left: 0;
    top: calc(var(--font-size) * 10);
  }

  .demeter-load-tape-save2 {
    left: calc(var(--font-size) * 13.5);
    top: calc(var(--font-size) * 10);
  }

  .demeter-load-tape-save3 {
    left: calc(var(--font-size) * 27);
    top: calc(var(--font-size) * 10);
  }
}

/*************************************************************************/

@media (orientation: portrait) {
  .demeter-save-tape-save1 {
    left: calc(var(--font-size) * 6);
    top: 0;
  }

  .demeter-save-tape-save2 {
    left: calc(var(--font-size) * 6);
    top: calc(var(--font-size) * 9);
  }

  .demeter-save-tape-save3 {
    left: calc(var(--font-size) * 6);
    top: calc(var(--font-size) * 18);
  }
}

@media (orientation: landscape) {
  .demeter-save-tape-save1 {
    left: 0;
    top: calc(var(--font-size) * 4);
  }

  .demeter-save-tape-save2 {
    left: calc(var(--font-size) * 13.5);
    top: calc(var(--font-size) * 4);
  }

  .demeter-save-tape-save3 {
    left: calc(var(--font-size) * 27);
    top: calc(var(--font-size) * 4);
  }
}

/*************************************************************************/

:root {
  --credits-height-graph: calc(var(--font-size) * 25 * var(--graph-ratio));
  --credits-height-paragraph: calc(var(--font-size) * 27);
  --credits-height-paragraphs: calc(var(--credits-height-paragraph) * var(--credits-count));
  --credits-height: calc(max(var(--credits-height-graph) + var(--font-size) * 4, var(--credits-height-paragraphs) + var(--screen-height) * 2));
}

.demeter-credits-screen {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-credits-scroll {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.demeter-credits-scroll::-webkit-scrollbar {
  display: none;
}

.demeter-credits {
  position: absolute;
  width: var(--screen-width);
  height: var(--credits-height);
}

.demeter-credits-graph {
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: var(--credits-height-graph);
  right: var(--font-size);
  top: calc(var(--font-size) * 2);
  opacity: 0;
}

.demeter-credits-graph > svg {
  position: absolute;
  display: block;
  width: calc(var(--font-size) * 25);
  height: var(--credits-height-graph);
}

.demeter-credits-paragraphs {
  position: absolute;
  width: var(--screen-width);
  height: var(--credits-height-paragraphs);
}

.demeter-credits-paragraph {
  position: relative;
  padding: calc(var(--font-size) * 2) calc(var(--screen-width) - var(--font-size) * 25) 0 calc(var(--font-size) * 2);
  width: calc(var(--font-size) * 23);
  height: calc(var(--credits-height-paragraph) - var(--font-size) * 2);
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  opacity: 0;
}

.demeter-credits-paragraph a {
  color: #FFF;
}

.demeter-credits-text {
  position: relative;
  width: calc(var(--font-size) * 23);
}

.demeter-credits-text0 {
  height: calc(var(--font-size) * 2);
}

.demeter-credits-text1 {
  text-align: justify;
}

.demeter-credits-text2 > .demeter-credits-item1 {
  position: absolute;
  width: calc(var(--font-size) * 8);
}

.demeter-credits-text2 > .demeter-credits-item2 {
  position: relative;
  width: calc(var(--font-size) * 15);
  left: calc(var(--font-size) * 8);
  top: 0;
}

.demeter-credits-text4 {
  height: calc(var(--font-size) * 2);
}

.demeter-credits-text4 > .demeter-credits-item1 {
  position: absolute;
  width: calc(var(--font-size) * 7);
  text-align: right;
}

.demeter-credits-text4 > .demeter-credits-item2 {
  position: absolute;
  width: calc(var(--font-size) * 2);
  left: calc(var(--font-size) * 8);
  top: 0;
}

.demeter-credits-text4 > .demeter-credits-item3 {
  position: absolute;
  width: calc(var(--font-size) * 6);
  left: calc(var(--font-size) * 10);
  top: 0;
}

.demeter-credits-text4 > .demeter-credits-item4 {
  position: absolute;
  width: calc(var(--font-size) * 7);
  left: calc(var(--font-size) * 16);
  top: 0;
}

.demeter-credits-trophies {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
  left: 0;
  bottom: var(--screen-height);
  opacity: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
}

.demeter-credits-trophies-title {
  position: absolute;
  width: var(--screen-width);
  top: calc(var(--font-size) * 2);
  left: 0;
  text-align: center;
}

.demeter-credits-trophies1,
.demeter-credits-trophies2 {
  position: absolute;
  width: calc(var(--font-size) * 21);
  height: calc(var(--font-size) * 20);
}

@media (orientation: portrait) {
  .demeter-credits-trophies1 {
    top: calc(var(--font-size) * 4);
    left: calc(var(--font-size) * 3);
  }

  .demeter-credits-trophies2 {
    top: calc(var(--font-size) * 24);
    left: calc(var(--font-size) * 3);
  }
}

@media (orientation: landscape) {
  .demeter-credits-trophies1 {
    top: calc(var(--font-size) * 4);
    left: calc(var(--font-size) * 2);
  }

  .demeter-credits-trophies2 {
    top: calc(var(--font-size) * 4);
    left: calc(var(--font-size) * 25);
  }
}

.demeter-credits-trophy {
  position: relative;
  width: calc(var(--font-size) * 21);
  height: calc(var(--font-size) * 4);
}

.demeter-credits-trophy-title {
  position: absolute;
  width: calc(var(--font-size) * 21);
  height: calc(var(--font-size) * 2);
}

.demeter-credits-trophy-title-locked {
  display: block;
}

.demeter-credits-trophy.demeter-unlocked > .demeter-credits-trophy-title-locked {
  display: none;
}

.demeter-credits-trophy-title-unlocked {
  display: none;
}

.demeter-credits-trophy.demeter-unlocked > .demeter-credits-trophy-title-unlocked {
  display: block;
}

.demeter-credits-trophy-icon {
  width: calc(var(--font-size) * 1.5);
}

.demeter-credits-trophy-barcode {
  font-family: var(--font-family-barcode);
}

.demeter-credits-trophy-description {
  position: absolute;
  width: calc(var(--font-size) * 19.5);
  height: calc(var(--font-size) * 2);
  left: calc(var(--font-size) * 1.5);
  top: calc(var(--font-size) * 2);
  color: rgba(255, 255, 255);
  opacity: 0.25;
}

.demeter-credits-trophy.demeter-unlocked > .demeter-credits-trophy-description {
  opacity: 1;
}

.demeter-credits-end {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
  left: 0;
  bottom: 0;
  opacity: 0;
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  cursor: var(--cursor-pointer, auto);
}

.demeter-credits-end-paragraph {
  position: absolute;
  width: var(--screen-width);
  height: calc(var(--font-size) * 6);
  left: 0;
  top: calc((var(--screen-height) - var(--font-size) * 10) * 0.5);
}

.demeter-credits-end-icon {
  display: none;
  position: absolute;
  width: var(--screen-width);
  height: calc(var(--font-size) * 2);
  left: 0;
  bottom: calc((var(--screen-height) - var(--font-size) * 10) * 0.5);
  transform-origin: center bottom;
}

.demeter-credits-notice {
  right: var(--font-size);
  top: var(--font-size);
}

/*************************************************************************/

.demeter-history-building {
  position: absolute;
  font-family: var(--font-family-console);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  display: none;
}

@media (orientation: portrait) {
  .demeter-history-building {
    width: calc(var(--font-size) * 27);
    height: calc(var(--font-size) * 2);
    left: 0;
    top: calc(var(--font-size) * 24);
  }
}

@media (orientation: landscape) {
  .demeter-history-building {
    width: calc(var(--font-size) * 48);
    height: calc(var(--font-size) * 2);
    left: 0;
    top: calc(var(--font-size) * 13.5);
  }
}

.demeter-history-paragraphs {
  position: absolute;
  left: calc(var(--font-size) * 0.5);
  top: calc(var(--font-size) * 3);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  overflow: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.demeter-history-paragraphs::-webkit-scrollbar {
  display: none;
}

@media (orientation: portrait) {
  .demeter-history-paragraphs {
    width: calc(var(--font-size) * 26);
    height: calc(var(--font-size) * 44);
  }
}

@media (orientation: landscape) {
  .demeter-history-paragraphs {
    width: calc(var(--font-size) * 47);
    height: calc(var(--font-size) * 23);
  }
}

.demeter-history-paragraph-border {
  position: relative;
  padding: calc(var(--font-size) / 6) 0;
}

.demeter-history-paragraph-border:not(:first-child) {
  border-top: 1px solid var(--color-stroke);
}

@media (orientation: portrait) {
  .demeter-history-paragraph-border {
    width: calc(var(--font-size) * 26);
  }
}

@media (orientation: landscape) {
  .demeter-history-paragraph-border {
    width: calc(var(--font-size) * 47);
  }
}

.demeter-history-paragraph {
  position: relative;
  cursor: var(--cursor-pointer, auto);
  background-color: var(--color-fill);
  transition: background-color 0.5s;
}

.demeter-history-paragraph.demeter-focus {
  background-color: var(--color-fill-active);
}

@media (orientation: portrait) {
  .demeter-history-paragraph {
    width: calc(var(--font-size) * 26);
  }
}

@media (orientation: landscape) {
  .demeter-history-paragraph {
    width: calc(var(--font-size) * 47);
  }
}

.demeter-history-paragraph-speaker {
  left: calc(var(--font-size) * 0.5);
}

@media (orientation: portrait) {
  .demeter-history-paragraph-speaker {
    position: relative;
    width: calc(var(--font-size) * 25);
    height: calc(var(--font-size) * 2);
    text-align: center;
  }
}

@media (orientation: landscape) {
  .demeter-history-paragraph-speaker {
    position: absolute;
    width: calc(var(--font-size) * 6);
    height: calc(var(--font-size) * 2);
  }
}

.demeter-history-paragraph-speaker-barcode {
  font-family: var(--font-family-barcode);
}

.demeter-history-paragraph-text {
  position: relative;
  width: calc(var(--font-size) * 25);
}

@media (orientation: portrait) {
  .demeter-history-paragraph-text {
    left: calc(var(--font-size) * 0.5);
    top: 0;
  }
}

@media (orientation: landscape) {
  .demeter-history-paragraph-text {
    left: calc(var(--font-size) * 6.5);
    top: 0;
  }
}

.demeter-history-paragraph-voice {
  position: absolute;
  width: calc(var(--font-size) * 4);
  height: calc(var(--font-size) * 2);
  right: calc(var(--font-size) * 0.5);
  top: 0;
  font-family: var(--font-family-console);
  text-align: right;
  transition: color 0.5s;
}

.demeter-history-paragraph-voice.demeter-active {
  color: var(--color-console);
}

/*************************************************************************/

.demeter-dialog-overlay {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

.demeter-dialog {
  position: absolute;
  width: calc(var(--font-size) * 25);
  height: calc(var(--font-size) * 12);
  left: calc((var(--screen-width) - var(--font-size) * 25) * 0.5);
  top: calc((var(--screen-height) - var(--font-size) * 12) * 0.5);
}

.demeter-dialog-frame {
  position: absolute;
}

.demeter-dialog-frame svg {
  display: block;
  fill: var(--color-fill);
  stroke: var(--color-stroke);
}

.demeter-dialog-text {
  position: absolute;
  width: calc(var(--font-size) * 21);
  height: calc(var(--font-size) * 8);
  left: calc(var(--font-size) * 2);
  top: var(--font-size);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
}

.demeter-dialog-item {
  position: absolute;
  width: calc(var(--font-size) * 8);
  height: calc(var(--font-size) * 2);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * 2);
  text-align: center;
  pointer-events: none;
}

.demeter-dialog-item1 {
  position: absolute;
  left: calc(var(--font-size) * 15.5);
  top: calc(var(--font-size) * 9);
}

.demeter-dialog-item2 {
  position: absolute;
  left: calc(var(--font-size) * 6.5);
  top: calc(var(--font-size) * 9);
}

/*************************************************************************/

.demeter-empty-overlay {
  position: absolute;
  width: var(--screen-width);
  height: var(--screen-height);
}

/*************************************************************************/

/* 1989-01-06 21:33Z */
.demeter-offscreen {
  position: absolute;
  top: -8916px;
  left: -2133px;
}

.demeter-loader {
  font-family: var(--font-family);
}

/*************************************************************************/

.demeter-icon {
  font-family: 'Showa Yokohama Story';
}

.demeter-icon::before {
  content: '\E000';
}

/*************************************************************************/

.demeter-notice {
  position: absolute;
  font-family: var(--font-family);
  font-size: calc(var(--font-size) * 0.75);
  line-height: calc(var(--font-size) * 0.75);
  text-align: right;
  opacity: 0;
}

/*************************************************************************/

.demeter-button {
  cursor: var(--cursor-pointer, auto);
  fill: var(--color-fill);
  stroke: var(--color-stroke);
  transition: fill 0.1s, stroke 0.5s;
}

.demeter-button.demeter-focus {
  stroke: var(--color-stroke-active);
}

.demeter-button:active {
  fill: var(--color-fill-active);
}

.demeter-button.demeter-active {
  fill: var(--color-fill-active);
}

/*
 * プログラム側の独自フォーカス機構で扱いたくない要素を:hover疑似クラスでトラン
 * ジションする。
 */
@media (hover: hover) {
  .demeter-button.demeter-hover:hover {
    stroke: var(--color-stroke-active);
  }
}

.demeter-button.demeter-disabled {
  cursor: auto;
  fill: var(--color-fill-disabled);
  stroke: var(--color-stroke-disabled);
}

.demeter-button.demeter-disabled:active {
  fill: var(--color-fill-disabled);
}

/*************************************************************************/

div.demeter-text {
  white-space: nowrap;
}

div.demeter-text > div > span {
  display: inline-block;
  position: relative;
}

div.demeter-text > div > span > span {
  display: inline-block;
}

div.demeter-text > div > span > div {
  position: absolute;
  font-size: 50%;
}

div.demeter-text > div > span > div > span {
  display: inline-block;
}

/*************************************************************************/

#demeter-graph-marker {
  fill: var(--color-graph);
  stroke: none;
}

.demeter-graph > svg g.edges {
  fill: none;
  stroke: var(--color-graph);
  stroke-width: 0.5px;
  marker-end: url(#demeter-graph-marker);
}

.demeter-graph > svg g.nodes {
  fill: none;
  stroke: var(--color-graph);
  stroke-width: 0.5px;
}

.demeter-graph > svg g.nodes > .demeter-active {
  fill: var(--color-graph);
}

/*************************************************************************/