@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --white: #f0f0f0;
  --brand: #ffd314;
  --green: #6aaa64;
  --yellow: #c9b458;
  --orange: #f5793a;
  --red: #ff3b00;
  --hint-flash-color: #a6f19f;
  --tone-0: var(--white);
  --tone-1: #e1e1e1;
  --tone-2: #d7d8d8;
  --tone-3: #a1a3a3;
  --tone-4: #6a6f6f;
  --tone-5: #373a3a;
  --warning: var(--yellow);
  --danger: var(--red);
  --background-color: white;
  --scrollbar-color: var(--tone-3);
  --scrollbar-color-hover: var(--tone-4);
  --logo-color: var(--tone-5);
  --thumbnail-dash-color: var(--tone-4);
  --highlight-emphassiss-color: var(--tone-3);
}

body.dark {
  --brand: #ffd314;
  --green: #31a227;
  --yellow: #c9b458;
  --orange: #a44210;
  --hint-flash-color: #276621;
  --tone-0: #1c1d1d;
  --tone-1: #303232;
  --tone-2: #606363;
  --tone-3: #959696;
  --tone-4: #9e9e9e;
  --tone-5: #d0d0d0;
  --background-color: #272828;
  --scrollbar-color: var(--brand);
  --scrollbar-color-hover: var(--brand);
  --logo-color: var(--brand);
  --thumbnail-dash-color: var(--brand);
  --highlight-emphassiss-color: var(--brand);
}

body {
  --transition-duration: 500ms;
  --padding: 20px;
  --padding-half: 10px;
  --serif-font-name: "Arvo";
  --title-font-family: var(--serif-font-name), serif;
  --sans-serif-font-name: "Lato";
  --body-font-family: var(--sans-serif-font-name), sans-serif;
  --navbar-height: 50px;
  --navbar-border-size: 1px;
  --scrollbar-width: 8px;
  --border-radius: 8px;
  --border-radius-sm: 5px;
  --glow-blur-amount: 0px;
  --hint-reveal-flash-duration: var(--transition-duration);
  --correct: var(--green);
  --incorrect: var(--orange);
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }
  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}
.navbar {
  --icon-size: 20px;
  --padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px var(--padding);
  height: var(--navbar-height);
  border-bottom: var(--navbar-border-size) solid var(--tone-1);
}
.navbar i {
  font-size: var(--icon-size);
}
.navbar i.button {
  cursor: pointer;
  position: relative;
}
.navbar i.button:hover::after {
  --hover-size: 30px;
  content: "";
  height: var(--hover-size);
  width: var(--hover-size);
  background-color: var(--tone-1);
  border-radius: 50%;
  position: absolute;
  display: block;
  --offset: calc( calc( var(--hover-size) - var(--icon-size)) / 2 );
  top: calc(-1 * var(--offset));
  left: calc(-1 * var(--offset));
  z-index: -1;
}
.navbar i + i {
  margin-left: var(--padding);
}
.navbar .left {
  display: flex;
  align-items: center;
  justify-content: start;
}
.navbar .center .logo {
  color: var(--logo-color);
  font-family: var(--title-font-family);
  font-weight: bold;
  font-size: 20px;
}
.navbar .right {
  display: flex;
  align-items: center;
  justify-content: end;
}
.navbar .right .guess-count {
  --size: var(--icon-size);
  font-family: var(--sans-serif-font-name);
  font-size: calc(var(--size) - 7px);
  font-weight: bold;
  text-align: center;
  color: var(--tone-0);
  line-height: var(--size);
  border-radius: 50%;
  display: inline-block;
  height: var(--size);
  width: var(--size);
  margin-right: var(--padding);
  background-color: var(--incorrect) !important;
  box-shadow: 0px 0px var(--glow-blur-amount) var(--incorrect);
}
.navbar .right .guess-count.correct {
  background-color: var(--correct) !important;
  box-shadow: 0px 0px var(--glow-blur-amount) var(--correct);
}
.navbar .left, .navbar .right {
  width: 150px;
}
.navbar #mobile-mode-changer {
  border-radius: var(--border-radius-sm);
  background-color: var(--tone-1);
  color: var(--tone-5);
  border: none;
  padding: 5px 10px;
  margin-left: var(--padding);
}
.navbar .mode-options {
  border-radius: var(--border-radius-sm);
  background-color: var(--tone-1);
  display: flex;
  gap: 5px;
  margin-left: var(--padding);
}
.navbar .mode-options .mode-option {
  cursor: pointer;
  padding: 5px 10px;
}
.navbar .mode-options .mode-option.left-border-radius {
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
}
.navbar .mode-options .mode-option.right-border-radius {
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}
.navbar .mode-options .mode-option i {
  pointer-events: none;
}
.navbar .mode-options .mode-option.active {
  background-color: var(--tone-3);
  color: var(--tone-0);
  font-weight: bold;
}

