:root {
  /* Colours */
  --offwhite: #fbfde3;
  --dark: #2e2230;
  --darker: #1d131d;
  --orange: #fc8314;
  --red: #ec5809;
  --grey: #999;

  /* Fonts */
  --font-size: clamp(16px, 4vw, 28px);
}

::selection {
  background: var(--orange);
  color: var(--darker);
}

body {
  margin: 0;
  font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
  color: var(--offwhite);
  background: var(--darker);
  background-image: linear-gradient(180deg, rgba(251, 253, 227, 0.10) 1%, rgba(252, 131, 20, 0.08) 51%, rgba(236, 88, 9, 0.07) 100%),
                    radial-gradient(circle, rgba(27, 27, 50, 1) 50%, rgba(6, 6, 24, 1) 100%);
}


#morph {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: relative;
  padding: calc(10px + .5em) .5em .5em;
}

#header-center {
  display: flex;
  justify-content: center;
  gap: .5em;

  #answer-progress,
  #scoring-icon,
  #venn-conversation {
    display: flex;
    align-items: center;
    gap: .25em;
    padding: .25em 1ch;
  }

  .chip-label {
    color: rgb(from var(--offwhite) r g b / 55%);
  }
}

#menu-trigger {
  justify-self: end;
  display: flex;
  align-items: center;

  > .material-icons {
    padding: 0 .5ch;
    color: rgb(from var(--offwhite) r g b / 70%);
    cursor: pointer;
    user-select: none;
  }
}

#top-menu {
  display: flex;
  align-items: stretch;
  gap: .5em;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  transition: max-width 0.25s ease-out;

  #end-game {
    display: flex;
  }

  .btn {
    display: flex;
    align-items: center;
    transform: none;
    padding: .25em 1ch;
    border-color: var(--darker);

    &::before, &::after {
      display: none;
    }
  }
}

#menu-trigger:hover #top-menu,
#top-menu.open {
  max-width: 40rem;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  font-size: var(--font-size);
}

h1, h2, h3, h4, h5 {
  color: rgb(from var(--offwhite) r g b / 80%);
  text-shadow: 1px 2px 0px var(--darker);
  margin: 0 0 .2em 0;
}

h1 {
  display: flex;
  align-self: flex-start;
  font-weight: 700;
  margin: .5em;
  color: var(--orange);
}

#sections {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-evenly;
  align-self: center;
  width: 90vw;
  gap: 1em;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

table {
  table-layout: fixed;
  margin: 10px auto;
  border-collapse: collapse;

  caption {
    margin: .5em 0;
  }

  td, th {
    text-align: left;
    padding: .25em 0;
  }
}

#lobby {
  font-size: 1.3em;

  table tr {
    animation: 1s ease-in fade-in;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

a {
  color: var(--orange);

  &:hover {
    color: var(--red);
  }
}

footer {
  display: flex;
  justify-content: center;
  background: rgb(from var(--darker) r g b / 50%);
  padding: 0 1em;

  abbr {
    text-decoration: none;
  }

  a {
    text-decoration: underline;
  }
}

button, a {
  &:focus {
    outline-color: var(--orange);
  }
}

input,
button,
select {
  font: inherit;
}

@supports (appearance: base-select) {
  select, ::picker(select) {
    appearance: base-select;
  }

  option {
    padding: .5em;
    background-color: var(--dark);
    color: var(--offwhite);

    &:hover {
      background-color: var(--darker);
    }

    &::checkmark {
      content: "‣";
    }
  }

  ::picker(select) {
    box-shadow: 0 3px 0 var(--darker);
  }
}

.btn {
  color: var(--offwhite);
  background-color: var(--dark);
  border-color: var(--darker);
  border: 3px solid;
  border-radius: 5px;
  padding: .5lh 2ch;
  position: relative;
  top: -5px;
  left: -5px;
  z-index: 1;
  cursor: pointer;

  &:hover:not(:disabled) {
    box-shadow: 0 .25em .75em var(--darker);
  }

  &:disabled {
    cursor: inherit;
    filter: grayscale(1);
  }

  &:before, &:after {
    border: 3px solid;
    border-color: var(--darker);
    border-radius: 3px;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
  }

  &:before {
    background-color: var(--dark);
    left: -5px;
    top: -5px;
    z-index: -1;
  }

  &:after {
    background-color: var(--darker);
    left: -3px;
    right: 0;
    top: -3px;
    z-index: -2;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }
}

.btn, .btn:before, .btn:after {
  transition: all 1s ease-in;
}

.btn-primary {
  color: var(--dark);
  background-color: var(--orange);
  border-color: var(--red);

  &:before, &:after {
    border-color: var(--red);
  }

  &:before {
    background-color: var(--orange);
  }

  &:after {
    background-color: var(--red);
  }
}

input[type="text"], input[type="number"] {
  background: var(--offwhite);
  color: var(--dark);
  border: 3px solid;
  border-color: var(--darker);
  padding: .5em;
  position: relative;
  top: -5px;
  font-size: var(--font-size);

  &:focus {
    outline: 0;
  }
}

input[type="number"] {
  width: 3em;
}

label {
  padding: .5em;
}

#qrcode {
  display: flex;
  border: solid 3px var(--dark);
  margin: 0;

  svg {
    height: max(20dvw, 300px);
    width: max(20dvw, 300px);
  }
}

