/* bootstrap.css */

/* -------------------------------------------------- */
/* Bootstrap Styles */
/* -------------------------------------------------- */

:root {
  /* color: #007bff; */
  --blue: #0d6efd;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #d63384;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #198754;
  --teal: #20c997;
  --cyan: #0dcaf0;

  --white: #fff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-925: #1b1b1b; /* Neutral dark gray, slightly lighter than 950 */
  --gray-950: #181818; /* Pure dark gray, balanced */
  --gray-975: #121212; /* Almost black but not too deep */
  --gray-990: #0a0a0a; /* Very close to black, no tint */
  --black: #000;

  --primary: var(--blue);
  --secondary: var(--gray-600);
  --success: var(--green);
  --info: var(--cyan);
  --warning: var(--yellow);
  --danger: var(--red);
  --light: var(--gray-100);
  --dark: var(--gray-900);
}

.blue {
  color: var(--blue);
}
.indigo {
  color: var(--indigo);
}
.purple {
  color: var(--purple);
}
.pink {
  color: var(--pink);
}
.red {
  color: var(--red);
}
.orange {
  color: var(--orange);
}
.yellow {
  color: var(--yellow);
}
.green {
  color: var(--green);
}
.teal {
  color: var(--teal);
}
.cyan {
  color: var(--cyan);
}

.primary {
  color: var(--primary);
}
.secondary {
  color: var(--secondary);
}
.success {
  color: var(--success);
}
.info {
  color: var(--info);
}
.warning {
  color: var(--warning);
}
.danger {
  color: var(--danger);
}
.light {
  color: var(--light);
}
/* .dark {
  color: var(--dark);
} */

.primary-bg {
  background-color: var(--primary);
}
.secondary-bg {
  background-color: var(--secondary);
}
.success-bg {
  background-color: var(--success);
}
.info-bg {
  background-color: var(--info);
}
.warning-bg {
  background-color: var(--warning);
}
.danger-bg {
  background-color: var(--danger);
}
.light-bg {
  background-color: var(--light);
}
.dark-bg {
  background-color: var(--dark);
}

.button-primary {
  background-color: var(--primary);
  color: var(--white);
}
.button-secondary {
  background-color: var(--secondary);
  color: var(--white);
}
.button-success {
  background-color: var(--success);
  color: var(--white);
}
.button-info {
  background-color: var(--info);
  color: var(--white);
}
.button-warning {
  background-color: var(--warning);
  color: var(--white);
}
.button-danger {
  background-color: var(--danger);
  color: var(--white);
}
.button-light {
  background-color: var(--light);
  color: var(--white);
}
.button-dark {
  background-color: var(--dark);
  color: var(--white);
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.text-danger {
  color: #721c24;
  /* background-color: #f8d7da; */
}
.text-warning {
  color: #856404;
  /* background-color: #fff3cd; */
}
.text-success {
  color: #155724;
  color: var(--ajs-code-color);
  /* background-color: #d4edda; */
}
/* dialog.css */

/* -------------------------------------------------- */
/* AdventureJS dialog */
/* -------------------------------------------------- */

:root {
  --ajs-dialog-width: 100%;
  --ajs-dialog-height: 100%;
  --ajs-dialog-min-width: 480px;
  --ajs-dialog-min-height: 600px;
  --ajs-dialog-max-width: 100%;
  --ajs-dialog-max-height: 100%;
  --ajs-dialog-outer-width: calc(100% - 4%);
  --ajs-dialog-outer-height: calc(100% - 6%);
  --ajs-dialog-outer-margin: 3% 2%;
  --ajs-dialog-content-padding: 1em;

  --ajs-dialog-padding: 2% 2%;
  --ajs-dialog-width: 96%;
  --ajs-dialog-max-width: 96%;
  --ajs-dialog-height: 96%;
  --ajs-dialog-max-height: 96%;

  /* MODAL VERSION */
  --ajs-modal-dialog-width: 100%;
  --ajs-modal-dialog-height: 100%;
  --ajs-modal-dialog-min-width: 480px;
  --ajs-modal-dialog-min-height: 600px;
  --ajs-modal-dialog-max-width: 100%;
  --ajs-modal-dialog-max-height: 100%;
  --ajs-modal-dialog-outer-width: 100%;
  --ajs-modal-dialog-outer-height: 100%;
  --ajs-modal-dialog-content-padding: 1em;

  --ajs-modal-dialog-padding: 5vh 5vw;
  --ajs-modal-dialog-width: 90vw;
  --ajs-modal-dialog-max-width: 90vw;
  --ajs-modal-dialog-height: 90vh;
  --ajs-modal-dialog-max-height: 90vh;
}

/* -------------------------------------------------- */
/* dialog colors */
/* -------------------------------------------------- */

html[data-theme="light"] {
  --ajs-dialog-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 80%,
    transparent
  );
  --ajs-dialog-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-color: var(--ajs-color);
  --ajs-dialog-emphasis-color: var(--blue);
  --ajs-dialog-option-descriptions-background-color: var(
    --ajs-background-color
  );
  --ajs-dialog-option-descriptions-border-color: var(
    --ajs-dialog-emphasis-color
  );
  --ajs-dialog-outer-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-active-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-border-color: var(--blue);
  --ajs-dialog-radio-tab-color: var(--ajs-color);
  --ajs-dialog-title-background-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-title-color: var(--ajs-color);
  --ajs-restore-from-browser-listbox-label-background-color: #fff;
  --ajs-restore-from-browser-listbox-label-color: var(--blue);
  --ajs-restore-from-file-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    black
  );
  --ajs-restore-from-file-input-border-color: rgba(0, 123, 255, 0.25);
  --ajs-restore-from-file-input-color: var(--ajs-color);
  --ajs-save-dialog-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    black
  );
  --ajs-save-dialog-input-border-color: var(--ajs-color);
  --ajs-save-dialog-input-color: var(--ajs-color);
  --ajs-ul-listbox-background-color: #fff;
  --ajs-ul-listbox-border-color: #ddd;
  --ajs-ul-listbox-option-focused-background-color: var(--blue);
  --ajs-ul-listbox-option-focused-color: #fff;

  --ajs-hint-unrevealed-background-color: #ff0000;
  --ajs-hint-unrevealed-color: var(--ajs-dialog-color);
}

html[data-theme="dark"] {
  --ajs-dialog-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 80%,
    transparent
  );
  --ajs-dialog-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-color: var(--ajs-color);
  --ajs-dialog-emphasis-color: var(--blue);
  --ajs-dialog-option-descriptions-background-color: var(
    --ajs-background-color
  );
  --ajs-dialog-option-descriptions-border-color: var(--gray-600);
  --ajs-dialog-outer-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-border-color: var(--gray-600);
  --ajs-dialog-radio-tab-color: var(--ajs-color);
  --ajs-dialog-title-background-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-title-color: var(--ajs-color);
  --ajs-display-background-color: #ddd;
  --ajs-restore-from-browser-listbox-label-background-color: #fff;
  --ajs-restore-from-browser-listbox-label-color: var(--blue);
  --ajs-restore-from-file-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    white
  );
  --ajs-restore-from-file-input-border-color: rgba(0, 123, 255, 0.25);
  --ajs-restore-from-file-input-color: var(--ajs-color);
  --ajs-save-dialog-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    white
  );
  --ajs-save-dialog-input-border-color: var(--ajs-color);
  --ajs-save-dialog-input-color: var(--ajs-color);
  --ajs-ul-listbox-background-color: #fff;
  --ajs-ul-listbox-border-color: #ddd;
  --ajs-ul-listbox-option-focused-background-color: var(--blue);
  --ajs-ul-listbox-option-focused-color: #fff;

  --ajs-hint-unrevealed-background-color: #ff0000;
  --ajs-hint-unrevealed-color: var(--ajs-dialog-color);
}

html[data-theme="crt"] {
  --ajs-dialog-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 80%,
    transparent
  );
  --ajs-dialog-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-color: var(--ajs-color);
  --ajs-dialog-emphasis-color: var(--ajs-crt-green);
  --ajs-dialog-option-descriptions-background-color: var(
    --ajs-background-color
  );
  --ajs-dialog-option-descriptions-border-color: var(--gray-600);
  --ajs-dialog-outer-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-border-color: var(--gray-600);
  --ajs-dialog-radio-tab-color: var(--ajs-color);
  --ajs-dialog-title-background-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-title-color: var(--ajs-background-color);
  --ajs-display-background-color: #ddd;
  --ajs-restore-from-browser-listbox-label-background-color: #fff;
  --ajs-restore-from-browser-listbox-label-color: var(--ajs-crt-green);
  --ajs-restore-from-file-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    white
  );
  --ajs-restore-from-file-input-border-color: rgba(0, 123, 255, 0.25);
  --ajs-restore-from-file-input-color: var(--ajs-color);
  --ajs-save-dialog-input-background-color: color-mix(
    in srgb,
    var(--ajs-background-color) 90%,
    white
  );
  --ajs-save-dialog-input-border-color: var(--ajs-color);
  --ajs-save-dialog-input-color: var(--ajs-color);
  --ajs-ul-listbox-background-color: #fff;
  --ajs-ul-listbox-border-color: #ddd;
  --ajs-ul-listbox-option-focused-background-color: var(--blue);
  --ajs-ul-listbox-option-focused-color: #fff;

  --ajs-hint-unrevealed-background-color: var(--ajs-dialog-color);
  --ajs-hint-unrevealed-color: var(--ajs-background-color);
}

