ineffable-select-input {
  margin-bottom: calc(var(--v-space) * 2);
  display: block;
}

ineffable-select-input select {
  width: 100%;
}

html,
body {
  background-color: var(--background-color);
}

body {
  position: relative;
  margin: 0;
  height: 100dvh;
  accent-color: var(--accent-color);
}

a {
  color: var(--accent-color);
}

ineffable-radio-input {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: calc(var(--h-space) * 4);
  font-size: 10vmin;
}

ineffable-radio-input label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(var(--v-space) / 4);
  text-align: center;
}

ineffable-radio-input label input,
ineffable-radio-input label ineffable-div {
  display: block;
  margin: 0;
}

ineffable-radio-input label ineffable-div {
  width: 1em;
  height: 1em;
  line-height: 0.666;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: auto;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: 1.5;
  font-size-adjust: 0.5;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
input[type="radio"] {
  margin: 0;
}

input,
button,
textarea,
select {
  font: inherit;
}

/* Rhythm */
:root {
  --v-space: 1.5vw;
  --h-space: var(--v-space);

  @media screen and (orientation: landscape) {
    --v-space: 0.75vw;
    --h-space: var(--v-space);
  }
}

/* Text */
:root {
  --font-size: calc(var(--v-space) * 2.5);
  --heading-size: calc((var(--v-space) * 2.5) * 1.6);
}

/* Radii */
:root {
  /* innerRadius = outerRadius - distance */
  --outside-radius: 12px;
  --inside-radius: calc(var(--outside-radius) - (var(--v-space) * 2));
}

ineffable-content {
  display: block;
  overflow-x: hidden;
  position: relative;
}

ineffable-list {
  display: block;
  overflow: scroll;
  padding: 0;
}

ineffable-list-item,
ineffable-action-list-item,
ineffable-character-list-item,
ineffable-now-list-item {
  &:not(:last-of-type) {
    border-bottom: 1px dashed var(--list-item-text-color);
  }
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: calc(var(--v-space) * 2) 0;
  width: 100%;
  color: var(--list-item-text-color);
  text-wrap: balance;

  & > ineffable-svg {
    fill: var(--list-item-icon-color);
    aspect-ratio: 1/1;
    height: calc(var(--v-space) * 3.9);
  }
}

ineffable-character-list-item h-stack {
  margin: 0;
}

ineffable-now-list-item,
ineffable-action-list-item {
  display: flex;
  justify-content: space-between;
}

ineffable-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  min-height: 100dvh;
  line-height: 1;
  font-size: var(--font-size);

  & v-stack {
    position: relative;
    top: calc(var(--v-space) / 2);
    width: 100%;
  }
}

ineffable-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-content: space-between;
  justify-content: space-between;
  flex-direction: column;
  padding: calc(var(--v-space) * 2) calc(var(--h-space) * 2);
  line-height: 1.6;
  overflow: scroll;
}

ineffable-card-heading,
ineffable-card-subheading {
  font-family: system-ui, Helvetica, sans-serif;
  font-weight: 800;
}

ineffable-card-heading {
  display: block;
  margin-bottom: calc(var(--v-space) * 2);
  font-size: var(--heading-size);
  line-height: calc(var(--v-space) * 6);
  color: var(--card-heading-color);
  text-transform: capitalize;
}

ineffable-card-subheading {
  display: block;
  font-size: calc(var(--heading-size) * (5 / 6));
}

ineffable-card-paragraph {
  display: block;
  margin-bottom: calc(var(--v-space) * 2);
  margin-trim: block-end;
  color: var(--card-content-color);
}

ineffable-card-header {
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--v-space) calc(var(--v-space) * 2);
  font-size: var(--heading-size);
  text-shadow: none;
  height: 0 0 calc(100% - var(--h-space));
  margin-bottom: var(--v-space);

  & > ineffable-div {
    vertical-align: baseline;
    margin-top: 7px;
    line-height: 1.5;
    text-shadow: 0;
  }
}

ineffable-card-close {
  cursor: pointer;
  display: block;
  height: calc(var(--v-space) * 8);
  aspect-ratio: 1/1;
  position: absolute;
  z-index: 9001;
  top: var(--v-space);
  right: calc(var(--h-space));
  filter: var(--drop-shadow);
  scale: 75%;

  & > ineffable-svg > svg {
    fill: var(--color-danger);
  }
}

ineffable-card-section {
  margin-trim: block-end;

  &:not(:last-child) {
    margin-bottom: calc(var(--v-space) * 4);
  }
}

v-stack {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--v-space) var(--h-space);
  flex-direction: column;
  justify-content: center;
}

ineffable-icon-background {
  position: fixed;
  z-index: 1;
  width: calc((5 / 3) * min(100dvw, 100dvh));
  aspect-ratio: 1/1;
  top: 50dvh;
  left: 50dvw;
  transform: translate(-50%, -50%);
  opacity: 0.05;
  fill: var(--background-icon-color);
}