#cookie-warning {
  width: 100vw;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  color: var(--offwhite);
  background: var(--dark);
  z-index: 9999;
}

#error-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-height: 90dvh;
  overflow-y: auto;
  padding: .5em 1em;
  color: var(--offwhite);
  background-color: var(--dark);
  border: solid 3px var(--darker);
  box-shadow: 0 3px 0 var(--darker);
  font-size: var(--font-size);
  z-index: 9999;

  &::after {
    content: '';
    position: fixed;
    inset: 0;
    background: hsl(from var(--darker) h s l / 0.5);
    backdrop-filter: blur(2px);
    z-index: -1;
  }

  pre {
    text-align: left;
    margin: .5em;
    padding: .5em;
    white-space: pre-wrap;
  }
}

.copy-button-wrapper {
  margin-right: -5px;
}

#copy-join-url {
  width: 8em;
  left: -5px;
}

#waiting-for-players {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;

  svg {
    display: inline-block;
    width: 2em;
    fill: var(--offwhite);
  }

}

#content {
  display: flex;
  flex: 1;
  align-self: center;
  max-width: 800px;
  margin: .5em;
  position: relative;
  text-align: center;
}

#scoring-icon svg {
  height: 2em;
  width: 2em;
  filter: drop-shadow(1px 2px 0 var(--darker));
}

#question-container {
  display: flex;
  flex-direction: column;
  gap: .5rem;

  #question {
    text-align: center;

    img {
      border: solid 3px var(--dark);
      max-height: 40vh;
    }
  }
}


#answers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: .3em;
  list-style-type: none;
  position: relative;
  padding: 0;
  margin: .5em 0;

  input[type="checkbox"] {
    display: none;
  }

  label {
    display: inline-block;
    box-sizing: border-box;
    padding: .5em;

    &:has(input:disabled) {
      cursor: inherit;
      pointer-events: none;
    }
  }
}

.note {
  text-align: left;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em .75em;
}

#choices label {
  display: flex;
  padding: .75em;
}

.answer {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: .75em;
  text-align: center;
  animation: 1s ease-in fade-in;

  &.revealed {
    background-color: var(--offwhite);
    color: var(--dark);
    box-shadow: 3px 3px 0 var(--dark);

    svg {
      fill: var(--dark);
    }
  }

  .answer-frequency {
    display: flex;
    height: 3px;
    width: 100%;
    margin-top: auto;
  }
}

.incorrect {
  opacity: 0.5;
}

/* Timer */

.timer div {
  position: fixed;
  top: 0;
  right: 0;
  height: 10px;
  width: 100%;
  background: linear-gradient(to bottom, var(--orange), var(--red));
  animation: timer var(--duration) linear forwards;
  transform-origin: right center;
  box-shadow: 0 1px 0 var(--darker);
}

@keyframes timer {
  to {
    transform: scaleX(0);
  }
}

.percentage {
  padding: 0 .25em;
  display: inline-block;
  width: 3em;
}

.range-input {
  display: flex;
  justify-content: center;
  max-width: 400px;

  input {
    width: 50vw;
    accent-color: var(--orange);
  }
}

