/**
 * FONTS
 */

/**
 * BASE STYLES
 */

@font-face {
  font-family: 'Comic Sans MS';
  src: local('Comic Sans MS'),
    url('ComicNeue-Regular.woff2') format('woff2'),
    url('ComicNeue-Regular.woff') format('woff');
  font-weight: normal;
}

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

:root {
  --black: #000;
  --white: #fff;
  --grey-1: #c0c7cb;
  --blue-1: #00518c;
  --blue-2: #000c4b;
  --blue-3: #062f67;
  --blue-4: #3959a5;
  --blue-5: #00ffff;
  --blue-6: #000029;
  --box-shadow-1: inset -1px -1px 3px 3px rgba(0, 0, 0, 0.9),
  inset 6px 0 1px 1px rgba(255, 255, 255, 0.1),
  inset 0 4px 2px 1px rgba(255, 255, 255, 0.6);

  --checkbox-width: 15px;
  --radio-width: 15px;
  --radio-label-spacing: 12px;

  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 9px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
  var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 13px;
  --checkmark-top: 1px;
  --checkmark-left: 1px;

  --element-spacing: 8px;
  --grouped-element-spacing: 6px;

  font-family: 'Comic Sans MS', cursive;
  color: var(--grey-1);
  letter-spacing: 0.04em;
}

body {
  background-color: var(--blue-2);
  box-shadow: var(--box-shadow-1);
  padding: 20px;
}

button,
label,
input,
textarea,
select,
option {
  font-family: 'Comic Sans MS', cursive;
}

/**
 * FOCUS STATES
 */

*:focus {
  outline: 1px solid var(--white);
  outline-offset: 2px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  outline-offset: -4px;
}

input[type="radio"]:focus + label,
input[type="checkbox"]:focus + label {
  outline: 1px solid var(--white);
}

/*
 * Undo all the above focus styles
 * if the element has focus but the browser wouldn't normally
 * show default focus styles
 */
*:focus:not(:focus-visible) {
  outline: none;
}

/**
 * SCROLLBARS
 */

::-webkit-scrollbar {
  width: 18px;
  background-color: var(--blue-4);
  border-radius: 6px;
  box-shadow: inset 1px 0 2px 1px var(--blue-3);
  border: 1px solid #4b5e8e;
}

::-webkit-scrollbar:horizontal {
  height: 18px;
}

::-webkit-scrollbar-track {

}

::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--blue-1);
  background-image: svg-load('./svg/scrollbar-thumb-vertical.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  box-shadow: inset -1px -1px 3px 3px var(--blue-3),
    inset 2px 2px 2px 1px rgba(255, 255, 255, 0.9);
}

::-webkit-scrollbar-thumb:horizontal {
  background-image: svg-load('./svg/scrollbar-thumb-horizontal.svg');
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  border-radius: 8px;
  background-color: var(--blue-1);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  box-shadow: inset -1px -1px 3px 3px var(--blue-3),
    inset 2px 2px 2px 1px rgba(255, 255, 255, 0.9);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  width: 21px;
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  height: 21px;
}

::-webkit-scrollbar-button:horizontal:start {
  background-image: svg-load('./svg/arrow-left.svg');
}

::-webkit-scrollbar-button:horizontal:end {
  background-image: svg-load('./svg/arrow-right.svg');
}

::-webkit-scrollbar-button:vertical:start {
  background-image: svg-load('./svg/arrow-up.svg');
}

::-webkit-scrollbar-button:vertical:end {
  background-image: svg-load('./svg/arrow-down.svg');
}

/*
 * The game doesn't seem to show horizontal and vertical scrollbars together
 * anywhere, so I've just used a solid colour for the corner where they meet
 */
::-webkit-scrollbar-corner {
  background-color: var(--blue-2);
}

/**
 * HEADINGS
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

/**
 * LINKS
 */

a {
  color: var(--grey-1);
}

/**
 * INPUT LABELS
 */

label {
  line-height: 15px;
  font-size: 12px;
}

label.block {
  display: block;
  margin-bottom: var(--element-spacing);
}

/**
 * INPUTS: TEXT
 */

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  border: 0;
  border-radius: 9px;
  background-color: var(--blue-6);
  font-size: 13px;
  height: 27px;
  padding: 4px 9px;
  color: var(--white);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow:
    /* Top Left */
    0 0 1px 3px rgb(0, 0, 48),
    /* Bottom Right */
    0 0 1px 4px rgb(0, 0, 74),
    3px 2px 1px 1px rgba(255, 255, 255, 1),
    2px 2px 1px 1px rgba(255, 255, 255, 1),
    /* Inside */
    inset -1px -1px 1px 4px rgba(0, 0, 48, 0.9),
    inset 3px 0 1px 1px rgba(255, 255, 255, 0.1),
    inset 1px 2px 1px 1px rgba(255, 255, 255, 0.8);
}

textarea {
  height: auto;
  /**
   * 'resize: none' is bad for usability but included here for an accurate
   * reproduction — size your textareas appropriately or else remove this rule
   */
  resize: none;
}

/**
 * INPUTS: RADIO + CHECKBOX
 */

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background: 0;
  position: fixed;
  opacity: 0;
  border: none;
}