ineffable-avatar-preview {
  display: block;
  margin-bottom: calc(var(--v-space) * 4);
  min-width: 20%;
  font-size: 1000%;
  line-height: 100%;
  text-align: center;
}

@media screen and (orientation: landscape) {
  ineffable-avatar-preview {
    margin: auto;
  }
}

ineffable-game {
  overflow: scroll;
  display: block;
  min-height: 100dvh;
  color: var(--card-content-color);
  font-family: -apple-system-ui-serif, ui-serif, Georgia, serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

ineffable-inventory-list {
  display: block;

  &:nth-child(even) {
    background: var(--inventory-even-color);
  }
}

h-stack {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: var(--v-space) calc(var(--h-space) / 2);
}

ineffable-skills {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

ineffable-skill {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: space-between;
  width: 100%;

  &:nth-child(even) {
    background: var(--skills-even-color);
  }
}

ineffable-skill-label {
  font-weight: bold;
}

ineffable-svg > svg {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  fill: var(--icon-color);
}

ineffable-button > ineffable-svg > svg {
  fill: var(--button-icon-color);
}

ineffable-button[type="danger"] > ineffable-svg > svg {
  fill: var(--button-content-color-danger);
}

ineffable-date-time-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background-color: #241e1a;
  color: var(--progress-text-color);
  z-index: 500;
  display: flex;
  align-content: center;
  justify-content: center;
}

ineffable-date-time-overlay > ineffable-div {
  position: absolute;
  top: 60%;
  height: 40%;
  display: flex;
  flex-direction: column;
  text-align: center;
  text-transform: uppercase;
  line-height: 1;
  align-content: center;
  justify-content: center;
}

ineffable-date-time-overlay > ineffable-div > ineffable-div {
  transition: opacity 1s ease-in-out;
}

ineffable-date-time-overlay > ineffable-div > ineffable-div:first-child {
  font-size: 5vmin;
}

ineffable-date-time-overlay > ineffable-div > ineffable-div:last-child {
  font-size: 3vmin;
}

@media screen and (orientation: landscape) {
  ineffable-avatar-creator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
}

ineffable-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--v-space) * 2) calc(var(--h-space) * 2);
  width: 100%;
  cursor: pointer;
  border-radius: var(--inside-radius);
  background: var(--button-color);
  color: var(--button-content-color);
  text-align: center;
}

ineffable-button[type="danger"] {
  background: var(--button-color-danger);
  color: var(--button-content-color-danger);
}

ineffable-button[disabled] {
  opacity: 0.5;
}

ineffable-button[disabled] ineffable-button-content {
  cursor: not-allowed;
}

ineffable-button ineffable-svg {
  width: calc(var(--v-space) * 4);
  height: calc(var(--v-space) * 4);
}

ineffable-button ineffable-button-content:only-child {
  margin: auto;
}

ineffable-buttons {
  display: flex;
  margin: var(--h-space) 0;
  gap: var(--h-space);
}

ineffable-buttons ineffable-button ineffable-button-content {
  width: 100%;
}

ineffable-avatar {
  display: inline-block;
  scale: 175%;
  margin: calc(var(--v-space) * -1) calc(var(--h-space) * 2) 0
    calc(var(--h-space));
}

ineffable-stats {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  column-gap: var(--h-space);
}

ineffable-stat {
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--color-0);
  border-radius: var(--inside-radius);
}

ineffable-stat-label {
  font-weight: 800;
}