#leaderboard {
  display: flex;
  flex-direction: column;
  align-items: center;

  table {
    border-collapse: separate;
    border-spacing: 0 .25em;

    tbody {
      background:
        linear-gradient(to bottom, transparent, rgb(from var(--darker) r g b / 60%)),
        var(--dark);
    }

    tr {
      thead & {
        background-color: unset;
      }

      tbody & {
        background:
          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>"),
          radial-gradient(ellipse at center, transparent 50%, rgb(from var(--darker) r g b / 50%) 100%),
          transparent;
        border-radius: 6px;
        box-shadow:
          0 4px 8px rgb(from var(--darker) r g b / 60%),
          inset 0 0 0 2px rgb(from var(--darker) r g b / 50%),
          inset 0 -4px 0 0 rgb(from var(--darker) r g b / 50%);

        td:first-child {
          border-radius: 6px 0 0 6px;
          color: var(--offwhite);
          text-shadow: 0 1px 0 rgb(from var(--offwhite) r g b / 20%);
        }

        td:last-child {
          border-radius: 0 6px 6px 0;
        }
      }

    }

    caption {
      padding: 1ex 2ch;
      margin-bottom: .5em;
      color: rgb(from var(--offwhite) r g b / 45%);

      progress {
        display: block;
        width: 100%;
        margin-top: .5ex;
        background-color: var(--darker);
        border-radius: 3px;

        &::-webkit-progress-bar {
          background-color: var(--darker);
          border-radius: 3px;
          overflow: hidden;
        }

        &::-webkit-progress-value {
          border-radius: 0;
        }

        &::-moz-progress-bar {
          border-radius: 0;
        }
      }
    }

    th, td {
      padding: 1ex 1ch;
    }

    tbody td {
      padding: 1.5ex 2ch;
      font-weight: 700;
      color: color-mix(in hsl, var(--offwhite), var(--orange) 10%);

      &:first-child {
        padding-right: .5ch;
      }

      &:nth-child(2) {
        padding-left: .5ch;
      }

      &:last-child {
        text-shadow: -1px -1px 0 var(--darker), 1px -1px 0 var(--darker), -1px 1px 0 var(--darker), 1px 1px 0 var(--darker);
      }
    }

    thead th, thead td {
      padding-bottom: .25ex;
      padding-inline: 2ch;

      &:nth-child(2) {
        padding-left: .5ch;
      }

      background: linear-gradient(to bottom, hsl(from var(--orange) h s calc(l + 15)), var(--orange));
      background-clip: text;
      color: transparent;
    }

    tr td:last-child {
      text-align: right;
    }

    .score-bar {
      display: inline-block;
      background-color: var(--orange);
      box-shadow: 1px 1px 0 var(--darker);
      width: calc(var(--score) * 100px);
      height: .5em;
      vertical-align: middle;
    }
  }
}

#sortableList {
  margin: 0;
  padding-left: 0;

  li {
    display: flex;
    justify-content: space-between;
    background-color: var(--dark);
    border: solid 3px var(--darker);
    list-style-type: none;
    text-align: left;
    padding: .5em 1em;
    margin-block-end: .25em;
    cursor: grab;
    box-shadow: 0 3px 1px var(--darker);
  }

  .sortable-ghost {
    opacity: 0.25;
  }

  &.disabled {
    pointer-events: none;
    cursor: inherit;
  }
}

progress {
  border: none;
  background-color: var(--offwhite);
  text-align: left;
  height: 8px;
  vertical-align: middle;
  container-type: inline-size;

  &::-webkit-progress-bar {
    background-color: var(--offwhite);
  }

  &::-webkit-progress-value {
    background: linear-gradient(90deg, var(--orange), var(--red));
    background-size: 100cqi;
  }

  &::-moz-progress-bar {
    background: linear-gradient(90deg, var(--orange), var(--red));
    background-size: 100cqi;
  }
}

.waiting-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5em 0;

  i.material-icons {
    font-size: 3em;
  }

  svg {
    display: flex;
    animation: 3s ease-in-out infinite alternate pendulum;
    transform-origin: top center;
  }

  .shadow {
    display: flex;
    width: 90px;
    height: 45px;
    background: rgba(from var(--darker) r g b / 50%);
    border-radius: 50%;
    margin: .5em auto 0;
    animation: 3s ease-in-out infinite alternate moveShade;
  }
}

@keyframes pendulum {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(45deg);
  }
}

@keyframes moveShade {
  0% {
    transform: translateX(30px) scale(1.4, .5);
    filter: blur(8px);
  }
  50% {
    filter: blur(5px);
  }
  100% {
    transform: translateX(-30px) scale(1.4, .5);
    filter: blur(8px);
  }
}

