@novely/solid-renderer/dist/styles/index.css

Renderer for @novely/core powered by SolidJS

/* src/styles/root/root.css */
.root {
  background-image: var(--novely-root-background-image);
  background-repeat: var(--novely-root-background-repeat, no-repeat);
  background-position: var(--novely-root-background-position, center);
  background-size: var(--novely-root-background-size, cover);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: #0000;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  --novely-px: .0625rem;
  width: 100vw;
  height: 100vh;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    Noto Sans,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol,
    Noto Color Emoji;
  font-size: 1rem;
  overflow: clip;
}
.root,
.root * {
  box-sizing: border-box;
}

/* src/styles/root/index.css */

/* src/styles/button/button.css */
.button {
  background-color: var(--novely-button-background-color, #ffe9f3);
  color: var(--novely-button-color, #000);
  box-shadow: 0 0 0 var(--button-box-shadow-spread-radius, .25rem) var(--novely-button-border-color, #ffc7df);
  margin: .4rem var(--button-box-shadow-spread-radius, .25rem);
  outline-offset: var(--select-box-shadow-spread-radius, .25rem);
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  border: none;
  border-radius: .25rem;
  padding: .4rem;
  font-size: 1rem;
  line-height: 1.2;
  position: relative;
}
.button:hover {
  background-color: var(--novely-button-hover-background-color, #fff);
  border-color: var(--novely-button-hover-border-color, #ffc6d8);
  color: var(--novely-button-hover-color, #ffb7a2);
}
.button[aria-disabled=true] {
  cursor: not-allowed;
  opacity: .9;
}
.button:after {
  content: "";
  border-radius: .25rem;
  position: absolute;
  top: -.15rem;
  bottom: -.15rem;
  left: -.15rem;
  right: -.15rem;
}

/* src/styles/button/index.css */

/* src/styles/characters/characters.css */
.characters {
  z-index: 3;
  pointer-events: none;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  overflow: hidden;
}
.characters > div {
  background-image: var(--background-image);
  min-width: unset;
  max-height: 85%;
  max-width: calc(100% / max(2, var(--shown-characters-count)));
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
@media (max-aspect-ratio: .26) {
  .characters {
    padding-bottom: 50vh;
  }
}

/* src/styles/characters/index.css */

/* src/styles/control-panel/control-panel.css */
.control-panel {
  z-index: 31;
  position: fixed;
  bottom: .45rem;
  right: .4rem;
}
.control-panel-container {
  justify-content: end;
  gap: calc(var(--novely-px) * 3);
  width: 100%;
  display: flex;
}
.control-panel-container--center:not(.control-panel-container--wide-open) {
  bottom: calc(var(--novely-dialog-border-width, .18rem) + .4rem);
  justify-content: center;
  position: fixed;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}
.control-panel-container--wide-closed {
  display: none;
}
.control-panel-container--wide-open {
  z-index: 31;
  flex-direction: column;
  width: calc(100% - .8rem);
  display: flex;
  position: fixed;
  bottom: .4rem;
  left: .4rem;
}
.control-panel-container-backdrop {
  z-index: 23;
  background-color: var(--novely-control-panel-container-backdrop-background-color, #1616166c);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.control-panel-container-fix {
  vertical-align: middle;
  height: 100vh;
  display: inline-block;
}
@media (max-aspect-ratio: .8) and ((min-aspect-ratio: .26) or (max-aspect-ratio: .1)) {
  .control-panel {
    bottom: .4rem;
    left: .4rem;
  }
}

/* src/styles/control-panel/button/button.css */
.control-panel__button {
  --button-box-shadow-spread-radius: var(--novely-px);
  border: .125rem solid var(--novely-button-border-color, #ffc7df);
  justify-content: center;
  align-items: center;
  height: 2rem;
  margin: 0;
  padding: .2rem .4rem;
  font-size: 1rem;
  line-height: 1;
  display: flex;
}
.control-panel__button__icon,
.control-panel__button--auto-mode {
  display: none;
}
@media (max-aspect-ratio: .8) and ((min-aspect-ratio: .26) or (max-aspect-ratio: .1)) {
  .control-panel__button {
    flex-grow: 1;
  }
  .control-panel__button__icon {
    display: block;
  }
  .control-panel__button__content {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: var(--novely-px);
    white-space: nowrap;
    width: var(--novely-px);
    position: absolute;
    overflow: hidden;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .control-panel__button--auto-mode {
    display: flex;
  }
}

/* src/styles/control-panel/index.css */

/* src/styles/action-text/action-text.css */
.action-text {
  z-index: 10;
  text-align: center;
  background: var(--novely-fullscreen-background-color, #0000004d);
  max-width: 100vw;
  text-shadow: var(--novely-fullscreen-text-shadow, .125rem .125rem .25rem #00000080);
  color: var(--novely-fullscreen-text-color, white);
  font-size: 2rem;
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.action-text--shown {
  justify-content: center;
  align-items: center;
  display: flex;
}
.action-text > span {
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-word;
}
.action-text:focus-visible > span {
  text-decoration: underline;
}
.action-text,
.action-text > span {
  -webkit-tap-highlight-color: #0000;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: none;
}
@media (max-aspect-ratio: .8) {
  .action-text {
    font-size: 1.2rem;
  }
}
@media only screen and (min-aspect-ratio: .8) and (pointer: coarse) {
  .action-text {
    font-size: 1.2rem;
  }
}
.preview .action-text {
  font-size: 2rem;
}
@media only screen and (min-aspect-ratio: .8) and (pointer: coarse) {
  .preview .action-text {
    font-size: 1.8rem;
  }
}

/* src/styles/action-text/index.css */

/* src/styles/select/select.css */
.select {
  flex-direction: column;
  align-items: start;
  width: 100%;
  display: flex;
}

/* src/styles/select/select/select.css */
.select__select {
  background-color: var(--novely-select-background-color, #ffe9f3);
  color: var(--novely-select-color, #000);
  box-shadow: 0 0 0 var(--select-box-shadow-spread-radius, .25rem) var(--novely-select-border-color, #ffc7df);
  outline-offset: var(--select-box-shadow-spread-radius, .25rem);
  margin: calc(var(--select-box-shadow-spread-radius, .25rem) + .4rem) var(--select-box-shadow-spread-radius, .25rem);
  width: calc(100% - (var(--select-box-shadow-spread-radius, .25rem) * 2));
  border: none;
  border-radius: .25rem;
  padding: .4rem;
  font-size: 1rem;
}
@supports ((-webkit-appearance: none)) {
  .select__select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2rem;
  }
}

/* src/styles/select/select/container.css */
.select__select-container {
  position: relative;
}
@media (max-aspect-ratio: .8) {
  .select__select-container {
    min-width: 70%;
  }
}

/* src/styles/select/label/label.css */
.select__label {
  background: var(--novely-select-label-background, #ffe9f3);
  color: var(--novely-select-color, #000);
  border-radius: .25rem;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  font-size: 1rem;
  display: flex;
}
.select__label__icon {
  justify-content: center;
  align-items: center;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .select__label {
    min-width: 70%;
  }
}
@media (max-aspect-ratio: .26) {
  .select__label {
    min-width: 100%;
  }
}

/* src/styles/select/icon/icon.css */
.select__icon {
  pointer-events: none;
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 1.2rem;
  right: .8rem;
}

/* src/styles/select/index.css */

/* src/styles/range/range.css */
.range {
  flex-direction: column;
  align-items: start;
  width: 100%;
  display: flex;
}

/* src/styles/range/label/label.css */
.range__label {
  background: var(--novely-range-label-background, #ffe9f3);
  color: var(--novely-range-color, #000);
  border-radius: .25rem;
  align-items: center;
  gap: .25rem;
  padding: .25rem .5rem;
  font-size: 1.02rem;
  display: flex;
}
.range__label__icon {
  justify-content: center;
  align-items: center;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .range__label {
    min-width: 70%;
  }
}
@media (max-aspect-ratio: .26) {
  .range__label {
    min-width: 100%;
  }
}

/* src/styles/range/range/range.css */
.range__range {
  -webkit-appearance: none;
  appearance: none;
  background-color: #0000;
  margin: .4rem 0;
  position: relative;
}
.range__range::-webkit-slider-runnable-track {
  background-color: var(--novely-range-track-background, #ffe9f3);
  border-radius: 9999px;
  width: 100%;
  height: .75rem;
}
.range__range::-moz-range-track {
  background-color: var(--novely-range-track-background, #ffe9f3);
  border-radius: 9999px;
  width: 100%;
  height: .75rem;
}
.range__range::-webkit-slider-thumb {
  background-color: var(--novely-range-thumb-color, #ff86ba);
}
.range__range::-moz-range-thumb {
  background-color: var(--novely-range-thumb-color, #ff86ba);
}
.range__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-style: none;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.range__range::-moz-range-thumb {
  border-style: none;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  top: 50%;
}
.range__range:active::-webkit-slider-thumb {
  background-color: var(--novely-range-thumb-active-color, #ff66a8);
}
.range__range:active::-moz-range-thumb {
  background-color: var(--novely-range-thumb-active-color, #ff66a8);
}
@media (max-aspect-ratio: .8) {
  .range__range {
    min-width: 70%;
  }
}
@media (max-aspect-ratio: .26) {
  .range__range {
    min-width: 100%;
  }
}

/* src/styles/range/index.css */

/* src/styles/action-dialog/action-dialog.css */
.action-dialog {
  --min-dialog-height: 26vh;
  min-height: var(--min-dialog-height);
  z-index: 22;
  text-align: left;
  cursor: default;
  flex-direction: column;
  justify-content: flex-end;
  width: 75%;
  display: flex;
  position: fixed;
  bottom: .4rem;
  left: 50%;
  transform: translateX(-50%);
}
.action-dialog--visible {
  display: flex;
}
.action-dialog--hidden {
  display: none;
}
.action-dialog-container {
  height: 100%;
  min-height: 18vh;
  color: var(--novely-dialog-color, #fff);
  border: var(--novely-dialog-border-width, .15rem) solid var(--novely-dialog-border-color, #fff);
  border-radius: var(--novely-dialog-border-radius, .4rem);
  box-shadow: var(--novely-px) var(--novely-px) .2rem var(--novely-dialog-box-shadow-color, #00000072);
  background-image: var(--novely-dialog-background-image, none);
  background-color: var(--novely-dialog-background-color, #f092b4df);
  background-position: var(--novely-dialog-background-position);
  background-size: var(--novely-dialog-background-size);
  flex-wrap: nowrap;
  flex-grow: 1;
  padding-bottom: 2.8rem;
  display: flex;
}
.action-dialog-person {
  justify-content: center;
  align-items: flex-end;
  max-width: 25vw;
  max-height: 25vh;
  display: flex;
}
.action-dialog-name {
  margin: 0;
  padding: .2rem 1.5vmin;
  display: block;
}
.action-dialog-content {
  margin: 0;
  padding: 1vmin;
  display: block;
}
.action-dialog-name {
  width: fit-content;
  box-shadow: var(--novely-px) var(--novely-px) .15rem #00000042;
  background: #fff;
  border-radius: .3rem .3rem 0 0;
  margin-left: 5vmin;
  font-size: 1.85rem;
  line-height: 1.2;
}
.action-dialog-mood-separator {
  vertical-align: middle;
  font-size: .6rem;
}
.action-dialog-content {
  word-wrap: break-word;
  word-break: break-word;
  width: 100%;
  text-shadow:
    var(--novely-px) var(--novely-px) 0 black,
    calc(var(--novely-px) * -1) calc(var(--novely-px) * -1) 0 black,
    var(--novely-px) calc(var(--novely-px) * -1) 0 black,
    calc(var(--novely-px) * -1) var(--novely-px) 0 black;
  font-size: 2rem;
  line-height: 1.2;
}
.action-dialog-content--disable-shadow {
  text-shadow: none;
}
.action-dialog-person > canvas,
.action-dialog-person > img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
@media (max-aspect-ratio: .8) {
  .action-dialog {
    --min-dialog-height: 20vh;
    --dialog-bottom-offset: min(calc(2.8rem * 4), 22vh);
    width: calc(100% - .8rem);
    left: .4rem;
    top: calc(100vh - var(--min-dialog-height) - var(--dialog-bottom-offset) - 6vh);
    bottom: unset;
    transform: unset;
    justify-content: flex-start;
  }
  .action-dialog-container {
    flex-grow: unset;
    height: auto;
    min-height: 12vh;
    padding-bottom: 0;
  }
  .action-dialog-name {
    font-size: 1.2rem;
  }
  .action-dialog-content {
    text-shadow: none;
    font-size: 1.2rem;
  }
}
@media (max-aspect-ratio: .26) {
  .action-dialog {
    height: unset;
  }
  .action-dialog-container {
    height: 50vh !important;
  }
}
@media only screen and (min-aspect-ratio: .8) and (pointer: coarse) {
  .action-dialog-name {
    font-size: 1.2rem;
  }
  .action-dialog-content {
    text-shadow: none;
    font-size: 1.2rem;
    line-height: 1.15;
  }
}
.preview .action-dialog-name,
.preview .action-dialog-content {
  font-size: 2rem;
}
@media only screen and (min-aspect-ratio: .8) and (pointer: coarse) {
  .preview .action-dialog-name,
  .preview .action-dialog-content {
    font-size: 1.8rem;
  }
}

/* src/styles/action-dialog/index.css */

/* src/styles/custom-actions/image/image.css */
.action-image {
  z-index: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.action-image__image-container {
  z-index: var(--z-index, 1);
  position: absolute;
}
.action-image__image-container,
.action-image__image {
  width: 100vw;
  height: 100vh;
}
.action-image__image {
  object-fit: cover;
  object-position: 50% 50%;
}

/* src/styles/custom-actions/image/index.css */

/* src/styles/custom-actions/index.css */

/* src/styles/dialog/dialog.css */
.dialog {
  z-index: 25;
  text-align: left;
  flex-direction: column;
  align-items: stretch;
  min-width: 50vw;
  max-width: 100vw;
  min-height: 40vh;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: .25rem;
  padding-right: .25rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.dialog[open] {
  display: flex;
}
.dialog[open]::backdrop {
  background-color: var(--novely-dialog-backdrop-background-color, #1616166c);
}
.dialog-label {
  border-radius: .25rem;
  padding: .25rem .5rem;
  font-size: 1.2375rem;
}
.dialog-label[data-used=true] {
  background: var(--novely-dialog-label-background, #ffe9f3);
  color: var(--novely-dialog-label-color, #000);
}
@media (max-aspect-ratio: .8) {
  .dialog {
    width: calc(100vw - .5rem);
  }
}

/* src/styles/dialog/index.css */

/* src/styles/choice-dialog/choice-dialog.css */
.choice-dialog {
  background: none;
  border: none;
}

/* src/styles/choice-dialog/choices.css */
.choice-dialog__choices {
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
}
.choice-dialog__choices:has(.choice-dialog__choice-image) {
  flex-direction: row;
  gap: .5rem;
}
.choice-dialog__choice {
  flex-direction: column;
  align-items: center;
  display: flex;
}
.choice-dialog__choice:has(.choice-dialog__choice-image) {
  flex-grow: 1;
}
.choice-dialog__choice-image {
  max-width: 25vw;
  max-height: 25vh;
}

/* src/styles/choice-dialog/index.css */

/* src/styles/input-dialog/input-dialog.css */
.input-dialog__text {
  min-height: 1rem;
  -webkit-tap-highlight-color: #0000;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  text-align: center;
  width: 40vw;
  min-height: 1lh;
  margin: .4rem 0;
  font-size: 1.2375rem;
}
.input-dialog__label {
  width: auto;
  margin-bottom: .6rem;
}
.input-dialog__error {
  min-height: 1rem;
  min-height: 1lh;
}
.input-dialog {
  min-width: 35vw;
  color: var(--novely-input-dialog-color, #fff);
  border: var(--novely-input-dialog-border-width, .15rem) solid var(--novely-input-dialog-border-color, #fff);
  border-radius: var(--novely-input-dialog-border-radius, .4rem);
  box-shadow: var(--novely-px) var(--novely-px) .2rem var(--novely-input-dialog-box-shadow-color, #00000072);
  background-image: var(--novely-input-dialog-background-image, none);
  background-color: var(--novely-input-dialog-background-color, #f092b4df);
  background-position: var(--novely-input-dialog-background-position);
  background-size: var(--novely-input-dialog-background-size);
  justify-content: center;
  align-items: center;
}
@media (max-aspect-ratio: .8) {
  .input-dialog__text {
    width: calc(100vw - .5rem);
  }
  .input-dialog__error {
    min-height: 3rem;
    min-height: 3lh;
  }
}

/* src/styles/input-dialog/input/input.css */
input[name=novely-input] {
  border: none;
  border-radius: .25rem;
  min-width: min(10rem, 100%);
  max-width: 100%;
  padding: .25rem;
  display: block;
  position: relative;
}
input[name=novely-input][type=text],
input[name=novely-input][type=number],
input[name=novely-input][type=password] {
  box-shadow: 0 0 0 var(--input-box-shadow-spread-radius, .15rem) var(--novely-input-border-color, #ffc7df);
  outline-offset: var(--input-box-shadow-spread-radius, .15rem);
}
input[name=novely-input][type=checkbox] {
  min-width: unset;
}
@supports ((-webkit-appearance: none)) {
  input[name=novely-input][type=number] {
    -webkit-appearance: textfield;
    appearance: textfield;
  }
}

/* src/styles/input-dialog/button/button.css */
.dialog-input__button {
  width: fit-content;
  padding: .4rem .6rem;
  font-size: 1.2375rem;
}
@media (max-aspect-ratio: .8) {
  .dialog-input__button {
    font-size: 1.1rem;
  }
}

/* src/styles/input-dialog/index.css */

/* src/styles/exit-dialog/exit-dialog.css */
.exit-dialog {
  color: var(--novely-exit-dialog-color, #fff);
  border: var(--novely-exit-dialog-border-width, .15rem) solid var(--novely-exit-dialog-border-color, #fff);
  border-radius: var(--novely-exit-dialog-border-radius, .4rem);
  box-shadow: var(--novely-px) var(--novely-px) .2rem var(--novely-exit-dialog-box-shadow-color, #00000072);
  background-image: var(--novely-exit-dialog-background-image, none);
  background-color: var(--novely-exit-dialog-background-color, #f092b4df);
  background-position: var(--novely-exit-dialog-background-position);
  background-size: var(--novely-exit-dialog-background-size);
  justify-content: center;
  align-items: center;
}
.exit-dialog-buttons {
  gap: .5rem;
  display: flex;
}
@media (max-aspect-ratio: .26) {
  .exit-dialog-buttons {
    flex-direction: column;
  }
}

/* src/styles/exit-dialog/index.css */

/* src/styles/game/background/background.css */
.background {
  z-index: 1;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
}

/* src/styles/game/game/game.css */
.game {
  width: 100%;
  height: 100%;
}

/* src/styles/game/index.css */

/* src/styles/main-menu/main-menu.css */
.main-menu {
  height: 100%;
  padding: 0 1rem;
  display: flex;
  overflow: hidden;
}
@media (max-aspect-ratio: .8) {
  .main-menu {
    flex-direction: column;
    justify-content: center;
  }
}

/* src/styles/main-menu/controls/controls.css */
.main-menu__controls {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* src/styles/main-menu/button/button.css */
.main-menu__button {
  grid-template-rows: 1fr;
  grid-template-columns: calc(100% - 1.5rem) 1.5rem;
  align-content: space-around;
  justify-items: center;
  min-width: 30vw;
  display: grid;
}
.main-menu__button__text {
  align-self: center;
}
@media (max-aspect-ratio: .8) {
  .main-menu__button {
    min-width: calc(100% - calc(var(--button-box-shadow-spread-radius, .25rem) * 2));
  }
}
@media (max-aspect-ratio: .26) {
  .main-menu__button {
    grid-template-columns: 1fr;
  }
  .main-menu__button__text {
    display: none;
  }
}

/* src/styles/main-menu/index.css */

/* src/styles/loading/loading.css */
.loading {
  background: #000;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.loading.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.loading.game {
  z-index: 30;
}

/* src/styles/loading/animation/animation.css */
.loading__animation {
  width: 5rem;
  height: 5rem;
  display: inline-block;
  position: relative;
}
.loading__animation div {
  background: #fff;
  border-radius: 50%;
  width: .81rem;
  height: .81rem;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  position: absolute;
  top: 2rem;
}
.loading__animation div:first-child {
  animation: .6s infinite lds-ellipsis1;
  left: .5rem;
}
.loading__animation div:nth-child(2) {
  animation: .6s infinite lds-ellipsis2;
  left: .5rem;
}
.loading__animation div:nth-child(3) {
  animation: .6s infinite lds-ellipsis2;
  left: 2rem;
}
.loading__animation div:nth-child(4) {
  animation: .6s infinite lds-ellipsis3;
  left: 3.5rem;
}
.loading__animation div {
  animation-direction: normal !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(1.5rem);
  }
}

/* src/styles/loading/index.css */

/* src/styles/settings/settings.css */
.settings {
  gap: 1rem;
  height: 100%;
  padding: 0 1rem;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .settings {
    flex-direction: column-reverse;
  }
}

/* src/styles/settings/button/button.css */
.settings__button {
  min-width: 30vw;
}
@media (max-aspect-ratio: .8) {
  .settings__button {
    min-width: calc(100% - calc(var(--button-box-shadow-spread-radius, .25rem) * 2));
  }
}

/* src/styles/settings/controls/controls.css */
.settings__controls {
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1rem;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .settings__controls {
    padding-bottom: 1rem;
  }
}

/* src/styles/settings/options/options.css */
.settings__options {
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .settings__options {
    flex-grow: unset;
  }
}

/* src/styles/settings/index.css */

/* src/styles/saves/saves.css */
.saves {
  gap: 1rem;
  height: 100%;
  padding: 0 1rem;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .saves {
    flex-direction: column-reverse;
  }
}
@media (max-aspect-ratio: .26) {
  .saves {
    padding: 0 .1rem;
  }
}

/* src/styles/saves/button/button.css */
.saves__button {
  min-width: 30vw;
}
.saves__button-load {
  width: 100%;
  touch-action: auto !important;
}
.saves__button-reset {
  --button-box-shadow-spread-radius: .15rem;
  border-radius: .4rem;
  margin: 0;
}
@media (max-aspect-ratio: .8) {
  .saves__button {
    min-width: calc(100% - calc(var(--button-box-shadow-spread-radius, .25rem) * 2));
  }
  .saves__button-load {
    margin-bottom: 0;
  }
  .saves__button-reset {
    margin-top: .25rem;
  }
}
@media (max-aspect-ratio: .26) {
  .saves__button-load {
    flex-direction: column;
    display: flex;
  }
}

/* src/styles/saves/list/list.css */
.saves__list-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.saves__list {
  width: 100%;
  height: 80%;
  padding: var(--novely-saves-list-border-width, .875rem) 1rem;
  content-visibility: auto;
  border-radius: var(--novely-saves-list-border-radius, .875rem);
  background-color: var(--novely-saves-list-background-color, #ffffff57);
  flex-wrap: wrap;
  place-content: flex-start;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
  display: flex;
  overflow-x: hidden;
  overflow-y: scroll;
  touch-action: auto !important;
}
.saves__list::-webkit-scrollbar {
  width: var(--novely-saves-list-border-width, .875rem);
}
.saves__list::-webkit-scrollbar-track {
  background-color: var(--novely-scrollbar-track-bg-color, #ffe9f3);
  border-radius: var(--novely-scrollbar-track-border-radius, .438rem);
}
.saves__list::-webkit-scrollbar-thumb {
  background-color: var(--novely-scrollbar-thumb-bg-color, #ff66a8);
  border-radius: var(--novely-scrollbar-thumb-border-radius, .438rem);
}
.saves__list::-webkit-scrollbar-thumb:hover {
  background-color: var(--novely-scrollbar-thumb-hover-bg-color, #ff4596);
}
.saves__list--empty {
  color: var(--novely-saves-list-empty-color, black);
  place-content: center;
  align-items: center;
}
.saves__list-item {
  --saves-list-iframe-border-radius: .4rem;
  background-color: var(--novely-saves-list-item-background-color, #ffe9f3);
  border-radius: calc(.4rem + var(--saves-list-iframe-border-radius));
  flex-wrap: wrap;
  align-self: flex-start;
  gap: .375rem;
  width: max(22vmin, 33% - 1rem);
  padding: .4rem;
  display: flex;
}
@media only screen and (min-aspect-ratio: .8) and (pointer: coarse) {
  .saves__list-item {
    width: max(22vmin, 50% - 1rem);
  }
}
.saves__list-item__description {
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  width: 100%;
  display: flex;
}
.saves__list-item__iframe {
  -webkit-backdrop-filter: blur();
  backdrop-filter: blur();
  border-radius: var(--saves-list-iframe-border-radius);
  aspect-ratio: 8 / 5;
  pointer-events: none;
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}
.saves__list-item__load {
  cursor: pointer;
  width: 100%;
  position: relative;
}
.saves__list-item__overlay {
  z-index: 3;
  pointer-events: none;
  background-color: var(--novely-saves-list-overlay-item-background-color, var(--novely-saves-list-item-background-color, #ffe9f3));
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.saves__list-item__overlay-enter-active,
.saves__list-item__overlay-exit-active {
  transition: opacity .3s, transform .3s;
}
.saves__list-item__overlay-enter,
.saves__list-item__overlay-exit-to {
  opacity: 0;
}
@media (max-aspect-ratio: .8) {
  .saves__list {
    height: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
  }
  .saves__list-container {
    margin-top: 1rem;
  }
  .saves__list-item {
    flex-direction: column;
    width: 100%;
  }
}
@media (max-aspect-ratio: .26) {
  .saves {
    padding: 0 .1rem;
  }
  .saves__list {
    border-radius: var(--novely-saves-list-border-radius, .438rem);
  }
  .saves__list::-webkit-scrollbar {
    width: .438rem;
  }
  .saves__list::-webkit-scrollbar-track {
    border-radius: var(--novely-scrollbar-track-border-radius, .22rem);
  }
  .saves__list::-webkit-scrollbar-thumb {
    border-radius: var(--novely-scrollbar-thumb-border-radius, .22rem);
  }
}
@supports ((-moz-appearance: none)) {
  .saves__list {
    scrollbar-gutter: stable;
    scrollbar-color: var(--novely-scrollbar-thumb-bg-color, #ff66a8) var(--novely-scrollbar-track-bg-color, #ffcbe1);
    padding: 0;
  }
  .saves__list:active {
    scrollbar-color: var(--novely-scrollbar-thumb-hover-bg-color, #ff4596) var(--novely-scrollbar-track-bg-color, #ffcbe1);
  }
}

/* src/styles/saves/controls/controls.css */
.saves__controls {
  flex-flow: column wrap;
  align-items: center;
  padding-top: 1rem;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .saves__controls {
    justify-content: center;
    padding-bottom: 1rem;
  }
}

/* src/styles/saves/index.css */

/* src/styles/dialog-overview/dialog-overview.css */
.dialog-overview {
  background: #00000085;
  border: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dialog-overview[open] {
  display: flex;
}
.dialog-overview:modal {
  max-width: 100vw;
  max-height: 100vh;
}
.dialog-overview::backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.dialog-overview__head {
  color: #fff;
  border-bottom: var(--novely-px) solid #ffc7df;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 4rem;
  padding: .55rem;
  display: flex;
}
.dialog-overview__head > span {
  font-size: 1.25rem;
  line-height: 1.2;
}
.dialog-overview__body {
  width: 100%;
  height: calc(100vh - 4rem);
  padding: 0 var(--novely-saves-list-border-width, .675rem) 0 0;
  justify-content: center;
  align-items: baseline;
  display: flex;
  overflow-x: hidden;
  overflow-y: scroll;
}
.dialog-overview__body::-webkit-scrollbar {
  width: var(--novely-saves-list-border-width, .675rem);
}
.dialog-overview__body::-webkit-scrollbar-track {
  background-color: var(--novely-scrollbar-track-bg-color, #ffe9f3);
}
.dialog-overview__body::-webkit-scrollbar-thumb {
  background-color: var(--novely-scrollbar-thumb-bg-color, #ff66a8);
}
.dialog-overview__body::-webkit-scrollbar-thumb:hover {
  background-color: var(--novely-scrollbar-thumb-hover-bg-color, #ff4596);
}
.dialog-overview__list {
  border-collapse: separate;
  border-spacing: .75rem;
  width: 60%;
  padding: 1rem;
}
.dialog-overview__list-item {
  vertical-align: top;
  height: 1.2rem;
  font-size: 1.45rem;
}
.dialog-overview__list-item__name {
  color: #ed5c87;
}
.dialog-overview__list-item__text {
  color: #fff;
}
.dialog-overview__button-audio-control {
  color: #fff;
  width: 2cap;
  height: 2cap;
  box-shadow: 0 0 0 var(--novely-px) #0003;
  cursor: pointer;
  background-color: #00000017;
  border: none;
  border-radius: .2rem;
  justify-content: center;
  align-items: center;
  padding: .4rem;
  display: flex;
}
@media (max-aspect-ratio: .8) {
  .dialog-overview__list {
    width: 100%;
  }
}
@supports ((-moz-appearance: none)) {
  .dialog-overview__body {
    scrollbar-gutter: stable;
    scrollbar-color: var(--novely-scrollbar-thumb-bg-color, #ff66a8) var(--novely-scrollbar-track-bg-color, #ffcbe1);
    padding: 0;
  }
  .dialog-overview__body:active {
    scrollbar-color: var(--novely-scrollbar-thumb-hover-bg-color, #ff4596) var(--novely-scrollbar-track-bg-color, #ffcbe1);
  }
}
[data-dialog-overview-button] {
  display: none;
}

/* src/styles/dialog-overview/index.css */

/* src/styles/index.css */