/* Example: Custom themes (users can define these in UI) */
html[data-theme="solarized"] {
  --background-color: #fdf6e3;
  --text-color: #657b83;
}

html[data-theme="high-contrast"] {
  --background-color: #000000;
  --text-color: #ffcc00;
}

.ajs-dialogs {
}

.ajs-dialog {
  /* UNIVERSAL */
  color: var(--ajs-dialog-color);
  background-color: var(--ajs-dialog-background-color);
  transition:
    opacity 0.25s ease-in-out,
    visibility 0.25s ease-in-out;

  /* NON-MODAL VERSION */
  position: absolute;
  width: var(--ajs-dialog-width);
  height: var(--ajs-dialog-height);
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: var(--ajs-dialog-width);
  max-width: var(--ajs-dialog-max-width);
  height: var(--ajs-dialog-height);
  max-height: var(--ajs-dialog-max-height);
  padding: var(--ajs-dialog-padding);

  /* MODAL VERSION */
  /* width: var(--ajs-modal-dialog-width); */
  /* max-width overrides browser */
  /* max-width: var(--ajs-modal-dialog-max-width);  */
  /* height: var(--ajs-modal-dialog-height); */
  /* max-height overrides browser */
  /* max-height: var(--ajs-modal-dialog-max-height);  */
  /* padding: var(--ajs-modal-dialog-padding); */
}

.ajs-dialog.active {
  /* NON-MODAL VERSION */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  z-index: 9;
}

.ajs-dialog-outer {
  width: var(--ajs-dialog-outer-width);
  height: var(--ajs-dialog-outer-height);
  background-color: var(--ajs-dialog-outer-background-color);
  border-radius: 8px;
  border: 1px solid var(--ajs-dialog-border-color);
  box-shadow: 0px 0px 20px 0px black;

  /* NON-MODAL VERSION */
  margin: var(--ajs-dialog-outer-margin);
}

.ajs-dialog-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.ajs-hint-dialog .ajs-dialog-inner {
  /* hints */
  max-height: 100%;
  overflow: hidden;
}