input[type="radio"] + label {
  position: relative;
  margin-left: var(--radio-total-width);
}

input[type="radio"] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--radio-total-width-precalc)));
  display: inline-block;
  width: var(--radio-width);
  height: var(--radio-width);
  margin-right: var(--radio-label-spacing);
  border: 1px solid var(--grey-1);
  border-radius: 50%;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.8),
    inset 1px 1px 1px 0 rgba(0, 0, 0, 0.8);
}

input[type="radio"]:checked + label::before {
  border-color: var(--blue-5);
}

input[type="radio"]:checked + label::after {
  content: "";
  display: block;
  width: var(--radio-dot-width);
  height: var(--radio-dot-width);
  top: var(--radio-dot-top);
  left: var(--radio-dot-left);
  position: absolute;
  background: svg-load("./svg/radio-dot.svg");
}

input[type="checkbox"] + label {
  position: relative;
  margin-left: var(--checkbox-total-width);
}

input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--checkbox-total-width-precalc)));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  border: 1px solid var(--grey-1);
  border-radius: 2px;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.8),
    inset 1px 1px 1px 0 rgba(0, 0, 0, 0.8);
  margin-right: var(--radio-label-spacing);
}

input[type="checkbox"]:checked + label::before {
  border-color: var(--blue-5)
}

input[type="checkbox"]:checked + label::after {
  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  top: var(--checkmark-top);
  left: calc(
    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
  );
  background: svg-load("./svg/checkmark.svg");
}

/**
 * In the game, the label and the input have independent hover styles,
 * but in CSS you can't style :hover pseudo-class on a pseudo-element so
 * they're styled together here
 */
input[type="radio"] + label:hover,
input[type="checkbox"]+ label:hover {
  color: var(--white)
}

input[type="radio"] + label:hover::before,
input[type="checkbox"] + label:hover::before {
  border-color: var(--white);
}

/**
 * INPUTS: RANGE
 */

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 13px;
  width: 7px;
  background-image: svg-load("./svg/indicator-horizontal.svg");
  transform: translateY(-5.5px);
  filter: drop-shadow(0px 0px 1px var(--black));
}

input[type="range"]::-moz-range-thumb {
  height: 13px;
  width: 7px;
  border: 0;
  border-radius: 0;
  /* For some reason this doesn't work with the 'background-image' property */
  background: svg-load("./svg/indicator-horizontal.svg");
  filter: drop-shadow(0px 0px 1px var(--black));
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  box-sizing: border-box;
  background: transparent;
  border-top: 2px solid var(--grey-1);
  border-right: 3px solid var(--grey-1);
  border-bottom: 2px solid var(--grey-1);
  border-left: 3px solid var(--grey-1);
  border-radius: 3px;
  box-shadow: 1px 1px 1px var(--black), inset 1px 1px 0 var(--black);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 6px;
  box-sizing: border-box;
  background: transparent;
  border-top: 2px solid var(--grey-1);
  border-right: 3px solid var(--grey-1);
  border-bottom: 2px solid var(--grey-1);
  border-left: 3px solid var(--grey-1);
  border-radius: 3px;
  box-shadow: 1px 1px 0 var(--black), inset 1px 1px 0 var(--black);
}

/**
 * BUTTON
 */

button {
  font-size: 16px;
  line-height: 27px;
  font-family: 'Comic Sans MS', cursive;
  min-width: 100px;
  height: 27px;
  color: var(--grey-1);
  position: relative;
  border: 0;
  padding: 0 24px;
  background-color: transparent;
  white-space: nowrap;
  transition: color 0.05s ease, transform 0.05s ease;
}

button:hover {
  color: var(--white);
}

button:active {
  color: var(--blue-5);
  transform: translate(2px, 2px);
}

button::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 27px;
  border-radius: 10px;
  top: 0;
  left: 0;
  border: 0;
  background-color: var(--blue-1);
  box-shadow: -1px -1px 2px 0 var(--black),
    1.5px 0.5px 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 2px 3px var(--blue-3),
    inset 2px 1px 1px 2px var(--white);
}

button.skew::before {
  /**
   * did some maths here, probably unnecessary / incorrect
   * tan 20deg = y / 36
   * y / 36 = tan 20deg
   * y = 36 tan 20deg
   * y = 36 * 0.364
   * y = 9.464
   */
  width: calc(100% - 9.464px);
  left: -4.732px;
  border-radius: 12px / 16px;
  transform: skew(-36deg);
  transform-origin: left bottom;
}

/**
 * BUTTON GROUP
 */

.button-group {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: -8px;
}

.button-group > * {
  margin-bottom: 8px;
}

/**
 * MODALS
 */

.modal {
  max-width: 547px;
  position: relative;
  padding: 21px;
  box-shadow: var(--box-shadow-1);
}

.modal h2 {
  text-align: center;
}

.modal img {
  float: left;
  margin-right: 16px;
  margin-bottom: 8px;
}

/**
 * FIELD ROW
 */

.field-row {
  display: flex;
  align-items: center;
}

[class^="field-row"] + [class^="field-row"] {
  margin-top: var(--grouped-element-spacing);
}

.field-row > * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}