ineffable-season-wheel {
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

ineffable-season-wheel > ineffable-div {
  position: relative;
  width: 90vmin;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: var(--progress-glow);
  -webkit-filter: var(--progress-glow);
}

ineffable-season-wheel > ineffable-div > ineffable-div {
  width: calc(100% + 2px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 4px solid #241e1a;
  position: absolute;
  z-index: 1000;
}

ineffable-season-wheel > ineffable-div > ineffable-div > ineffable-img {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 17vmin;
  transform: translateX(-50%);
  z-index: 1000;
}

ineffable-season-wheel > ineffable-div > ineffable-img {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--shadow);
}

ineffable-day-part-wheel {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;

  --width: 58vmin;
}

ineffable-day-part-wheel > ineffable-div:first-child {
  position: relative;
  width: var(--width);
  overflow: hidden;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

ineffable-day-part-wheel > ineffable-div:last-child {
  position: absolute;
  width: calc(var(--width) + 4px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 8px solid #241e1a;
  z-index: 1000;
}

ineffable-day-part-wheel > ineffable-div > ineffable-img {
  position: absolute;
  display: block;
  width: 100%;
}

/* Color */

/* Interval */
:root {
  --0: calc(0 / 7);
  --1: calc(1 / 7);
  --2: calc(2 / 7);
  --3: calc(3 / 7);
  --4: calc(4 / 7);
  --5: calc(5 / 7);
  --6: calc(6 / 7);
  --7: calc(7 / 7);
}

/* RGBA */
:root {
  --color-0: rgba(
    calc(var(--0) * 255),
    calc(var(--0) * 255),
    calc(var(--0) * 255),
    var(--6)
  );
  --color-1: rgba(
    calc(var(--1) * 255),
    calc(var(--1) * 255),
    calc(var(--1) * 255),
    var(--6)
  );
  --color-2: rgba(
    calc(var(--2) * 255),
    calc(var(--2) * 255),
    calc(var(--2) * 255),
    var(--6)
  );
  --color-3: rgba(
    calc(var(--3) * 255),
    calc(var(--3) * 255),
    calc(var(--3) * 255),
    var(--6)
  );
  --color-4: rgba(
    calc(var(--4) * 255),
    calc(var(--4) * 255),
    calc(var(--4) * 255),
    var(--6)
  );
  --color-5: rgba(
    calc(var(--5) * 255),
    calc(var(--5) * 255),
    calc(var(--5) * 255),
    var(--6)
  );
  --color-6: rgba(
    calc(var(--6) * 255),
    calc(var(--6) * 255),
    calc(var(--6) * 255),
    var(--6)
  );
  --color-7: rgba(
    calc(var(--7) * 255),
    calc(var(--7) * 255),
    calc(var(--7) * 255),
    var(--6)
  );
  --color-accent: rgb(24, 121, 189);
  --color-danger: rgb(223, 72, 44);
}

/* Dark Mode RGBA */
@media (prefers-color-scheme: dark) {
  :root {
    --color-0: rgba(
      calc(var(--7) * 255),
      calc(var(--7) * 255),
      calc(var(--7) * 255),
      var(--6)
    );
    --color-1: rgba(
      calc(var(--6) * 255),
      calc(var(--6) * 255),
      calc(var(--6) * 255),
      var(--6)
    );
    --color-2: rgba(
      calc(var(--5) * 255),
      calc(var(--5) * 255),
      calc(var(--5) * 255),
      var(--6)
    );
    --color-3: rgba(
      calc(var(--4) * 255),
      calc(var(--4) * 255),
      calc(var(--4) * 255),
      var(--6)
    );
    --color-4: rgba(
      calc(var(--3) * 255),
      calc(var(--3) * 255),
      calc(var(--3) * 255),
      var(--6)
    );
    --color-5: rgba(
      calc(var(--2) * 255),
      calc(var(--2) * 255),
      calc(var(--2) * 255),
      var(--6)
    );
    --color-6: rgba(
      calc(var(--1) * 255),
      calc(var(--1) * 255),
      calc(var(--1) * 255),
      var(--6)
    );
    --color-7: rgba(
      calc(var(--0) * 255),
      calc(var(--0) * 255),
      calc(var(--0) * 255),
      var(--6)
    );
  }
}

/* Dark Mode Display P3 */
@media (color-gamut: p3) and (prefers-color-scheme: dark) {
  :root {
    --color-0: color(display-p3 var(--7) var(--7) var(--7) / var(--6));
    --color-1: color(display-p3 var(--6) var(--6) var(--6) / var(--6));
    --color-2: color(display-p3 var(--5) var(--5) var(--5) / var(--6));
    --color-3: color(display-p3 var(--4) var(--4) var(--4) / var(--6));
    --color-4: color(display-p3 var(--3) var(--3) var(--3) / var(--6));
    --color-5: color(display-p3 var(--2) var(--2) var(--2) / var(--6));
    --color-6: color(display-p3 var(--1) var(--1) var(--1) / var(--6));
    --color-7: color(display-p3 var(--0) var(--0) var(--0) / var(--6));
  }
}

@media (color-gamut: p3) {
  :root {
    /* General */
    --background-color: var(--color-7);
    --icon-color: var(--color-0);
    --background-icon-color: var(--color-2);
    --accent-color: var(--color-accent);

    /* Card */
    --card-heading-color: var(--color-0);
    --card-content-color: var(--color-0);

    /* List */
    --list-item-text-color: var(--color-0);
    --list-item-icon-color: var(--color-0);

    /* Inventory */
    --inventory-even-color: var(--color-6);

    /* Skills */
    --skills-even-color: var(--color-6);

    /* Button */
    --button-icon-color: var(--color-7);
    --button-content-color: var(--color-7);
    --button-color: var(--color-0);
    --button-content-color-danger: var(--color-0);
    --button-color-danger: var(--color-danger);

    /* Progression - Specified this way to prevent dark mode issues */
    --progress-text-color: color(display-p3 var(--6) var(--6) var(--6));
  }
}

ineffable-text-input input {
  display: block;
  box-sizing: border-box;
  margin-bottom: calc(var(--v-space) * 2);
  width: 100%;

  &:invalid {
    outline: 2px solid var(--danger-color);
  }
}