.ajs-restart-dialog-inner {
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.ajs-dialog-title {
  color: var(--ajs-dialog-title-color);
  text-transform: uppercase;
  font-family: system-ui;
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  background-color: var(--ajs-dialog-title-background-color);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  margin-top: 0;
}

.ajs-save-dialog-input-container {
  position: absolute;
  bottom: calc(1em + 50px);
  left: 1em;
  width: calc(100% - 2em);
  text-align: center;
}

.ajs-save-dialog-input-label {
  margin-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}

.ajs-save-dialog-input {
  cursor: pointer;
  padding: 8px 5px;
  width: 300px;
  color: var(--ajs-save-dialog-input-color);
  border: 1px solid var(--ajs-save-dialog-input-border-color);
  font-size: 0.9rem;
  text-align: center;
  background-color: var(--ajs-save-dialog-input-background-color);
  margin-top: 0.5em;
}

.ajs-dialog-emphasis {
  font-weight: bold;
  font-style: italic;
}

.ajs-dialog-radio-tab-container {
  display: flex;
  flex-direction: row;
}

.ajs-dialog-radio-tab {
  display: flex;
  opacity: 0.35;
  padding: 0.5em 0.75em;
  z-index: 1;
  color: var(--ajs-dialog-radio-tab-color);
  background-color: var(--ajs-dialog-radio-tab-background-color);
  border-top: 1px solid var(--ajs-dialog-radio-tab-border-color);
  border-left: 1px solid var(--ajs-dialog-radio-tab-border-color);

  /* font-size: 0.9rem; */
}
.ajs-dialog-radio-tab:first-of-type {
  border-top-left-radius: 0.5em;
}
.ajs-dialog-radio-tab:last-of-type {
  border-top-right-radius: 0.5em;
  border-right: 1px solid var(--ajs-dialog-radio-tab-border-color);
}
.ajs-dialog-radio-tab input[type="radio" i] {
  margin-right: 0.25em;
}

.ajs-dialog-radio-tab.active,
.ajs-dialog-radio-tab:has(input:checked) {
  opacity: 1;
  cursor: default;
  z-index: 2;
}

.ajs-dialog-option-descriptions {
  padding: 0.5em;
  margin-top: -2px;
  border: 1px solid var(--ajs-dialog-option-descriptions-border-color);
  background-color: var(--ajs-dialog-option-descriptions-background-color);
  z-index: 1;
  position: relative;
}

.ajs-dialog-option-selection {
  display: none;
  position: absolute;
  bottom: 5em;
  transform: translateX(-50%);
  left: 50%;
}

.ajs-dialog-option-selection.active {
  display: block;
}

.ajs-dialog-button-container {
  position: absolute;
  bottom: 1em;
  left: 1em;
  text-align: center;
  width: calc(100% - 2em);
  height: 3em;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.ajs-button {
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  text-decoration: none;
  display: inline-block;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  text-align: center;
  opacity: 0.7;
  border-radius: 0.25rem;

  font-family: var(--ajs-font-family);
  font-size: var(--ajs-font-size);
  line-height: var(--ajs-line-height);
}

.ajs-dialog-button {
  line-height: 1.5;
  padding: 0.25rem 0.5rem;

  /* font-size: 1.1rem; */
}

.ajs-hint-button {
  line-height: 1.5;
  font-size: 0.8rem;
  padding: 1px 6px;
  text-transform: uppercase;
}

.ajs-hint-button b {
  font-size: 1.2em;
  font-weight: bold;
}

.ajs-dialog-button:first-of-type {
  margin-right: 0.5em;
}

.ajs-dialog-button:last-of-type {
  margin-left: 0.5em;
}

.ajs-button:hover:not(disabled),
.ajs-button:focus:not(disabled) {
  opacity: 1;
}

.ajs-button:disabled,
.ajs-button.inactive {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.ajs-dialog-button:not(.inactive):hover {
}
.ajs-button:not(.inactive):active {
  opacity: 1;
}

.ajs-cancel-button {
}

.ajs-save-button {
}

.ajs-dialog-option-description {
  font-family: system-ui;
}
.ajs-dialog-option-description p {
  margin-bottom: 1em;
}

/* -------------------------------------------------- */
/* RESTART DIALOG */
/* -------------------------------------------------- */

.ajs-restart-button {
  background-color: var(--ajs-nightdarkgreen);
  color: var(--ajs-color);
  font-size: 1em;
  /* font-weight: bold; */
  /* padding: 1em 1.25em; */
  /* border-radius: 15px; */
}
.ajs-restart-button:hover,
.ajs-restart-button:active {
  background-color: var(--ajs-nightlightgreen);
  color: var(--ajs-color);
  text-decoration: none;
}

/* -------------------------------------------------- */
/* RESTORE DIALOG */
/* -------------------------------------------------- */

.ajs-restore-from-file-input {
  width: calc(100% - var(--ajs-dialog-content-padding) * 2);
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.75em;
  font-size: 1rem;
  line-height: 1.5;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  text-decoration: none;
  border: 1px solid transparent;
  font-size: 0.9rem;
  position: relative;
  border-radius: 0.25rem;
  background-color: var(--ajs-restore-from-file-input-background-color);
  border-color: var(--ajs-restore-from-file-input-border-color);
  color: var(--ajs-restore-from-file-input-color);
}

.ajs-restore-from-file-input-container {
  width: calc(100% - var(--ajs-dialog-content-padding) * 2);
  text-align: center;
}

:not(.ajs-file-reader-unsupported) .ajs-file-reader-unsupported,
.ajs-file-reader-unsupported .ajs-file-reader-required {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.ajs-file-reader-unsupported .ajs-file-reader-unsupported {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ajs-restore-from-browser-listbox-container {
  width: 80%;
}
.ajs-restore-from-browser-listbox-label {
  font-family: system-ui;
  text-align: left;
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 4px;
  /* color: var(--ajs-restore-from-browser-listbox-label-color); */
  /* background-color: var(--ajs-restore-from-browser-listbox-label-background-color); */
}

ul.listbox {
  max-height: 10em !important;
  overflow-y: auto;
  position: relative;
  width: 100%;
  border: 1px solid var(--ajs-ul-listbox-border-color);
  overflow-y: auto;
  overflow-x: hidden;
}
[role="listbox"] {
  min-height: 10em !important;
  max-height: 10em !important;
  padding: 0;
  /* background: var(--ajs-ul-listbox-background-color); */
  border: 1px solid var(--ajs-ul-listbox-border-color);
}
[role="option"] {
  padding-left: 1em;
  font-size: 0.9rem;
  cursor: pointer;
}
[role="option"].focused {
  background: var(--ajs-ul-listbox-option-focused-background-color);
  color: var(--ajs-ul-listbox-option-focused-color);
}

.ajs-dialog-content {
  flex: 1;
  padding: var(--ajs-dialog-content-padding);
  position: relative;
}
.tutorial .ajs-dialog-content {
  padding-bottom: 3rem;
}
.ajs-hint-dialog .ajs-dialog-content {
  overflow: scroll;
  /* max-height: calc(100% - 3rem); */
}

.ajs-hint-list-container {
  overflow: scroll;
  scroll-behavior: smooth;
  max-height: calc(100%);
}

.ajs-hint-introduction {
  margin-bottom: var(--ajs-hint-pad-v);
}

.ajs-hint-list {
}

.ajs-hint-group {
  padding-left: var(--ajs-hint-pad-h);
  margin-bottom: var(--ajs-hint-pad-v);
  border-top: thin solid var(--ajs-border-color);
  padding-top: var(--ajs-hint-pad-v);
}

:root {
  --ajs-hint-pad: 1em;
  --ajs-hint-pad-h: 1em;
  --ajs-hint-pad-v: 0.5em;
}

.ajs-hint-description {
  margin-left: var(--ajs-hint-pad-h);
  margin-bottom: var(--ajs-hint-pad-v);
  margin-top: var(--ajs-hint-pad-v);
}

.ajs-hinteractive {
  margin-left: var(--ajs-hint-pad-h);
}

.ajs-hinteractive + .ajs-hint-group {
  margin-top: var(--ajs-hint-pad-v);
}

.ajs-nested-hints > .ajs-hint.revealed:has(~ .ajs-hinteractive) {
  margin-bottom: calc(var(--ajs-hint-pad) * 0.5);
}

.ajs-hint-button {
}

.ajs-hint-button .bold {
  font-size: 1.1em;
}

.ajs-nested-hints {
}

.ajs-hint-unrevealed {
  /* these don't apply to svg */
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  vertical-align: top;
  margin-left: 0.5em;
  padding-right: 1px;
  background: var(--ajs-hint-unrevealed-background-color);

  /* these apply to svg */
  color: var(--ajs-hint-unrevealed-color);
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  font-size: 10px;
  /* letter-spacing: -1px; */
}
.ajs-hint-unrevealed svg {
  width: 16px;
  height: 16px;
}
.ajs-hint-unrevealed svg circle {
  fill: var(--ajs-hint-unrevealed-background-color);
}
.ajs-hint-unrevealed svg text {
  fill: var(--ajs-hint-unrevealed-color);
  white-space: pre;
}
.ajs-hint-unrevealed svg text tspan {
}

.ajs-hint-unrevealed[data-unrevealed="0"] {
  display: none;
}

.ajs-hint {
  margin-left: var(--ajs-hint-pad);
  display: none;
}

.ajs-hint.revealed {
  display: block;
}

.ajs-hint:not(:last-of-type) {
  margin-bottom: var(--ajs-hint-pad-v);
}

details.ajs-hint-group[open] > summary {
  margin-bottom: var(--ajs-hint-pad-v);
}

/* details.ajs-hint-group::details-content {
  height:0;
  overflow:clip;
  transition:height .3s ease, content-visibility .3s allow-discrete
} */
/* @supports(interpolate-size: allow-keywords) {
  :root {
    interpolate-size:allow-keywords
  }
  details.ajs-hint-group[open]::details-content {
    height:auto
  }
} */
/* display.css */

/*
.ajs-container
└── .ajs-display
    ├── .ajs-titlebar
    ├── .ajs-statusbar
    └── .ajs-content
    |   ├── .ajs-region-left
    |   ├── .ajs-region-header
    |   ├── .ajs-region-main
    |   |   ├── .ajs-output-container
    |   |   └── .ajs-input-container
    |   ├── .ajs-region-footer
    |   └── .ajs-region-right
    ├── .ajs-overlays
    └── .ajs-dialogs
*/

/* -------------------------------------------------- */
/* how to add a custom font face */
/* -------------------------------------------------- */

/* 
@font-face {
  font-family: "droid_sans_monoregular";
  src: url("/fonts/DroidSansMono-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
} 
*/

/* -------------------------------------------------- */
/* noscript */
/* -------------------------------------------------- */

.noscript-message {
  position: fixed;
  width: 100%;
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: var(--ajs-noscript-background-color);
  color: var(--ajs-noscript-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ajs-noscript-background-color: var(--ajs-dark-background-color);
    --ajs-noscript-color: var(--ajs-dark-color);
  }
}

/* -------------------------------------------------- */
/* AdventureJS main display */
/* -------------------------------------------------- */

:root {
  --ajs-actual-footer-height: 0;
  --ajs-actual-footer-left: 0;
  --ajs-actual-footer-top: 0;
  --ajs-actual-footer-width: 100%;
  --ajs-actual-container-height: 0;
  --ajs-actual-container-left: 0;
  --ajs-actual-container-top: 0;
  --ajs-actual-container-width: 100%;
  --ajs-actual-content-height: 0;
  --ajs-actual-content-left: 0;
  --ajs-actual-content-top: 0;
  --ajs-actual-content-width: 100%;
  --ajs-actual-input-height: 0;
  --ajs-actual-input-left: 0;
  --ajs-actual-input-top: 0;
  --ajs-actual-input-width: 100%;
  --ajs-actual-leftregion-height: 0;
  --ajs-actual-leftregion-left: 0;
  --ajs-actual-leftregion-top: 0;
  --ajs-actual-leftregion-width: 100%;
  --ajs-actual-output-height: 0;
  --ajs-actual-output-left: 0;
  --ajs-actual-output-top: 0;
  --ajs-actual-output-width: 100%;
  --ajs-actual-rightregion-height: 0;
  --ajs-actual-rightregion-left: 0;
  --ajs-actual-rightregion-top: 0;
  --ajs-actual-rightregion-width: 100%;
  --ajs-actual-statusbar-height: 0;
  --ajs-actual-statusbar-left: 0;
  --ajs-actual-statusbar-top: 0;
  --ajs-actual-statusbar-width: 100%;
  --ajs-actual-titlebar-height: 0;
  --ajs-actual-titlebar-left: 0;
  --ajs-actual-titlebar-top: 0;
  --ajs-actual-titlebar-width: 100%;
  --ajs-actual-header-height: 0;
  --ajs-actual-header-left: 0;
  --ajs-actual-header-top: 0;
  --ajs-actual-header-width: 100%;
  --ajs-actual-ui-height: 0;
  --ajs-actual-ui-left: 0;
  --ajs-actual-ui-top: 0;
  --ajs-actual-ui-width: 100%;
  --ajs-bold-font: sans-serif;
  --ajs-container-border: 1px solid var(--ajs-container-border-color);
  --ajs-container-height: 480px;
  --ajs-container-max-height: 100dvh;
  --ajs-container-max-width: 100dvw;
  --ajs-container-min-height: 420px;
  --ajs-container-min-width: 420px;
  --ajs-container-width: 600px;
  --ajs-content-grid-areas: "left header right" "left main right"
    "left footer right";
  /* "header header header" "left main right" "footer footer footer" */
  --ajs-content-grid-column-1: auto;
  --ajs-content-grid-column-2: minmax(0, 1fr);
  --ajs-content-grid-column-3: auto;
  --ajs-content-grid-row-1: auto;
  --ajs-content-grid-row-2: minmax(0, 1fr);
  --ajs-content-grid-row-3: auto;
  --ajs-dark-background-color: #1a1919;
  --ajs-dark-color: #f8f9fa;
  --ajs-debug-font-size: initial;
  --ajs-debug-line-height: initial;
  --ajs-display-height: 480px;
  --ajs-display-max-height: 100%;
  --ajs-display-max-width: 100%;
  --ajs-display-min-height: 480px;
  --ajs-display-min-width: 420px;
  --ajs-display-width: 100%;
  --ajs-region-border: 2px solid var(--ajs-region-border-color);
  --ajs-font-family: sans-serif;
  --ajs-font-size: 0.9em;
  --ajs-input-height: 40px;
  --ajs-light-background-color: #f8f9fa;
  --ajs-light-color: #181818;
  --ajs-line-height: 1.25em;
  --ajs-noscript-background-color: var(--ajs-light-background-color);
  --ajs-noscript-color: var(--ajs-light-color);
  --ajs-output-height: calc(
    var(--ajs-display-height) - var(--ajs-titlebar-height) -
      var(--ajs-statusbar-height) - var(--ajs-input-height)
  );
  --ajs-statusbar-height: 50px;
  --ajs-titlebar-height: 30px;
  --ajs-widget-button-border: 1px solid var(--ajs-widget-button-border-color);
  --ajs-widget-font-size: 11px;
  --ajs-widget-font-weight: bold;
  --ajs-widget-title: "";
}

/* -------------------------------------------------- */
/* light theme */
/* -------------------------------------------------- */

html[data-theme="light"] {
  --ajs-background-color: var(--ajs-light-background-color);
  --ajs-body-background-color: #c0c0c0;
  --ajs-body-color: #111;
  --ajs-border-color: #444;
  --ajs-code-color: #599aff;
  --ajs-color: var(--ajs-light-color);
  --ajs-compass-direction-disabled-color: rgba(105, 222, 70, 0.25);
  --ajs-compass-direction-enabled-active-color: #69de46;
  --ajs-compass-direction-enabled-color: #42b020;
  --ajs-compass-direction-enabled-locked-color: #ff0000;
  --ajs-compass-direction-enabled-locked-hover-color: #870000;
  --ajs-compass-direction-enabled-unused-color: #fff;
  --ajs-compass-label-color: #444;
  --ajs-compass-label-enabled-color: #000;
  --ajs-compass-label-enabled-hover-color: #000;
  --ajs-compass-label-enabled-locked-color: #000;
  --ajs-compass-label-enabled-locked-hover-color: #870000;
  --ajs-container-background-color: #fff;
  --ajs-container-border-color: #444;
  --ajs-display-a-color: forestgreen;
  --ajs-display-background-color: #fff;
  --ajs-display-color: var(--ajs-light-color);
  --ajs-display-debug-color: #ff9700;
  --ajs-display-debug0-background-color: #ff9700;
  --ajs-display-debug0-color: #ff9700;
  --ajs-display-debug0-verb-color: #ff0000;
  --ajs-display-hook-color: #4bc4f7;
  --ajs-display-hook-ov-color: #d1e168;
  --ajs-display-hook0-background-color: #4bc4f7;
  --ajs-display-hook0-color: var(--ajs-dark-background-color);
  --ajs-display-loading-border-color: #f3f3f3;
  --ajs-display-loading-border-top-color: #3498db;
  --ajs-display-verbaction-background-color: #4fcbff;
  --ajs-display-verbphase-background-color: #31f0bf;
  --ajs-display-verbreaction-background-color: #83a9fb;
  --ajs-region-background-color: #dbe8db;
  --ajs-region-border-color: #999;
  --ajs-input-background-color: #ecf6e8;
  --ajs-input-color: #000;
  --ajs-light: #dedede;
  --ajs-link-color: forestgreen;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-statusbar-background-color: black;
  --ajs-statusbar-color: #fff;
  --ajs-titlebar-background-color: #393939;
  --ajs-titlebar-color: var(--ajs-statusbar-color);
  --ajs-widget-background-color: var(--ajs-region-background-color);
  --ajs-widget-border-color: #999;
  --ajs-widget-button-background-color: #bfeabb;
  --ajs-widget-button-border-color: #65b665;
  --ajs-widget-button-color: var(--ajs-display-color);
  --ajs-widget-button-hover-background-color: #daffd7;
  --ajs-widget-button-hover-color: #1a1919;
  --ajs-widget-title-color: var(--ajs-display-color);
  --ajs-widget-title-background-color: #1a1919;
  --ajs-scrollthumb-background-color: green;
}

/* -------------------------------------------------- */
/* dark theme */
/* -------------------------------------------------- */

html[data-theme="dark"] {
  --ajs-background-color: var(--ajs-dark-background-color);
  --ajs-body-background-color: #000;
  --ajs-body-color: #eee;
  --ajs-border-color: #444;
  --ajs-code-color: #599aff;
  --ajs-color: var(--ajs-dark-color);
  --ajs-compass-direction-disabled-color: rgba(0, 180, 0, 0.25);
  --ajs-compass-direction-enabled-active-color: #00b300;
  --ajs-compass-direction-enabled-color: #007700;
  --ajs-compass-direction-enabled-locked-color: #b30000;
  --ajs-compass-direction-enabled-locked-hover-color: #b30000;
  --ajs-compass-direction-enabled-unused-color: #333;
  --ajs-compass-label-color: #fff;
  --ajs-compass-label-enabled-color: #fff;
  --ajs-compass-label-enabled-hover-color: #000;
  --ajs-compass-label-enabled-locked-color: #fff;
  --ajs-compass-label-enabled-locked-hover-color: #fff;
  --ajs-container-background-color: #111;
  --ajs-container-border-color: #444;
  --ajs-display-a-color: chartreuse;
  --ajs-display-background-color: #262626; /* #2c2c2c; */
  --ajs-display-color: var(--ajs-dark-color);
  --ajs-display-debug-color: #ff9700;
  --ajs-display-debug0-background-color: #ff9700;
  --ajs-display-debug0-color: #ff9700;
  --ajs-display-debug0-verb-color: #ff0000;
  --ajs-display-hook-color: #4bc4f7;
  --ajs-display-hook-ov-color: #d1e168;
  --ajs-display-hook0-background-color: #4bc4f7;
  --ajs-display-hook0-color: var(--ajs-dark-background-color);
  --ajs-display-loading-border-color: #f3f3f3;
  --ajs-display-loading-border-top-color: #3498db;
  --ajs-display-verbaction-background-color: #4fcbff;
  --ajs-display-verbphase-background-color: #31f0bf;
  --ajs-display-verbreaction-background-color: #83a9fb;
  --ajs-region-background-color: #002000;
  --ajs-region-border-color: #000000;
  --ajs-input-background-color: #1a4c0b;
  --ajs-input-color: #eee;
  --ajs-light: #dedede;
  --ajs-link-color: chartreuse;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-statusbar-background-color: black;
  --ajs-statusbar-color: #fff;
  --ajs-titlebar-background-color: #151515; /* #222; */
  --ajs-titlebar-color: var(--ajs-display-color);
  --ajs-widget-background-color: var(--ajs-region-background-color);
  --ajs-widget-border-color: #424242;
  --ajs-widget-button-background-color: #083810;
  --ajs-widget-button-border-color: #006400;
  --ajs-widget-button-color: var(--ajs-display-color);
  --ajs-widget-button-hover-background-color: #0e7d21;
  --ajs-widget-button-hover-color: #1a1919;
  --ajs-widget-title-color: var(--ajs-display-color);
  --ajs-widget-title-background-color: #1a1919;
  --ajs-scrollthumb-background-color: green;
}

/* -------------------------------------------------- */
/* crt theme */
/* -------------------------------------------------- */

html[data-theme="crt"] {
  --ajs-background-color: var(--ajs-dark-background-color);
  --ajs-body-background-color: #000;
  --ajs-body-color: var(--ajs-crt-green);
  --ajs-bold-font: monospace;
  --ajs-border-color: #444;
  --ajs-code-color: #599aff;
  --ajs-color: var(--ajs-crt-green);
  --ajs-compass-direction-disabled-color: rgba(0, 0, 0, 0.1);
  --ajs-compass-direction-enabled-active-color: #000000;
  --ajs-compass-direction-enabled-color: #016a01;
  --ajs-compass-direction-enabled-locked-color: #fff;
  --ajs-compass-direction-enabled-locked-hover-color: #ccc;
  --ajs-compass-direction-enabled-unused-color: #000;
  --ajs-compass-label-color: #444;
  --ajs-compass-label-enabled-color: #fff;
  --ajs-compass-label-enabled-hover-color: #000;
  --ajs-compass-label-enabled-locked-color: #000;
  --ajs-compass-label-enabled-locked-hover-color: #870000;
  --ajs-container-border-color: #444;
  --ajs-crt-green: #00ff00;
  --ajs-display-a-color: chartreuse;
  --ajs-display-background-color: #111;
  --ajs-display-color: var(--ajs-crt-green);
  --ajs-display-debug-color: #ff9700;
  --ajs-display-debug0-background-color: #ff9700;
  --ajs-display-debug0-color: #ff9700;
  --ajs-display-debug0-verb-color: #ff0000;
  --ajs-display-hook-color: #4bc4f7;
  --ajs-display-hook-ov-color: #d1e168;
  --ajs-display-hook0-background-color: #4bc4f7;
  --ajs-display-hook0-color: var(--ajs-dark-background-color);
  --ajs-display-loading-border-color: #f3f3f3;
  --ajs-display-loading-border-top-color: #3498db;
  --ajs-display-verbaction-background-color: #4fcbff;
  --ajs-display-verbphase-background-color: #31f0bf;
  --ajs-display-verbreaction-background-color: #83a9fb;
  --ajs-region-background-color: #222;
  --ajs-region-border-color: #424242;
  --ajs-font-family: monospace;
  --ajs-input-background-color: #000;
  --ajs-input-color: #eee;
  --ajs-light: #dedede;
  --ajs-link-color: chartreuse;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-statusbar-background-color: #00e100;
  --ajs-statusbar-color: black;
  --ajs-titlebar-background-color: var(--ajs-display-background-color);
  --ajs-titlebar-color: var(--ajs-display-color);
  --ajs-widget-background-color: var(--ajs-region-background-color); /* #222; */
  --ajs-widget-border-color: #1b4b0c;
  --ajs-widget-button-background-color: #036b1f;
  --ajs-widget-button-border-color: var(--ajs-link-color);
  --ajs-widget-button-color: var(--ajs-display-color); /* #41e212; */
  --ajs-widget-button-hover-background-color: #048927;
  --ajs-widget-button-hover-color: #1a1919;
  --ajs-widget-title-color: var(--ajs-display-color);
  --ajs-widget-title-background-color: #1a1919;
  --ajs-scrollthumb-background-color: #00ff00;
}

/* Example: Custom themes (users can define these in UI) */
html[data-theme="solarized"] {
  --background-color: #fdf6e3;
  --text-color: #657b83;
}

html[data-theme="high-contrast"] {
  --background-color: #000000;
  --text-color: #ffcc00;
}

* {
  box-sizing: content-box;
  margin: 0;
  border: 0;
  padding: 0;
}

body.ajs {
  background-color: var(--ajs-body-background-color);
  color: var(--ajs-body-color);
  max-height: 100dvh;
  overflow: clip;
}

.ajs-p {
  display: block;
  margin-bottom: 1em;
}

.ajs-p.ajs-debug {
  font-size: var(--ajs-debug-font-size);
  /* margin-bottom: 0; */
  line-height: var(--ajs-debug-line-height);
}

.ajs-p.ajs-debug {
  margin-bottom: 0;
}
.ajs-p.ajs-debug:not(:has(+ .ajs-p.ajs-debug)) {
  margin-bottom: 1em;
}

.ajs-italic {
  font-style: italic;
}

.ajs-bold {
  font-weight: bold;
}

.ajs-container {
  display: grid;
  place-items: center;
  align-items: center;
  align-content: center;
  height: var(--ajs-container-height);
  width: var(--ajs-container-width);
  min-width: var(--ajs-container-min-width);
  max-width: var(--ajs-container-max-width);
  min-height: var(--ajs-container-min-height);
  max-height: var(--ajs-container-max-height);
  background-color: var(--ajs-container-background-color);
  border: var(--ajs-container-border);
  box-shadow: 0px 0px 10px 0px #00000033;
  overflow: hidden;
  transition-property: opacity;
  transition-duration: 0.5s;
}
.ajs-container.init {
  opacity: 0;
}
.ajs-container.box,
.ajs-container.box.xs {
  --ajs-container-width: 600px;
  --ajs-container-height: 480px;
  position: fixed;
  inset: 0;
  margin: auto;
}
.ajs-container.box.small {
  --ajs-container-width: 768px;
  --ajs-container-height: 600px;
}
.ajs-container.box.medium {
  --ajs-container-width: 960px;
  --ajs-container-height: 680px;
}
.ajs-container.box.large {
  --ajs-container-width: 1024px;
  --ajs-container-height: 768px;
}
.ajs-container.box.xl {
  --ajs-container-width: 1200px;
  --ajs-container-height: 1024px;
}
.ajs-container.page,
.ajs-container.page.xs {
  --ajs-container-width: 600px;
  --ajs-container-height: 100dvh;
  position: fixed;
  inset: 0;
  margin: auto;
}
.ajs-container.page.small {
  --ajs-container-width: 768px;
}
.ajs-container.page.medium {
  --ajs-container-width: 960px;
}
.ajs-container.page.large {
  --ajs-container-width: 1024px;
  --ajs-container-max-width: 100dvw;
  --ajs-container-max-height: 100dvh;
}
.ajs-container.page.xl {
  --ajs-container-width: 1200px;
}
.ajs-container.inline {
  --ajs-container-width: 600px;
  --ajs-container-height: 480px;
}
.ajs-container.inline.medium {
  --ajs-container-width: 960px;
  --ajs-container-height: 600px;
}
.ajs-container.full {
  --ajs-container-width: 100dvw;
  --ajs-container-height: 100dvh;
  position: fixed;
  inset: 0;
  margin: auto;
}

@media screen and (max-width: 600px) {
  .ajs-container:not(.inline) {
    --ajs-container-width: 100dvw !important;
    --ajs-container-height: 100dvh !important;
    position: fixed;
    inset: 0;
    margin: auto;
  }
}

.ajs-container hr {
  border-bottom: 1px solid var(--ajs-border-color);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.ajs-image-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.ajs-display {
  color: var(--ajs-display-color);
  background-color: var(--ajs-display-background-color);
  width: 100%;
  max-width: var(--ajs-container-width);
  height: var(--ajs-container-height);
  max-height: var(--ajs-container-height);

  position: relative;
  font-family: var(--ajs-font-family);
  font-size: var(--ajs-font-size);
  line-height: var(--ajs-line-height);
  text-align: left;

  display: grid;
  grid-template-rows:
    var(--ajs-actual-ui-height)
    minmax(0, 1fr);
}

.ajs-container:not(.initialized) {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.ajs-restart {
  display: none;
}
.ajs-display.ajs-quit .ajs-restart {
  display: block;
}

.ajs-ui {
  height: fit-content;
  display: block;
  position: relative;
  z-index: 2;
}
html[data-theme="light"] .ajs-ui {
}

/* contains output/input and widgets */
.ajs-content {
  transition-property: top, height;
  transition-duration: 300ms;
  width: 100%;
  max-width: var(--ajs-container-width);
  display: grid;
  min-height: 0; /* needed for grid spacing */
  grid-template-columns:
    var(--ajs-content-grid-column-1)
    var(--ajs-content-grid-column-2)
    var(--ajs-content-grid-column-3);
  grid-template-rows:
    var(--ajs-content-grid-row-1)
    var(--ajs-content-grid-row-2)
    var(--ajs-content-grid-row-3);
  grid-template-areas: var(--ajs-content-grid-areas);
  max-height: calc(var(--ajs-container-height) - var(--ajs-actual-ui-height));
}
.ajs-container.classic .ajs-content {
  grid-template-areas: "main";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.ajs-container.classic .ajs-region:not(.ajs-region-main) {
  display: none;
}
.ajs-container.text-left .ajs-content {
  grid-template-areas: "main header header" "main left right" "main footer footer";
  grid-template-columns: minmax(0, 1fr) 20% 20%;
  grid-template-rows: 40% 40% 20%;
}
.ajs-container.text-right .ajs-content {
  grid-template-areas: "header header main" "left right main" "footer footer main";
  grid-template-columns: 20% 20% minmax(0, 1fr);
  grid-template-rows: 40% 40% 20%;
}
/* three rows */
.ajs-container.rows .ajs-content {
  grid-template-areas:
    "header header header" "left main right"
    "footer footer footer";
}
/* three columns */
.ajs-container.columns .ajs-content {
  grid-template-areas:
    "left header right" "left main right"
    "left footer right";
}
.ajs-container.single-left .ajs-content {
  grid-template-columns: 20% minmax(0, 1fr);
  grid-template-areas: "left header" "left main" "left footer";
}
.ajs-container.single-right .ajs-content {
  grid-template-columns: minmax(0, 1fr) 20%;
  grid-template-areas: "header right" "main right" "footer right";
}
/* side-side / header-content-footer */
.ajs-container.double-left .ajs-content {
  grid-template-columns: 20% 20% minmax(0, 1fr);
  grid-template-areas: "left right header" "left right main" "left right footer";
}
/* header-content-footer / side-side */
.ajs-container.double-right .ajs-content {
  grid-template-columns: minmax(0, 1fr) 20% 20%;
  grid-template-areas: "header left right" "main left right" "footer left right";
}
/* header-side-side, content-footer */
.ajs-container.hangover-left .ajs-content {
  grid-template-columns: 20% 20% minmax(0, 1fr);
  grid-template-areas:
    "header header header" "left right main"
    "left right footer";
}
/* header-side-side, content-footer */
.ajs-container.hangover-right .ajs-content {
  grid-template-columns: minmax(0, 1fr) 20% 20%;
  grid-template-areas: "header header header" "main left right" "footer left right";
}
.ajs-container.image-top .ajs-content {
  grid-template-rows: 45% 55%;
  grid-template-areas: "header" "main";
  grid-template-columns: 100%;
}
.ajs-container.image-bottom .ajs-content {
  grid-template-rows: 55% 45%;
  grid-template-areas: "main" "footer";
  grid-template-columns: 100%;
}
.ajs-container.image-right .ajs-content {
  grid-template-rows: 100%;
  grid-template-areas: "main right" "main right";
  grid-template-columns: 50% 50%;
}
.ajs-container.image-left .ajs-content {
  grid-template-rows: 100%;
  grid-template-areas: "left main" "left main";
  grid-template-columns: 50% 50%;
}
.ajs-container.image-and-columns .ajs-content {
  grid-template-columns: 20% minmax(0, 1fr) 20%;
  grid-template-areas: "header header header" "left main right";
  grid-template-rows: 50% 50%;
}
.ajs-container.image-and-rows .ajs-content {
  grid-template-areas: "header header header" "main main main" "left footer right";
  grid-template-rows: 30% minmax(0, 1fr) 20%;
  grid-template-columns: 33% 33% 33%;
}
.ajs-container.columns-and-image .ajs-content {
  grid-template-columns: 20% minmax(0, 1fr) 20%;
  grid-template-areas: "left main right" "footer footer footer";
  grid-template-rows: 50% 50%;
}
.ajs-container.rows-and-image .ajs-content {
  grid-template-areas: "main main main" "left footer right" "header header header";
  grid-template-rows: minmax(0, 1fr) 20% 35%;
  grid-template-columns: 33% 33% 33%;
}
.ajs-container.legend .ajs-content {
  grid-template-areas: "left right header" "left right header" "left right main";
  grid-template-rows: 25% 25% minmax(0, 1fr);
  grid-template-columns: 20% 20% minmax(0, 1fr);
}
.ajs-container.macventure .ajs-content {
  grid-template-rows: 10% 40% 10% minmax(0, 1fr);
  grid-template-columns: 20% minmax(0, 1fr) 20%;
  grid-template-areas: "left footer right" "left header right" "left header ." "main main main";
}
.ajs-container.magneticscrolls .ajs-content {
  grid-template-areas: "main header" "main left" "main right" "main footer";
  grid-template-columns: minmax(0, 1fr) 40%;
  grid-template-rows: 34% 18% 18% 30%;
}

.ajs-region {
  background-color: var(--ajs-region-background-color);
  position: relative;
  box-sizing: border-box;
  min-height: 0;
}

.ajs-region:empty {
  border: none !important;
}

.ajs-region-left {
  grid-area: left;
  height: 100%;
  gap: 2px;
  position: relative;
  border-right: var(--ajs-region-border);
  z-index: 3;

  display: flex;
  flex-direction: column;
  /* display: grid; */
  /* grid-template-rows: auto 1fr; */
}
html[data-theme="light"] .ajs-region-left {
}

.ajs-region-header {
  grid-area: header;
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
  position: relative;
  z-index: 2;
  border-bottom: var(--ajs-region-border);
}

.ajs-region-footer {
  grid-area: footer;
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
  position: relative;
  z-index: 4;
  border-top: var(--ajs-region-border);
}

.ajs-region-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 2px;
  position: relative;
  border-left: var(--ajs-region-border);
  z-index: 3;
  /* display: grid; */
}

.ajs-display.ajs-quit .ajs-content {
  display: none;
}

.ajs-titlebar {
  width: 100%;
  text-align: center;
  height: var(--ajs-titlebar-height);
  font-size: 0.6em;
  font-family: var(--ajs-bold-font);
  background-color: var(--ajs-titlebar-background-color);
  color: var(--ajs-titlebar-color);
  display: flex;
  position: relative;
}
.ajs-titlebar .ajs-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.ajs-titlebar.ajs-hide {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.ajs-title {
  text-transform: uppercase;
  margin-right: 0.5em;
  white-space: nowrap;
}

.ajs-version {
  margin-right: 1em;
  white-space: nowrap;
}

.ajs-author,
.ajs-by-author {
  white-space: nowrap;
}

.ajs-by-author:before {
  content: "By ";
}

.ajs-themer-container {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

.ajs-themer {
  background: transparent;
  color: var(--ajs-titlebar-color);
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
}

.ajs-statusbar {
  width: 100%;
  height: var(--ajs-statusbar-height);
  background-color: var(--ajs-statusbar-background-color);
  display: flex;
  position: relative;
}

.ajs-statusbar .ajs-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 10px;
  height: 100%;
  width: 100%;
}
.ajs-statusbar.ajs-hide {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.ajs-prompt {
  text-align: center;
  font-style: italic;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  background-color: var(--ajs-input-background-color);
  display: none;
}
.ajs-display.prompt .ajs-prompt {
  display: flex;
}
.ajs-prompt-inline {
}

.ajs-room {
  font-size: 1em;
  font-family: var(--ajs-bold-font);
  font-weight: bold;
  white-space: nowrap;
  color: var(--ajs-statusbar-color);
  justify-self: center;
  /* text-transform: capitalize; */
}

.ajs-room .situation {
  font-size: 0.9em;
  font-weight: 400;
}

.ajs-score {
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  color: var(--ajs-statusbar-color);
  justify-self: end;
}

.ajs-completed-goal {
  opacity: 0.6;
}

/* -------------------------------------------------- */
/* compasses */
/* -------------------------------------------------- */

.ajs-compass-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: 100%;
  container-type: size;
  aspect-ratio: 1;
  overflow: hidden;
}

.ajs-compass-container .ajs-inner {
  /* width: 100%; */
  /* height: 100%; */
  display: contents;
}

.ajs-statusbar .ajs-compass-container {
  justify-self: start;
}
.hide-statusbar-compass .ajs-statusbar .ajs-compass-container {
  display: none;
}
.hide-statusbar-compass .ajs-statusbar .ajs-inner {
  grid-template-columns: auto auto;
}
.hide-statusbar-compass .ajs-statusbar .ajs-room {
  justify-self: start;
}

.ajs-container.inline.hide-statusbar-compass,
.ajs-container.xs.hide-statusbar-compass,
.ajs-container.small.hide-statusbar-compass {
  --ajs-statusbar-height: 35px;
}

.ajs-container.inline,
.ajs-container.xs,
.ajs-container.small {
  --ajs-input-height: 30px;
  --ajs-titlebar-height: 20px;
}

.ajs-compass-container.ajs-hide-labels text.text {
  display: none !important;
}
.ajs-hide-labels .ajs-button-label {
  display: none !important;
}

@container (max-height: 100px) {
  .ajs-compass-container:not(.map) text/*,
  .ajs-compass text*/ {
    display: none !important;
  }
}

.ajs-compass-container.statusbar {
}

/*.magnify > */
.ajs-compass > .ajs-compass-hover-trap {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: 0;
  fill: none;
}

.ajs-compass {
  position: relative;
  height: 100%;
}
.ajs-compass .background {
  fill: var(--ajs-compass-direction-disabled-color);
  fill-opacity: 0.3;
}

.ajs-compass-direction .text {
  user-select: none;
  pointer-events: none;
  font-size: 6px;
  font-weight: bold;
  fill: var(--ajs-compass-label-enabled-color);
  text-anchor: middle;
}
.ajs-compass-direction.ajs-enabled:not(.ajs-locked):hover .text,
.ajs-compass-direction.ajs-enabled:not(.ajs-locked).active .text {
  fill: var(--ajs-compass-label-enabled-hover-color);
}

.ajs-compass-direction[aria-hidden="true"] .text:not(.ioud) {
  opacity: 0;
}
.ajs-compass-direction[aria-hidden="true"] .text.ioud {
  opacity: 0.5;
}

.ajs-statusbar .ajs-compass {
  height: calc(100% - 8px);
}
.ajs-compass-direction {
}
.ajs-compass-direction.ajs-enabled {
  cursor: pointer;
}
.ajs-compass-direction:not(.ajs-enabled) {
  cursor: default;
}

.ajs-compass-direction:focus {
  outline: none;
}

.ajs-compass-direction:focus-visible {
  outline: 2px solid currentColor;
  border-radius: 5px;
}

.ajs-compass-container:not(.rock) .rock,
.ajs-compass-container:not(.rose1) .rose1,
.ajs-compass-container:not(.rose2) .rose2,
.ajs-compass-container:not(.grid1) .grid1,
.ajs-compass-container:not(.grid2) .grid2,
.ajs-compass-container:not(.map) .map {
  display: none;
}

.fill,
svg text {
  transition-property: fill;
  transition-duration: 250ms;
}
.stroke {
  transition-property: opacity;
  transition-duration: 250ms;
}

.ajs-compass-direction:not(.ajs-enabled) .fill {
  fill: var(--ajs-compass-direction-disabled-color);
}
.ajs-compass-direction.ajs-enabled .stroke {
  stroke-width: 1px;
}
.ajs-compass-direction:not(.ajs-enabled) .stroke {
  stroke-width: 0px;
}
.ajs-compass-direction.active {
  pointer-events: all !important;
  cursor: pointer;
}
.ajs-compass-direction.ajs-enabled .fill {
  fill: var(--ajs-compass-direction-enabled-color);
}
.ajs-compass-direction.ajs-enabled:hover .fill,
.ajs-compass-direction.ajs-enabled.active .fill {
  fill: var(--ajs-compass-direction-enabled-active-color);
}
.ajs-compass-direction.ajs-enabled.ajs-locked .fill {
  fill: var(--ajs-compass-direction-enabled-locked-color);
}
.ajs-compass-direction.ajs-enabled.ajs-locked:hover .fill {
  fill: var(--ajs-compass-direction-enabled-locked-hover-color);
}

.ajs-compass-direction.ajs-enabled.ajs-locked .text {
  fill: var(--ajs-compass-label-enabled-locked-color);
}
.ajs-compass-direction.ajs-enabled.ajs-locked:hover .text {
  fill: var(--ajs-compass-label-enabled-locked-hover-color);
}

/* -------------------------------------------------- */
/* compass direction labels */
/* -------------------------------------------------- */

.ajs-compass-direction.ajs-enabled .ajs-compass-label {
  opacity: 1;
}

.cardinal.ajs-compass-direction,
.marine.ajs-compass-direction {
}

.ordinal.ajs-compass-direction {
}

/* -------------------------------------------------- */
/* compass style: map */
/* -------------------------------------------------- */
.ajs-compass-container.map .hit {
  fill: transparent;
}
.ajs-compass-container.map .stroke {
  stroke: var(--ajs-display-color);
  fill: transparent;
}
.ajs-compass-container.map.ajs-enabled .stroke {
  stroke: var(--ajs-compass-label-enabled-color);
  stroke-width: 1px;
}
.map .ajs-compass-direction.ajs-enabled:not(.ajs-locked) .stroke {
  stroke: var(--ajs-compass-label-enabled-color);
}
.map .ajs-compass-direction.ajs-enabled:not(.ajs-locked):hover .stroke {
  stroke: var(--ajs-compass-label-enabled-hover-color);
}
.map .ajs-compass-direction.ajs-enabled.ajs-locked .stroke,
.map .ajs-compass-direction.ajs-enabled.ajs-locked:hover .stroke {
  stroke: var(--ajs-compass-label-enabled-locked-color);
}

.map text.text.map {
  /* opacity: 1; */
  /* color: white; */
}
.map .hit {
  /* fill: rgba(255,255,255,0.2) !important; */
  /* opacity: 1; */
}
html[data-theme="light"] .ajs-compass-container.map {
  --ajs-compass-label-enabled-color: #007100; /* #004a00; */
  --ajs-compass-label-enabled-hover-color: #009d00; /* #003000; */
  --ajs-compass-label-enabled-locked-color: #870000;
  --ajs-compass-label-enabled-locked-hover-color: #870000;
}

html[data-theme="dark"] .ajs-compass-container.map {
  --ajs-compass-label-enabled-color: var(--ajs-display-color);
  --ajs-compass-label-enabled-hover-color: var(--ajs-link-color);
  --ajs-compass-label-enabled-locked-color: #ffabab;
  --ajs-compass-label-enabled-locked-hover-color: #ffabab;
}

html[data-theme="crt"] .ajs-compass-container.map {
  --ajs-compass-label-enabled-color: var(--ajs-display-color);
  --ajs-compass-label-enabled-hover-color: var(--ajs-link-color);
  --ajs-compass-label-enabled-locked-color: #00c200;
  --ajs-compass-label-enabled-locked-hover-color: #00c200;
}

/* -------------------------------------------------- */
/* widget titles */
/* -------------------------------------------------- */
.ajs-widget {
  position: relative;
  min-height: 0;
}

.ajs-widget.has_title {
  /* padding-top: 1.2rem; */
}
.ajs-widget.has_title > div {
  margin-top: 1.2rem;
}
.ajs-widget.has_title:before {
  color: var(--ajs-widget-title-color);
  background-color: var(--ajs-widget-title-background-color);
  content: var(--ajs-widget-title);
  font-weight: var(--ajs-widget-font-weight);
  font-size: var(--ajs-widget-font-size);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  /* we use these flex properties to center the title */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* -------------------------------------------------- */
/* compass style: rose */
/* -------------------------------------------------- */
.ajs-compass .rose1.bezel,
.ajs-compass .rose2.bezel {
  fill: var(--ajs-compass-direction-disabled-color);
  fill-opacity: 0.4;
}

/* -------------------------------------------------- */
/* compass style: rock */
/* -------------------------------------------------- */
.rock.fill.outer {
  display: none;
}

/* show borders on hover */
/* .rock
  .ajs-compass-direction.ajs-enabled:not(.ajs-locked):hover
  .rock.fill.outer {
  display: block;
  fill: var(--ajs-compass-direction-enabled-color);
} */

/* -------------------------------------------------- */
/* list widgets */
/* -------------------------------------------------- */
.ajs-objectlist-widget .ajs-scroll-content {
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ajs-inventorylist-widget .ajs-scroll-content {
  height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ajs-scroll-container {
  height: -webkit-fill-available;
  overflow: auto;
}

/* -------------------------------------------------- */
/* room image widgets */
/* -------------------------------------------------- */
.ajs-roomimage-widget {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ajs-roomimage-widget .ajs-image-container {
  flex: 1;
  width: 100%;
  height: 100%;
}
.ajs-roomimage-widget img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ajs-widget-button {
  color: var(--ajs-widget-button-color);
  background-color: var(--ajs-widget-button-background-color);
  border: var(--ajs-widget-button-border);
  line-height: 1;
  padding: 4px;
  font-size: 0.8rem;
}

.ajs-widget-button:hover,
.ajs-widget-button.active {
  color: var(--ajs-widget-button-hover-color);
  background-color: var(--ajs-widget-button-hover-background-color);
}

.ajs-verb-button {
}

.ajs-inventory-button {
}

/* -------------------------------------------------- */
/* images */
/* -------------------------------------------------- */
img.ajs-image {
}

.ajs-button-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------- */
/* input */
/* -------------------------------------------------- */

.ajs-input-container {
  position: relative;
  /* box-shadow: 0px 0px 16px 10px rgba(0, 0, 0, 0.25); */
  z-index: 2;
  height: var(--ajs-input-height);
  /* padding: 10px; */
  background-color: var(--ajs-input-background-color);
}
html[data-theme="light"] .ajs-input-container {
  /* box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.15); */
}

.ajs-input-inner {
  position: relative;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 30px 30px;
  grid-template-areas: "arrow input clear enter";
  /* gap: 10px; */
  align-items: center;
  padding: 0 10px;
  height: 100%;
}

.ajs-input-arrow {
  /* position: absolute; */
  position: relative;
  grid-area: arrow;
  /* height: 100%; */
  /* line-height: 100%; */
  text-align: center;
  /* padding: 10px; */
  font-size: 20px;
  /* line-height: 20px; */
  /* height: 20px; */
  opacity: 0.3;
  color: var(--ajs-input-color);
}

.ajs-input {
  /* width: calc(100% - 20px); */
  width: 100%;
  grid-area: input;
  /* height: var(--ajs-input-height); */
  /* padding: 10px; */
  outline-style: none;
  /* box-shadow: inset 0 0 6px #222; */
  text-indent: 5px;
  font-size: 16px;
  color: var(--ajs-input-color);
  background-color: var(--ajs-input-background-color);
  background-color: transparent;
}
.ajs-input:-webkit-autofill,
.ajs-input:-webkit-autofill:hover,
.ajs-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ajs-input-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--ajs-input-background-color) inset;
}

.ajs-input::placeholder,
.ajs-input:focus::placeholder {
  font-size: 16px;
  line-height: 15px;
  height: 20px;
  text-indent: 5px;
  overflow: visible;
}
.ajs-input::placeholder,
.ajs-input:focus::placeholder {
  opacity: 0.5;
  color: var(--ajs-input-color);
}

.ajs-input-container .icon {
  /* position: absolute; */
  position: relative;
  width: 30px;
  height: 30px;
  /* top: 5px; */
  background: 0;
  border: 0;
  padding: 0;
}

.ajs-input-container button {
  pointer-events: none;
}

.ajs-input-container.active button {
  pointer-events: all;
  cursor: pointer;
}

.clear.icon {
  /* right: 6px; */
  grid-area: clear;
}

.clear.icon:before {
  content: "×" / "";
  font-size: 1.75em;
}

.enter.icon {
  grid-area: enter;
  /* right: 40px; */
  font-size: 0.7em;
}

.enter.icon:before {
  content: "\027A5" / "";
  font-size: 1.75em;
  transform: scaleX(-1);
}

.ajs-input-container .icon:before {
  position: absolute;
  font-size: 2em;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
  opacity: 0.4;
}
.ajs-input-container.active .icon:before {
  opacity: 1;
}
.ajs-input-container .icon:before {
  /* color: var(--ajs-input-color); */
  color: var(--ajs-display-a-color);
}

/* -------------------------------------------------- */
/* io */
/* -------------------------------------------------- */

.ajs-region-main {
  grid-area: main;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0; /* needed for grid spacing */
}

/* -------------------------------------------------- */
/* output */
/* -------------------------------------------------- */

.ajs-output-container {
  /* flex: 1;
  overflow: scroll; */
  scroll-behavior: smooth;

  min-height: 0; /* needed for grid spacing */
  overflow-y: auto;

  /* width: calc(
    var(--ajs-actual-container-width) - var(--ajs-actual-leftregion-width) -
      var(--ajs-actual-rightregion-width)
  ); */
  /* height: calc(
    var(--ajs-actual-container-height) - var(--ajs-actual-ui-height) -
      var(--ajs-actual-input-height) - var(--ajs-actual-header-height) -
      var(--ajs-actual-footer-height)
  ); */
}
@media all and (-webkit-min-device-pixel-ratio: 0) {
  .ajs-output-container::-webkit-scrollbar,
  .ajs-scroll-container::-webkit-scrollbar,
  .scroll-container::-webkit-scrollbar {
    width: 6px;
    height: 0px;
  }

  .ajs-output-container::-webkit-scrollbar-thumb,
  .ajs-scroll-container::-webkit-scrollbar-thumb,
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--ajs-scrollthumb-background-color);
  }
}

.ajs-output-container .ajs-p:first-of-type {
  /* padding-top: 1rem; */
}

.ajs-output {
  width: calc(100% - 2rem);
  padding: 1rem;
  position: relative;
}

.ajs-player-input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0;
  margin-top: 1.5em;
}

.ajs-player-input + .ajs-inferred {
  margin-right: 0.25em;
}

.ajs-player-input:not(.integer):has(+ .ajs-inferred) {
  /* use inline-block to keep inferred on same line */
  /* display: inline-block; */
  margin-right: 0.25em;
  margin-top: 0.5em;
}

.ajs-player-input.integer:has(+ .ajs-inferred) {
  /* use block to break inferred to next line */
  display: block;
}

.ajs-inferred + .ajs-inferred {
  /* keep multiple inferred on same line */
  display: inline-block;
  margin-right: 0.25em;
}

span.ajs-player-input + span {
  margin-top: 0;
}

.ajs-inferred {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0;
}

/*
.ajs-room-name controls the display of room names 
in room descriptions.
*/
.ajs-room-name {
  font-weight: bold;
  font-family: var(--ajs-bold-font);
  margin-bottom: 0;
}

.ajs-dark-room {
}

/*
.ajs-room-description controls the display of room descriptions.
*/
.ajs-room-description {
}

/* -------------------------------------------------- */
/* inline styles */
/* -------------------------------------------------- */

.ajs-debug,
.ajs-hook {
  font-size: 0.9em;
  font-style: normal;
  font-family: sans-serif;
  display: block;
}
.ajs-debug {
  color: var(--ajs-display-debug-color);
}
.ajs-hook {
  color: var(--ajs-display-hook-color);
}

.ajs-hook .ajs-verb {
  color: var(--ajs-display-debug0-verb-color);
}
.ajs-hook .ajs-actor {
  color: var(--ajs-display-debug0-color);
}
/* .ajs-hook .ajs-action {
  color: var(--ajs-display-hook-color);
} */
.ajs-hook .ajs-target {
  color: var(--ajs-display-debug0-color);
}
.ajs-hook .ajs-tryfound {
  color: var(--ajs-display-color);
  font-size: 0.75em;
}
.ajs-hook .ajs-ov {
  color: var(--ajs-display-hook-ov-color);
}

.ajs-debug ._0,
.ajs-hook ._0 {
  font-size: 0.9em;
  margin-right: 3px;
  padding: 2px 4px 2px 4px;
  border-radius: 1px;
  margin-right: 3px;
  font-weight: bold;
}
.ajs-debug ._0 {
  color: var(--ajs-dark-background-color);
  background-color: var(--ajs-display-debug0-background-color);
}
.ajs-hook ._0 {
  color: var(--ajs-display-hook0-color);
  background-color: var(--ajs-display-hook0-background-color);
}

.ajs-hook.ajs-verbphase ._0 {
  background-color: var(--ajs-display-verbphase-background-color);
}
.ajs-hook.ajs-verbphase ._2 {
}
.ajs-hook.ajs-verbphase ._2 .ajs-action {
  color: var(--ajs-display-verbphase-background-color);
}

.ajs-hook.ajs-verbaction ._0 {
  background-color: var(--ajs-display-verbaction-background-color);
}
.ajs-hook.ajs-verbaction ._2 {
}
.ajs-hook.ajs-verbaction ._2 .ajs-action {
  color: var(--ajs-display-verbaction-background-color);
}

.ajs-hook.ajs-verbreaction ._0 {
  background-color: var(--ajs-display-verbreaction-background-color);
}
.ajs-hook.ajs-verbreaction ._2 {
}
.ajs-hook.ajs-verbreaction ._2 .ajs-action {
  color: var(--ajs-display-verbreaction-background-color);
}

.ajs-debug ._0::after {
}

.ajs-debug ._1::before {
  content: "   ";
  opacity: 0.6;
}

.ajs-debug ._1::after {
  /* 
  content: " >";
  font-size: 0.9em;
  vertical-align: middle;
  margin-right: 5px;
  margin-left: 5px;
   */
}

.ajs-hook ._1 {
  display: none;
}

.ajs-debug ._2 {
  color: var(--ajs-display-debug0-color);
}

/* .ajs-hook ._2 {
  color: var(--ajs-display-hook-color);
} */

/* modify to apply styles to unparsed input */
.ajs-unparsed {
  font-family: inherit;
  font-size: inherit;
  margin-right: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* uncomment to apply leading capitalization to unparsed input */
.ajs-unparsed::first-letter {
  /* text-transform: uppercase; */
}

/* 
.ajs-choice controls the display of disambiguation choices like
"Which did you mean? 1) A, 2) B, or 3) C."
*/
.ajs-choice {
  margin-left: 5px;
  color: inherit;
  background-color: inherit;
  border-radius: inherit;
  padding: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* 
.ajs-aspect controls the display of nested lists of content like
"On A you see B, C, and D."
*/
.ajs-p.ajs-aspect {
}
.ajs-p .ajs-p.ajs-aspect {
  margin-top: 1em;
}

.ajs-p .ajs-p.ajs-character-state {
  margin-top: 1rem;
}

ol,
ul {
  padding-left: 1.5em;
}

ul.ajs-nolist li {
  list-style-type: none;
}

.ajs-p.concatenate_output {
  display: inline;
}

.ajs-p.concatenate_output + .ajs-p:not(.concatenate_output) {
  margin-top: 1em;
}

.ajs-display a {
  color: var(--ajs-display-a-color);
}

.ajs-custom-exit-name {
}
.ajs-extended-exit-name {
}
.ajs-exit-direction {
  font-style: italic;
}
.ajs-exit-link {
}
.ajs-exit-link.ajs-inactive {
  cursor: auto;
  color: inherit;
  text-decoration: none;
}
/* -------------------------------------------------- */
/* bootstrap colors */
/* -------------------------------------------------- */

.red {
  font-weight: bold;
  color: red;
}

.blue {
  font-weight: bold;
  color: blue;
}

.green {
  font-weight: bold;
  color: green;
}

.system {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
}

.system.warning {
  color: #a6590c;
  background-color: #fffae0;
  border: 1px solid #feedca;
}

.system.error {
  color: #c42222;
  background-color: #feeaea;
  border: 1px solid #fdd6d6;
}

.system.test {
  color: #279fbd;
  background-color: #e0f8ff;
  border: 1px solid #caf6fe;
}

/* -------------------------------------------------- */
/* score */
/* -------------------------------------------------- */

.ajs-score-msg {
  font-style: italic;
  font-size: 1.1em;
}

.ajs-score-msg.up {
  color: #00bc00;
}

.ajs-score-msg.down {
  color: #ff1818;
}

/* -------------------------------------------------- */
/* introcard / outrocard */
/* -------------------------------------------------- */

.ajs-outrocard-container {
  transition-property: max-height;
  transition-duration: 500ms;
  overflow: hidden;
  max-height: var(--ajs-display-height);
}

.ajs-introcard {
  padding-top: 1rem;
}

.ajs-outrocard {
}

.ajs-outro-text {
  display: block;
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: thin solid var(--ajs-border-color);
}

.ajs-outro-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.ajs-display a.ajs-outro-link {
  border: thin solid var(--ajs-link-color);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  color: var(--ajs-link-color);
  background-color: var(--ajs-background-color);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8em;
}
.ajs-display a.ajs-outro-link:hover,
.ajs-display a.ajs-outro-link:active {
  color: var(--ajs-background-color);
  background-color: var(--ajs-link-color);
}

.ajs-fullsize {
  position: absolute;
  width: var(--ajs-actual-output-width);
  height: var(--ajs-actual-output-height);
  left: 0;
  top: 0;
}
.ajs-vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* -------------------------------------------------- */
/* loading */
/* -------------------------------------------------- */

.ajs-display:not(.unplayed) button.play {
  display: none;
}
.ajs-display.unplayed button.play {
  display: block;
}
/* .ajs-display.unplayed button.play::before
{
  content: 'PLAY NOW';
} */
.ajs-display button.play {
  background-color: var(--ajs-nightdarkgreen);
  color: var(--ajs-light);
}
.ajs-display button.play:hover,
.ajs-display button.play.active {
  background-color: var(--ajs-nightlightgreen);
  color: white;
  text-decoration: none;
}
.ajs-display.initialized button.play {
  display: none;
}
.ajs-display:not(.loading) .loader {
  display: none;
}
.ajs-display.loading .loader {
  display: block;
  border: 10px solid var(--ajs-display-loading-border-color);
  border-top: 10px solid var(--ajs-display-loading-border-top-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------- */
/* accessibility */
/* -------------------------------------------------- */

.ajs-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hidden {
  display: none;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.ajs-noname {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}

/* -------------------------------------------------- */
/* CRT */
/* -------------------------------------------------- */

:root {
  --crt-radius: 14px; /* outer rounding */
  --bulge-scale: 1.03; /* scale of inner content (slight) */
  --vignette-strength: 0.45; /* darkness at edges */
  --gloss-strength: 0.08; /* central gloss highlight */
  --scanline-opacity: 0.1; /* intensity of scanlines */
  --crt-bg: #0b0b0b;
}

html[data-theme="crt"] .ajs-display {
  border-radius: var(--crt-radius);
  overflow: hidden;
}

/* glass — narrow band near top */
html[data-theme="crt"] .ajs-display:before {
  content: "";
  position: absolute;
  top: 2%;
  left: 5%;
  right: 5%;
  height: 14%;
  z-index: 8;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0)
  );
  filter: blur(6px);
  pointer-events: none;
}

/* subtle rim-darkening (barrel feel) */
html[data-theme="crt"] .ajs-display::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  background: radial-gradient(
    60% 60% at 50% 45%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 60%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* scanlines overlay */
html[data-theme="crt"] .ajs-content:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.2) 0px,
    rgba(0, 255, 0, 0) 4px
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
  opacity: 0.9;
}

/* radial vignette to darken the corners and edges (creates apparent bulge) */
html[data-theme="crt"] .ajs-output-container::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(
    120% 100% at 50% 50%,
    rgba(255, 255, 255, var(--gloss-strength)) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, var(--vignette-strength)) 100%
  );
  mix-blend-mode: normal;
  opacity: 1;
}