#lang-switch {
  span {
    display: inline-block;
    padding: 0 4px;
    vertical-align: top;
  }

  label {
    font-size: inherit;
    padding: 0;
  }

  .offscreen {
    position: absolute;
    left: -9999px;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: var(--darker);
    border-radius: 20px;
    transition: transform 0.3s;
  }

  .switch::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 18px;
    background-color: var(--offwhite);
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
    cursor: pointer;
  }

  input[type="checkbox"]:checked + .switch::after {
    transform: translateX(20px);
  }
}

.error i.material-icons {
  font-size: 2em;
  margin-right: .2em;
  vertical-align: middle;
  color: var(--orange);
}

.tabs {
  display: flex;
  flex-flow: row wrap;
  max-width: 60em;

  input[type="radio"] + label {
    cursor: pointer;
    order: 1;
    margin-bottom: -1px;
    padding: .5em 1em;
    color: var(--grey);
    z-index: 1;
    transition: color .4s;

    &:hover {
      color: var(--orange);
    }
  }

  form {
    padding: 1em;
    margin-bottom: 1.5em;
    border: solid 1px var(--darker);
    box-shadow: 0px 3px 0 var(--darker);
    z-index: 0;
  }

  input[type="radio"]:checked + label {
    cursor: inherit;
    border: solid 1px var(--darker);
    border-radius: 6px 6px 0 0;
    border-bottom-color: transparent;
  }

  input[type="radio"]:checked + label, [type="radio"]:checked + label + *  {
    color: var(--offwhite);
    background-color: var(--dark);
  }

  input[type="radio"] {
    display: none;
  }

  input[type="radio"] + label + * {
    width: 100%;
    order: 2;
  }

  input[type="radio"]:not(:checked) + label + * {
    display: none;
  }
}

#question-picker {
  color: var(--offwhite);
  background-color: var(--dark);
  border: 3px solid var(--darker);
  border-radius: 5px;
  box-shadow: 2px 2px 0 var(--darker);
  padding: .5em;
  cursor: pointer;

  &:focus {
    outline: 0;
  }
}

input::file-selector-button {
  color: var(--offwhite);
  background-color: var(--dark);
  border: solid 3px var(--darker);
  border-radius: 5px;
  padding: .5em;
  cursor: pointer;
  margin-right: .5em;
}

#player-name-input {
  display: flex;
}

@media (max-width: 950px) or (orientation: portrait) {
  #player-name-input {
    flex-direction: column;
    gap: .5em;
    align-items: center;
  }
}

#player-name {
  border: none;

  &:focus {
    outline-width: 2px;
  }

  &:user-invalid {
    outline-color: var(--red);
  }
}

.verdict {
  display: flex;
  flex-direction: column;
  gap: .5em;

  i.material-icons {
    font-size: 3em;
  }
}

body:has(.winner) {
  background-image: none;
  animation: 3s ease-in-out infinite alternate pulsate;

  footer {
    display: none;
  }
}

@keyframes pulsate {
  from {
    background-color: var(--dark);
    color: var(--offwhite);
  }
  to {
    background-color: var(--offwhite);
    color: var(--dark);
  }
}

#game-url {
  display: flex;

  input {
    user-select: all;
  }
}


#end-game-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5em 1em;
  color: var(--offwhite);
  background-color: var(--dark);
  border: solid 3px var(--darker);
  box-shadow: 0 3px 0 var(--darker);
  font-size: var(--font-size);

  p {
    display: flex;
    gap: .5rem;
  }

  &::backdrop {
    background: hsl(from var(--darker) h s l / 0.5);
    backdrop-filter: blur(2px);
  }
}

#venn-conversation {
  svg {
    width: 3em;
    height: 3em;
  }

  g {
    stroke: var(--darker);
    fill: var(--offwhite);
  }
}

#answer-progress progress {
  margin-left: .5rem;
}

#open-answers {
  background-color: var(--dark);
  border: solid 3px var(--darker);

  caption {
    text-transform: uppercase;
    font-size: .7em;
    color: var(--orange);
  }

  td, th {
    text-align: left;
    padding: .5ex 1ch;
  }
}

i.material-icons {
  vertical-align: middle;
  padding: 0 .2em;

  svg {
    width: 1em;
    height: 1em;
  }

  &.md-large svg {
    width: inherit;
    height: inherit;
  }

  &.md-dark svg {
    fill: var(--dark);
  }

  &.answer-mark svg {
    width: 3em;
    height: 3em;
    filter: drop-shadow(0 3px 0 var(--darker));
  }
}

i.score-direction {
  font-style: normal;
  padding-left: .25em;
}