.game {
  max-width: 820px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  --game-padding: var(--padding);
  max-height: calc(100vh - (var(--navbar-height) + var(--navbar-border-size) + var(--game-padding) * 2));
  padding: var(--game-padding);
  /* Hints */
  /* Options */
}
.game .hint {
  text-align: center;
  padding: 0;
  /* Cover-all for every hint detail*/
}
.game .hint .text-placeholder {
  display: inline-block;
}
@keyframes HINT-FLASH {
  0%, 100% {
    background-color: transparent;
  }
  50% {
    background-color: var(--hint-flash-color);
  }
}
.game .hint .hint-wrapper.revealed {
  /* When its also been revealed */
  border-radius: var(--border-radius-sm);
  animation: HINT-FLASH var(--hint-reveal-flash-duration) normal;
}
.game .hint .hint-img-wrapper {
  position: relative;
  height: 113px;
  display: block;
  text-align: center;
}
@keyframes HINT-IMG-FLASH {
  0%, 100% {
    box-shadow: 0px 0px 0px 0px var(--hint-flash-color);
    background-color: transparent;
  }
  50% {
    box-shadow: 0px 0px 16px 6px var(--hint-flash-color);
    background-color: var(--hint-flash-color);
  }
}
.game .hint .hint-img-wrapper.revealed img {
  animation: HINT-IMG-FLASH var(--hint-reveal-flash-duration) normal;
}
.game .hint .thumbnail {
  --height: 113px;
  --thumb-width: 200px;
  min-height: var(--height);
  width: var(--thumb-width);
  border-radius: var(--border-radius-sm);
  position: absolute;
}
.game .hint .thumbnail.placeholder {
  height: var(--height);
  background: linear-gradient(90deg, var(--thumbnail-dash-color) 50%, transparent 50%), linear-gradient(90deg, var(--thumbnail-dash-color) 50%, transparent 50%), linear-gradient(0deg, var(--thumbnail-dash-color) 50%, transparent 50%), linear-gradient(0deg, var(--thumbnail-dash-color) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 15px 3px, 15px 3px, 3px 15px, 3px 15px;
  animation: border-dance 10s infinite linear;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.game .hint .thumbnail.placeholder::before {
  content: "?";
  color: var(--thumbnail-dash-color);
  font-size: 72px;
  line-height: var(--height);
}
.game .hint .thumbnail, .game .hint .thumbnail.placeholder {
  position: absolute;
  display: inline;
  top: 0;
  transform: translateX(-50%);
}
.game .hint .thumbnail.blurred {
  filter: blur(10px);
}
.game .hint .episode {
  font-weight: bold;
  font-size: 12px;
  margin-top: var(--padding);
}
.game .hint .episode .season {
  display: inline-block;
}
.game .hint .episode .number {
  display: inline-block;
}
.game .hint .episode .name {
  display: inline-block;
}
.game .hint .dialog {
  margin-top: 12px;
  margin: auto auto;
  max-width: 500px;
  --border: 2px solid var(--brand);
  border-left: var(--border);
  border-right: var(--border);
  padding: var(--padding);
  font-family: var(--serif-font-name);
  font-size: 20px;
  position: relative;
}
.game .hint .dialog .text {
  font-style: italic;
}
.game .hint .dialog .character {
  font-style: italic;
  font-size: 15px;
  opacity: 0.8;
}
.game .hint .dialog .location {
  opacity: 0.8;
  font-size: 15px;
}
.game .hint .dialog::before, .game .hint .dialog::after {
  --padding: 5px;
  display: inline-block;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  color: var(--brand);
  position: absolute;
  top: calc(50% - 0.5em - var(--padding));
  background-color: var(--background-color);
  padding: var(--padding);
}
.game .hint .dialog::before {
  content: "\f10d";
  left: calc(-0.5em - 2px - var(--padding));
}
.game .hint .dialog::after {
  content: "\f10e";
  right: calc(-0.5em - 2px - var(--padding));
}
.game .options {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: var(--padding);
  padding-right: calc(var(--padding) - var(--scrollbar-width));
  margin-top: var(--padding);
  border-radius: var(--border-radius);
  background-color: var(--tone-0);
}
.game .options .option {
  padding: var(--padding);
  display: block;
  border-radius: var(--border-radius);
  list-style-type: none;
  cursor: pointer !important;
  --title-width: 72px;
}
.game .options .option:not(:last-of-type) {
  margin-bottom: 16px;
}
.game .options .option .episode-wrapper {
  display: flex;
}
.game .options .option .episode {
  min-width: var(--title-width);
}
.game .options .option .episode .number {
  display: inline-block;
  opacity: 0.7;
}
.game .options .option .summary .title {
  font-weight: bold;
}
.game .options .option .summary .synopsis {
  font-size: 12px;
  margin-top: 4px;
}
.game .options .option .summary .synopsis.blurred {
  filter: blur(3px);
}
.game .options .option:hover {
  background-color: var(--tone-1);
}
.game .options .option.incorrect {
  text-decoration: line-through;
  background-color: var(--incorrect) !important;
  box-shadow: 0px 0px var(--glow-blur-amount) var(--incorrect);
}
.game .options .option.correct {
  background-color: var(--correct) !important;
  box-shadow: 0px 0px var(--glow-blur-amount) var(--correct);
  color: var(--tone-0);
}
.game .options .option.disabled {
  cursor: not-allowed;
}

/* width */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

/* button */
::-webkit-scrollbar-button {
  background: none;
  height: var(--padding);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}

/* Track */
::-webkit-scrollbar-track {
  background: none;
}

/* XS : Smaller than mobile		*/
/* SM : Larger than mobile 		*/
/* MD : Larger than phablet 	*/
/* LG : Larger than tablet 		*/
/* XL : Larger than desktop 	*/
/* XXL: Larger than Desktop HD 	*/
/*  Mixins to show/hide */
.sm-only {
  display: none;
}

.md-only {
  display: none;
}

.lg-only {
  display: none;
}

.xl-only {
  display: none;
}

.xxl-only {
  display: none;
}

.sm-atleast {
  display: none;
}

.md-atleast {
  display: none;
}

.lg-atleast {
  display: none;
}

.xl-atleast {
  display: none;
}

.xxl-atleast {
  display: none;
}

/* Breakpoint Logic */
@media (min-width: 400px) {
  .xs-only {
    display: none;
  }

  .sm-only {
    display: unset;
  }

  .sm-atleast {
    display: unset;
  }

  .sm-until {
    display: none;
  }
}
@media (min-width: 550px) {
  .sm-only {
    display: none;
  }

  .md-only {
    display: unset;
  }

  .md-atleast {
    display: unset;
  }

  .md-until {
    display: none;
  }
}
@media (min-width: 750px) {
  .md-only {
    display: none;
  }

  .lg-only {
    display: unset;
  }

  .lg-atleast {
    display: unset;
  }

  .lg-until {
    display: none;
  }
}
@media (min-width: 1000px) {
  .lg-only {
    display: none;
  }

  .xl-only {
    display: unset;
  }

  .xl-atleast {
    display: unset;
  }

  .xl-until {
    display: none;
  }
}
@media (min-width: 1200px) {
  .xl-only {
    display: none;
  }

  .xxl-only {
    display: unset;
  }

  .xxl-atleast {
    display: unset;
  }

  .xxl-until {
    display: none;
  }
}
.modal {
  --header-height: 55px;
  --modal-window-padding: 20px;
  --transition: 300ms ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal .modal-backdrop {
  opacity: 1;
  transition: opacity var(--transition);
  display: block;
  position: fixed;
  z-index: 1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: rgba(0, 0, 0, 0.7);
  height: 100vh;
  width: 100vw;
}
.modal .modal-frame {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  transition: top var(--transition);
  transform: translate(-50%, -50%);
  border-radius: var(--border-radius);
  background-color: var(--tone-0);
  max-height: calc(100vh - var(--modal-window-padding));
}
.modal .modal-frame .modal-header {
  padding: var(--padding);
  text-align: center;
  font-weight: bold;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1.1;
}
.modal .modal-frame .modal-header .modal-close-button {
  --size: 24px;
  width: var(--size);
  height: var(--size);
  position: absolute;
  right: var(--padding);
  top: calc(var(--padding) - var(--size) / 4);
  font-size: var(--size);
}
.modal .modal-frame .modal-header .modal-close-button::after {
  content: "×";
  display: inline-block;
  cursor: pointer;
}
.modal .modal-frame .modal-content {
  min-width: 300px;
  padding: var(--padding);
  overflow-y: scroll;
  max-height: calc(100vh - var(--modal-window-padding) * 2 - var(--header-height));
}
.modal:not(.open) {
  height: 0px;
}
.modal:not(.open) .modal-backdrop {
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.modal:not(.open) .modal-frame {
  top: calc(200% + 125px);
  transition: top var(--transition);
}

#toast {
  z-index: 999 !important;
  visibility: hidden;
  transform: translateX(-50%);
  background-color: var(--tone-1);
  color: var(--tone-5);
  text-align: center;
  border-radius: 2px;
  padding: var(--padding);
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
}
#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#toast.error {
  background-color: var(--danger);
  color: var(--white);
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
.statistics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.statistics .statistic {
  flex: 1 1 0px;
  display: inline-block;
  text-align: center;
}
.statistics .statistic .value {
  font-size: 35px;
  font-weight: bold;
}
.statistics .statistic .description {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 2px;
}

.distribution {
  margin-top: var(--padding);
}
.distribution .title {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.distribution .counts .row {
  --bar-height: 20px;
  display: flex;
  gap: var(--padding);
  margin-bottom: 4px;
}
.distribution .counts .row .count {
  font-weight: bold;
  font-size: calc(var(--bar-height) - 5px);
  line-height: var(--bar-height);
  display: inline-block;
  width: 34px;
  text-align: center;
}
.distribution .counts .row .bar {
  flex: 1;
  text-align: left;
}
.distribution .counts .row .bar .filled {
  text-align: right;
  padding-right: 3px;
  display: inline-block;
  height: var(--bar-height);
  font-size: calc(var(--bar-height) - 5px);
  line-height: var(--bar-height);
  background-color: var(--green);
  color: var(--tone-0);
  border-radius: 3px;
}

.countdown {
  margin-top: var(--padding);
}
.countdown .title {
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}
.countdown .timestamp {
  margin-top: 5px;
  font-size: 35px;
}

.share {
  margin-top: var(--padding);
}

.game-options {
  margin-top: var(--padding);
}

button {
  --bg-color: var(--tone-3);
  --color: var(--tone-0);
  background-color: var(--bg-color);
  color: var(--color);
  font-weight: bold;
  border-radius: var(--border-radius);
  padding: 11px;
  font-size: 15px;
  border: none;
}
button.primary {
  --bg-color: var(--green);
  --color: var(--tone-0);
}
button.secondary {
  font-size: 12px;
  padding: 6px 9px;
  background-color: var(--tone-5);
}
button.hollow {
  background: none;
  border: 1px solid var(--tone-4);
  color: var(--tone-4);
}
button.small {
  font-size: 10px;
  padding: 6px 9px;
}

.settings-modal .settings-rows .settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  --setting-padding: calc(var(--padding) / 2);
  padding-top: var(--setting-padding);
  padding-bottom: var(--setting-padding);
  height: 40px;
}
.settings-modal .settings-rows .settings-row:not(:only-child):not(:last-child) {
  border-bottom: 1px solid var(--tone-3);
}
.settings-modal .settings-rows .settings-row .setting {
  text-align: left;
}
.settings-modal .settings-rows .settings-row .setting .icon {
  display: inline;
  margin-left: 1px;
  margin-right: 3px;
}
.settings-modal .settings-rows .settings-row .setting .title {
  display: inline;
  font-weight: bold;
  font-size: 16px;
}
.settings-modal .settings-rows .settings-row .setting .description {
  font-weight: bold;
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.9;
}
.settings-modal .settings-rows .settings-row .value a {
  font-weight: bold;
}
.settings-modal .settings-rows .settings-row .value:only-child {
  width: 100%;
}
.settings-modal .settings-rows .settings-row .value .attribution-avatar {
  max-width: 20px;
  border-radius: 50%;
  position: relative;
  top: 4px;
  right: 4px;
}
.settings-modal .settings-rows .settings-row.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}
.settings-modal .settings-rows .settings-row.sub-row {
  padding-left: 25px;
}
.settings-modal .settings-rows .settings-row.hidden {
  height: 0px;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: height var(--transition-duration);
}
.settings-modal .settings-rows .settings-row:not(.hidden) {
  transition: height var(--transition-duration), opacity var(--transition-duration);
}
.settings-modal .settings-rows .settings-row.button {
  cursor: pointer;
}
.settings-modal .settings-rows .settings-row.button:hover {
  background-color: var(--tone-1);
}

.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
  background: linear-gradient(to bottom, #fff 0%, #fff 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
  background: var(--green);
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: 30px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}

.help-modal .version-details {
  text-transform: initial;
  letter-spacing: initial;
}
.help-modal .version-details .logo {
  color: var(--logo-color);
  font-family: var(--title-font-family);
  font-weight: bold;
  font-size: 20px;
}
.help-modal .version-details .version-holder {
  font-weight: normal;
  font-size: 12px;
  margin-bottom: 10px;
}
.help-modal .version-details .version-holder .version-number {
  display: inline-block;
}
.help-modal ul {
  list-style: disc;
}
.help-modal ul li {
  margin-left: 23px;
  margin-bottom: 10px;
}
.help-modal ul li ul {
  margin-top: 10px;
}
.help-modal .modal-content {
  margin-top: calc(-1 * var(--padding));
}
.help-modal .visual-placeholder {
  border-radius: var(--border-radius);
  background-color: var(--tone-1);
  padding: var(--padding);
  margin-bottom: var(--padding);
}
.help-modal .visual-placeholder .row {
  display: flex;
  justify-content: space-between;
  color: var(--tone-0);
  gap: var(--padding);
}
.help-modal .visual-placeholder .row:not(:last-child) {
  margin-bottom: 16px;
}
.help-modal .visual-placeholder .row .number-holder {
  text-align: center;
}
.help-modal .visual-placeholder .row .number-holder .number {
  --size: 20px;
  font-size: 14px;
  height: var(--size);
  width: var(--size);
  line-height: var(--size);
  display: inline-block;
  border-radius: 50%;
  background-color: var(--incorrect);
  color: var(--tone-5);
}
.help-modal .visual-placeholder .row .bar-holder {
  flex: 1;
}
.help-modal .visual-placeholder .row .bar-holder .bar {
  display: block;
  background-color: var(--incorrect);
  width: 100%;
  border-radius: var(--border-radius);
  color: var(--tone-5);
  text-decoration: line-through;
}
.help-modal .visual-placeholder .row.correct .number {
  background-color: var(--correct);
  color: var(--tone-1);
}
.help-modal .visual-placeholder .row.correct .bar {
  background-color: var(--correct);
  color: var(--tone-1);
  text-decoration: none;
}
.help-modal .instructions {
  text-align: left;
}

input {
  border-radius: var(--border-radius);
  color: var(--tone-5);
  outline: none;
  border: 1px solid var(--tone-3);
  padding: 10px;
  background-color: var(--tone-0);
  margin: 10px;
}

.dialog-context-modal .modal-content {
  max-height: calc(100vh - var(--modal-window-padding) - 97px) !important;
}

.dialog-context-holder {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}
.dialog-context-holder .line {
  max-width: 455px;
  border-radius: var(--border-radius);
  padding: var(--padding-half);
  opacity: 0.7;
}
.dialog-context-holder .line .context-name {
  margin-bottom: 5px;
  color: var(--tone-4);
  font-size: 14px;
}
.dialog-context-holder .line .context-dialog {
  font-style: italic;
}
.dialog-context-holder .line.answer {
  border: 2px solid var(--highlight-emphassiss-color);
  opacity: 1;
}
.dialog-context-holder .line:not(.answer):hover {
  opacity: 1;
}

html {
  /* Dont highlight cursor: pointer; elements when tapped on mobile */
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

body {
  background-color: var(--background-color);
  color: var(--tone-5);
  font-family: var(--body-font-family);
}

#splash-screen {
  display: flex;
  height: 100vh;
  width: 100vw;
}
#splash-screen .centered {
  margin: auto;
}
#splash-screen .centered .loading-icon {
  font-size: 64px;
  color: var(--tone-3);
  text-shadow: 0px 6px 9px rgba(0, 0, 0, 0.3);
}
#splash-screen .centered .loading-message {
  color: var(--tone-3);
}

a {
  color: var(--tone-5);
}

hr {
  border: 0 none;
  height: 1px;
  background-color: var(--tone-3);
}

button {
  cursor: pointer;
  --icon-padding: 4px;
  --small-icon-padding: 2px;
}
button i:first-of-type {
  margin-right: var(--icon-padding);
}
button i:last-of-type {
  margin-left: var(--icon-padding);
}
button.small i:first-of-type {
  margin-right: var(--small-icon-padding);
}
button.small i:last-of-type {
  margin-left: var(--small-icon-padding);
}
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}