@charset "UTF-8";
.card, .card_back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 2/3;
  font-family: finalsix, sans-serif;
  border: 5px solid;
  border-radius: 1rem;
  outline: 5px solid #000000;
  transition: border-color 0.5s; }

.color_gradient:nth-child(5n+1), .card_wrapper:nth-child(5n+1) .card_back {
  background: linear-gradient(180deg, #000000 0%, #52CA76 100%); }

.color_gradient:nth-child(5n+2), .card_wrapper:nth-child(5n+2) .card_back {
  background: linear-gradient(180deg, #000000 0%, #65D3E4 100%); }

.color_gradient:nth-child(5n+3), .card_wrapper:nth-child(5n+3) .card_back {
  background: linear-gradient(180deg, #000000 0%, #385CC4 100%); }

.color_gradient:nth-child(5n+4), .card_wrapper:nth-child(5n+4) .card_back {
  background: linear-gradient(180deg, #000000 0%, #A88EFF 100%); }

.color_gradient:nth-child(5n+5), .card_wrapper:nth-child(5n+5) .card_back {
  background: linear-gradient(180deg, #000000 0%, #FD90FE 100%); }

.card_wrapper:nth-child(5n+1) .card, .card_wrapper:nth-child(5n+1) .card_back {
  border-color: #52CA76; }

.card_wrapper:nth-child(5n+2) .card, .card_wrapper:nth-child(5n+2) .card_back {
  border-color: #65D3E4; }

.card_wrapper:nth-child(5n+3) .card, .card_wrapper:nth-child(5n+3) .card_back {
  border-color: #385CC4; }

.card_wrapper:nth-child(5n+4) .card, .card_wrapper:nth-child(5n+4) .card_back {
  border-color: #A88EFF; }

.card_wrapper:nth-child(5n+5) .card, .card_wrapper:nth-child(5n+5) .card_back {
  border-color: #FD90FE; }

.color_shadow:nth-child(5n+1), .card_selected:nth-child(5n+1) .card {
  box-shadow: 0px -15px 15px #52CA76;
  background: linear-gradient(180deg, #FFFFFF 40%, #52CA76 100%); }

.color_shadow:nth-child(5n+2), .card_selected:nth-child(5n+2) .card {
  box-shadow: 0px -15px 15px #65D3E4;
  background: linear-gradient(180deg, #FFFFFF 40%, #65D3E4 100%); }

.color_shadow:nth-child(5n+3), .card_selected:nth-child(5n+3) .card {
  box-shadow: 0px -15px 15px #385CC4;
  background: linear-gradient(180deg, #FFFFFF 40%, #385CC4 100%); }

.color_shadow:nth-child(5n+4), .card_selected:nth-child(5n+4) .card {
  box-shadow: 0px -15px 15px #A88EFF;
  background: linear-gradient(180deg, #FFFFFF 40%, #A88EFF 100%); }

.color_shadow:nth-child(5n+5), .card_selected:nth-child(5n+5) .card {
  box-shadow: 0px -15px 15px #FD90FE;
  background: linear-gradient(180deg, #FFFFFF 40%, #FD90FE 100%); }

.card.card_color_1 {
  border-color: #52CA76 !important; }

.card.card_color_2 {
  border-color: #65D3E4 !important; }

.card.card_color_3 {
  border-color: #385CC4 !important; }

.card.card_color_4 {
  border-color: #A88EFF !important; }

.card.card_color_5 {
  border-color: #FD90FE !important; }

.card_name,
.card_category,
.card_label,
.card_error,
.card_loading {
  text-align: center;
  padding: 0; }

.card_name {
  font-weight: bold;
  font-size: 1.4rem; }

.card_category {
  font-size: 1.2rem;
  border-bottom: 1px solid;
  padding-bottom: 0;
  margin: -2rem 1rem 1rem; }

.category_header {
  margin-top: 1rem;
  cursor: pointer;
  padding: 0.5rem;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid; }

.category_header:after {
  content: "▼";
  transition: transform 0.5s;
  float: right;
  padding: 0; }

.category_off .category_header:after {
  transform: rotate(90deg); }

.category_on .category_header:after {
  transform: rotate(0); }

.card_loading {
  font-family: wreath, serif; }

.card_list_wrapper {
  overflow-y: scroll;
  border-top: 1px solid;
  border-left: 1px solid;
  transition: height 1s, border 1s; }

.card_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 4rem;
  margin: 2rem 0;
  border-radius: 2rem; }

.show_hide {
  float: right;
  transform: rotate(90deg);
  transition: transform 0.5s;
  cursor: pointer; }
  .show_hide.show_hide_on {
    transform: rotate(0); }

.show_card_list {
  height: 70vh;
  border-top: 1px solid; }

.hide_card_list {
  height: 0vh;
  border-top: 0.5rem solid; }

.card_wrapper {
  display: inline; }

.card_unclaimed_random {
  cursor: pointer; }

.card_display {
  transform: scale(1);
  transition: transform 1s;
  position: relative;
  z-index: 10;
  text-align: center; }

.enhance_card_display {
  transform: scale(1.5); }

.card_reveal {
  position: relative;
  animation: reveal 1s 1;
  animation-fill-mode: forwards;
  transition: transform; }

.card_confirmation {
  position: fixed;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s; }
  .card_confirmation.confirm_card {
    opacity: 1;
    pointer-events: auto; }
  .card_confirmation.receive_card {
    opacity: 1;
    pointer-events: auto; }
  .card_confirmation .card {
    height: 50vh;
    width: auto; }
    .card_confirmation .card .card_name, .card_confirmation .card .card_category {
      font-size: 4vh; }

.card_confirm_buttons {
  display: flex;
  gap: 1rem; }

.selectable_card_list {
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  overflow: hidden;
  justify-content: center; }

.category_selector {
  border-radius: 1rem; }
  .category_selector .selectable_card_list, .category_selector .category_header {
    border-radius: 1rem; }

.category_off .selectable_card_list {
  max-height: 0;
  padding: 0;
  transition: max-height 1s, padding 0.25s 0.75s; }

.category_on .selectable_card_list {
  max-height: 2000px;
  padding: 1.5rem 0 0.5rem;
  transition: max-height 2s, padding 0.25s; }

.selectable_card {
  font-size: 1.4rem;
  cursor: pointer;
  height: 6rem;
  border-width: 5px; }
  .selectable_card:disabled, .selectable_card.disabled {
    cursor: crosshair;
    background-image: none !important;
    border-width: 1px;
    font-weight: normal; }

.card_button {
  display: block;
  border: none;
  background: none;
  padding: 0;
  box-sizing: unset;
  cursor: pointer;
  transition: transform 0.2s;
  transform: scale(1); }

.get_card,
.next_card,
.next_step {
  animation: button_float 1s infinite ease-in-out; }

.claim_rewards {
  display: flex; }

.purchase_complete .claim_rewards {
  flex-direction: row; }
  .purchase_complete .claim_rewards .claim_text {
    display: none; }

.claim_random_link,
.claim_chosen_link {
  display: block; }
  .claim_random_link a, .claim_random_link .icon,
  .claim_chosen_link a,
  .claim_chosen_link .icon {
    display: block;
    width: 6rem;
    height: 7rem;
    background-size: contain;
    position: relative; }
    .claim_random_link a .claim_text, .claim_random_link .icon .claim_text,
    .claim_chosen_link a .claim_text,
    .claim_chosen_link .icon .claim_text {
      position: absolute;
      top: 15px;
      right: 20px;
      padding: 2px 5px;
      text-wrap: nowrap;
      border: 1px solid; }

.claim_rewards_home {
  flex-direction: row;
  position: fixed;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1; }
  .claim_rewards_home .claim_random_link,
  .claim_rewards_home .claim_chosen_link {
    display: block; }
    .claim_rewards_home .claim_random_link a, .claim_rewards_home .claim_random_link .icon,
    .claim_rewards_home .claim_chosen_link a,
    .claim_rewards_home .claim_chosen_link .icon {
      display: inline-block;
      position: relative; }
      .claim_rewards_home .claim_random_link a .claim_text, .claim_rewards_home .claim_random_link .icon .claim_text,
      .claim_rewards_home .claim_chosen_link a .claim_text,
      .claim_rewards_home .claim_chosen_link .icon .claim_text {
        text-decoration: none !important;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s;
        z-index: 10; }
      .claim_rewards_home .claim_random_link a:hover .claim_text, .claim_rewards_home .claim_random_link .icon:hover .claim_text,
      .claim_rewards_home .claim_chosen_link a:hover .claim_text,
      .claim_rewards_home .claim_chosen_link .icon:hover .claim_text {
        opacity: 1; }

.claim_random_icon,
.claim_chosen_icon {
  display: inline-block;
  width: 3rem;
  height: 3.5rem;
  background-size: contain;
  position: relative;
  top: 10px; }

.claim_random_link a,
.claim_random_link .icon,
.claim_random_icon {
  background-image: url("/images/product/rewards-random.png"); }

.claim_chosen_link a,
.claim_chosen_link .icon,
.claim_chosen_icon {
  background-image: url("/images/product/rewards-chosen.png"); }

.claim_random_count,
.claim_chosen_count {
  font-weight: bold;
  border: 1px solid;
  border-radius: 2rem;
  display: inline-block;
  text-align: center;
  min-width: 1.5rem;
  height: 2.5rem;
  line-height: 2.5rem;
  position: absolute;
  bottom: -0.5rem;
  right: 0.5rem;
  padding: 0 5px; }

.cards_modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  transition: opacity 1s; }
  .cards_modal.show_cards_modal {
    opacity: 1; }
  .cards_modal.hide_cards_modal {
    opacity: 0;
    pointer-events: none; }
  .cards_modal .card_list {
    position: absolute;
    margin: 0;
    top: 9rem;
    left: 0;
    bottom: 9rem;
    right: 0;
    overflow-y: auto;
    border-left: 0px solid;
    border-right: 0px solid;
    border-radius: 0; }

.deck_name_header {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0; }
  .deck_name_header a {
    font-weight: normal;
    font-size: 1.6rem;
    padding: 0.3rem 0; }

.deck_details {
  width: 100%; }

.delete_deck {
  text-align: right; }

.deck_editor {
  margin: 0;
  display: flex;
  gap: 2rem; }

.deck_owned_cards,
.deck_selected_cards {
  width: 50%; }
  .deck_owned_cards .deck_button,
  .deck_selected_cards .deck_button {
    border: 2px solid; }

.card_is_selected {
  display: none; }

.deck_button {
  width: 100%;
  height: 5rem;
  margin: 0 0 0.5rem;
  font-weight: bold;
  border-radius: 1rem; }

.content .deck_list {
  margin: 1rem 0; }

.deck_list {
  display: flex;
  flex-direction: column-reverse;
  list-style: none; }
  .deck_list .deck_item {
    display: flex;
    position: relative;
    justify-content: space-between;
    border-width: 2px;
    border-style: solid;
    border-radius: 0 0 1rem 1rem;
    padding: 1.4rem 1rem 1rem;
    margin: -1rem 1rem 0;
    text-decoration: none !important;
    font-weight: bold;
    cursor: pointer; }
    .deck_list .deck_item .deck_name {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden; }
    .deck_list .deck_item .deck_indicator {
      padding-left: 1rem; }
    .deck_list .deck_item.deck_primary {
      border-radius: 1rem;
      padding: 1rem;
      margin: 0; }
    .deck_list .deck_item.deck_create {
      font-weight: normal; }
  .deck_list .deck_item_radio {
    display: none; }

.select_deck {
  position: relative; }
  .select_deck .deck_selectable {
    position: absolute;
    left: 0;
    right: 0;
    transition: top 0.5s, padding-top 0.25s; }
  .select_deck.hide_selectable .deck_selectable {
    padding-top: 0;
    top: 1rem; }
  .select_deck.show_selectable .deck_selectable {
    padding-top: 1.4rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+1) {
    top: 0rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+2) {
    top: 5rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+3) {
    top: 9rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+4) {
    top: 13rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+5) {
    top: 17rem; }
  .select_deck.show_selectable .deck_selectable:nth-last-child(6n+6) {
    top: 21rem; }

@keyframes reveal {
  0% {
    color: rgba(0, 0, 0, 0);
    transform: perspective(50vw) scale(0.9, 0.9) rotateY(-540deg); }
  5% {
    color: rgba(0, 0, 0, 0);
    transform: perspective(50vw) scale(1, 1) rotateY(-540deg); }
  75% {
    color: rgba(0, 0, 0, 0);
    transform: perspective(50vw) scale(1, 1) rotateY(-92deg); }
  90% {
    color: black;
    transform: perspective(50vw) scale(0.9, 0.9) rotateY(0deg); }
  100% {
    color: black;
    transform: perspective(50vw) scale(1, 1) rotateY(0deg); } }

@media (min-width: 768px) {
  .card, .card_back {
    width: 12rem; }
  .claim_rewards_home .claim_text {
    display: inline-block; }
  .on_claim_page {
    position: absolute;
    top: 2rem;
    right: 3rem; }
  .selectable_card {
    width: 15rem; } }

@media (max-width: 767px) {
  .card, .card_back {
    width: 12rem; }
  .selectable_card {
    width: 12.5rem; }
  .claim_rewards_home .claim_text {
    display: none; }
  .on_claim_page {
    position: absolute;
    top: 1rem;
    right: 1rem; }
  .card_list {
    padding: 2rem;
    margin: 2rem -3.5rem;
    border: 3px solid;
    border-color: inherit; } }

@media (max-width: 460px) {
  .card, .card_back {
    width: 32vw; } }

@media (prefers-color-scheme: dark) {
  .deck_item {
    background: #000000; }
  .card {
    background: #eeeeee;
    color: #111111; }
  .card_list {
    background: linear-gradient(180deg, white 0%, #b478dc 100%); }
  .card_list.proceed {
    background: linear-gradient(180deg, white 0%, #64d2e6 100%); }
  .cards_modal {
    background-color: rgba(0, 0, 0, 0.5); }
  .card_list_wrapper {
    border-color: #6699bb; }
  .card_selection_interface h4 {
    border-color: #ffffff; }
  .selectable_card:disabled, .selectable_card.disabled {
    background-color: #FFFFFF; }
  .show_hide {
    color: #ffffff; }
  .disable_selection_interface {
    pointer-events: none;
    opacity: 0.5; }
  .claim_random_count,
  .claim_chosen_count {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #000000;
    color: #000000; }
  .claim_random_link a .claim_text,
  .claim_chosen_link a .claim_text {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #000000;
    color: #000000; }
  .category_selector {
    background: #FFFFFF; }
  .selectable_card_list {
    background: linear-gradient(180deg, white 0%, #b478dc 100%); } }

@media (prefers-color-scheme: light) {
  .deck_item {
    background: #ffffff; }
  .card {
    background: #eeeeee;
    color: #111111; }
  .card_list {
    background: linear-gradient(180deg, white 0%, #b478dc 100%); }
  .card_list.proceed {
    background: linear-gradient(180deg, white 0%, #64d2e6 100%); }
  .cards_modal {
    background-color: rgba(0, 0, 0, 0.5); }
  .card_list_wrapper {
    border-color: #99ccee; }
  .card_selection_interface h4 {
    border-color: #ffffff; }
  .selectable_card:disabled, .selectable_card.disabled {
    background-color: #FFFFFF; }
  .show_hide {
    color: #ffffff; }
  .disable_selection_interface {
    pointer-events: none; }
    .disable_selection_interface:before {
      background-color: rgba(0, 0, 0, 0.7); }
  .claim_random_count,
  .claim_chosen_count {
    background-color: rgba(0, 0, 0, 0.9);
    border-color: #FFFFFF;
    color: #FFFFFF; }
  .claim_random_link a .claim_text,
  .claim_chosen_link a .claim_text {
    background-color: rgba(0, 0, 0, 0.9);
    border-color: #FFFFFF;
    color: #FFFFFF; }
  .category_selector {
    background: #DDEEFF; }
    .category_selector h4 {
      background: #FFFFFF; }
  .selectable_card_list {
    background: linear-gradient(180deg, white 0%, #b478dc 100%); } }

@keyframes button_float {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(0, 1rem); } }

.content {
  display: block;
  position: relative; }
  .content p {
    margin: 1.2rem 0; }
  .content ul, .content ol {
    margin: 1.2rem 0 1.2rem 2rem; }

.modal_content {
  border-radius: 4rem;
  border: 3px solid;
  overflow-y: auto;
  position: absolute;
  margin: 1rem;
  padding: 1rem;
  top: 0.5rem;
  left: 0.5rem;
  bottom: 0.5rem;
  right: 0.5rem;
  z-index: 1; }
  .modal_content h1 {
    padding: 1rem; }

.modal_close {
  font-family: finalsix, sans-serif;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  border: 3px solid;
  border-radius: 1.5rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: inherit; }

.modal_buttons {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem; }

.intro_content ul, .intro_content ol {
  margin: 0 0 1.2rem 2rem; }

.home_welcome {
  text-align: center;
  margin: 2rem 0 0; }
  .home_welcome h2 {
    margin: 0 0 0.5rem; }
  .home_welcome .player_id {
    margin: 0;
    font-style: italic;
    position: relative;
    top: -1.2rem; }

.link {
  cursor: pointer; }

.note {
  margin: 1rem 0; }

.data {
  font-weight: bold; }

.copy_data {
  display: block;
  font-weight: bold; }

.main_play_button_wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  align-items: center;
  margin: 0 2rem; }

.home_offers_wrapper {
  display: flex;
  gap: 2rem;
  justify-content: space-around; }
  .home_offers_wrapper a {
    width: auto; }

.view_nav {
  margin: 1rem 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid; }
  .view_nav a {
    font-weight: bold;
    cursor: pointer; }
    .view_nav a.selected {
      border-bottom: 2px solid; }
    .view_nav a:hover {
      text-decoration: none; }

.divider {
  margin: 1rem 0;
  height: 1px; }

.fade_hide {
  transition: opacity 2s; }
  .fade_hide.fade_out {
    opacity: 0; }
  .fade_hide.fade_in {
    opacity: 1; }

@media (min-width: 768px) {
  .content {
    width: 50vw;
    max-width: 800px; } }

@media (max-width: 767px) {
  .content {
    padding: 5vw;
    margin: 0 5vw; } }

@media (max-width: 500px) {
  .modal_content h1 {
    font-size: 2.2rem;
    line-height: 4.8rem; } }

@media (prefers-color-scheme: dark) {
  .content, .modal_content {
    background: #000000;
    border-color: #cccccc; }
  .data, .copy_data {
    color: #32aaaa; }
  .view_nav, .note {
    border-color: #cccccc; }
  .divider {
    background: #FFFFFF; }
  .player_id {
    color: #cccccc; }
  .buy_form {
    background-color: #f0f0f0;
    transition: max-height 1s, padding 1s;
    overflow: hidden; }
    .buy_form.buy_active {
      padding: 2rem;
      max-height: 1000px; }
    .buy_form.buy_processing {
      padding: 0 2rem;
      max-height: 0px; } }

@media (prefers-color-scheme: light) {
  .content, .modal_content {
    background: #FFFFFF;
    border-color: #333333; }
  .data, .copy_data {
    color: #003333; }
  .view_nav, .note {
    border-color: #333333; }
  .divider {
    background: #333333; }
  .player_id {
    color: #333333; } }

.logo {
  padding: 0 1rem;
  text-decoration: none; }
  .logo .header {
    font-family: wreath, serif;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    word-spacing: -1.0rem;
    position: relative;
    margin: 0;
    padding: 0; }
    .logo .header .h_match {
      padding-right: 3px; }
    .logo .header:before {
      content: "";
      display: inline-block;
      position: relative;
      background-size: contain; }
  .logo .header_plus {
    font-family: wreath, serif;
    font-weight: 700;
    font-style: normal;
    text-align: center; }
  .logo .tagline {
    font-family: wreath, serif;
    font-weight: 300;
    font-style: normal;
    text-align: center;
    position: relative;
    margin: 0;
    padding: 0;
    top: -1rem; }
  .logo.guest {
    position: fixed;
    left: 0;
    top: 0; }
  .logo.game {
    height: auto;
    align-self: flex-start; }
    .logo.game .header {
      font-size: 4rem; }
      .logo.game .header:before {
        background-image: url("/images/brand/logo-50.png");
        height: 4rem;
        width: 4rem;
        top: 1rem; }
      .logo.game .header:after {
        top: 0.2rem;
        right: 4rem; }
    .logo.game .header_plus {
      display: none; }

.with_logo:before {
  content: "";
  display: inline-block;
  position: relative;
  background-size: contain;
  background-image: url(/images/brand/logo-50.png);
  height: 6rem;
  width: 6rem;
  top: 2rem; }

.tooltip {
  display: inline-block; }
  .tooltip .tooltip_link {
    border-color: white; }
  .tooltip .tooltip_text {
    color: black;
    border-color: black;
    background-color: white; }

.tooltip {
  display: inline-block; }
  .tooltip .tooltip_link {
    display: inline-block;
    border: 2px solid;
    border-radius: 2rem;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: bold;
    width: 2rem;
    height: 2rem; }
  .tooltip .tooltip_text {
    transition: opacity 1s;
    border: 2px solid;
    border-radius: 1rem;
    padding: 1rem 3rem;
    cursor: pointer;
    z-index: 100; }
    .tooltip .tooltip_text:before {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1; }
    .tooltip .tooltip_text:after {
      content: "X";
      font-weight: bold;
      position: absolute;
      top: 0;
      right: 5px; }
  .tooltip .show_tooltip {
    opacity: 1;
    pointer-events: auto; }
  .tooltip .hide_tooltip {
    opacity: 0;
    pointer-events: none; }

.modal_response {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 100;
  transition: opacity 0.5s; }
  .modal_response.show {
    opacity: 1; }
  .modal_response.hide {
    pointer-events: none;
    opacity: 0; }

.loading_modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 105;
  transition: background-color 0.5s; }
  .loading_modal .loading_inner {
    position: fixed;
    top: 34rem;
    overflow: hidden;
    transition: left 0.5s, right 0.5s; }
  .loading_modal h2 {
    display: block;
    border: 5px solid;
    border-radius: 2rem;
    padding: 0.2rem 2rem;
    margin: 0 auto;
    white-space: nowrap;
    text-align: center;
    width: 70%;
    max-width: 40rem; }
  .loading_modal.show .loading_inner {
    left: 0;
    right: 0; }
  .loading_modal.hide {
    pointer-events: none; }
    .loading_modal.hide .loading_inner {
      left: 50%;
      right: 50%; }

.support_message {
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  right: 0; }
  .support_message .support_link {
    position: relative;
    display: block;
    border: 5px solid;
    border-radius: 2rem;
    max-width: 45rem;
    margin: 0 5rem;
    padding: 2rem;
    text-decoration: none; }
  .support_message .support_header {
    font-size: 2rem;
    margin-bottom: 1rem; }
  .support_message .support_content {
    margin-bottom: 0.5rem; }
  .support_message .support_button {
    margin: 0; }
  .support_message.show {
    animation: support_animate_in 0.9s ease-in-out forwards; }
  .support_message.hide {
    animation: support_animate_out 0.7s ease-in forwards; }
  .support_message.off {
    display: none; }

.close {
  display: block;
  position: absolute;
  top: -21px;
  right: -22px;
  width: 3rem;
  height: 3rem;
  font-weight: bold;
  border: 5px solid;
  border-radius: 3rem;
  font-size: 44px;
  line-height: 0px; }
  .close svg {
    width: 2rem; }

@keyframes support_animate_in {
  0% {
    bottom: -40rem; }
  70% {
    bottom: 6rem; }
  90% {
    bottom: 4rem; }
  100% {
    bottom: 5rem; } }

@keyframes support_animate_out {
  0% {
    bottom: 5rem; }
  30% {
    bottom: 7rem; }
  100% {
    bottom: -40rem; } }

@media (min-width: 768px) {
  .header {
    font-size: 8rem;
    text-indent: 0.5rem; }
    .header:before {
      background-image: url("/images/brand/logo-80.png");
      height: 8rem;
      width: 8rem;
      top: 2rem; }
  .header_plus {
    font-size: 2rem;
    text-indent: 26rem;
    margin-top: -3.4rem; }
  .tagline {
    font-size: 3.5rem; }
  .logo.intro .header {
    font-size: 6rem; }
    .logo.intro .header:before {
      background-image: url("/images/brand/logo-80.png");
      height: 6rem;
      width: 6rem;
      top: 1.5rem; }
  .logo.intro .header_plus {
    font-size: 1.8rem;
    text-indent: 18rem;
    margin-top: -2.5rem; }
  .logo.intro .tagline {
    font-size: 3rem; }
  .tooltip_text {
    position: fixed;
    top: 42vh;
    left: 30vw;
    right: 30vw; } }

@media (max-width: 767px) {
  .header {
    font-size: 6rem;
    text-indent: 0.5rem; }
    .header:before {
      background-image: url("/images/brand/logo-80.png");
      height: 6rem;
      width: 6rem;
      top: 1.5rem; }
  .header_plus {
    font-size: 1.8rem;
    text-indent: 18rem;
    margin-top: -2.5rem; }
  .tagline {
    font-size: 3rem; }
  .logo.guest {
    font-size: 3rem; }
  .tooltip_text {
    position: fixed;
    top: 42vh;
    left: 1rem;
    right: 1rem; } }

@media (max-width: 460px) {
  .logo .header {
    font-size: 5rem;
    text-indent: 0.5rem;
    padding-top: 0; }
    .logo .header:before {
      background-image: url("/images/brand/logo-50.png");
      height: 5rem;
      width: 5rem;
      top: 1.5rem; }
  .logo .tagline {
    top: -1rem;
    font-size: 2rem; }
  .logo.guest .header {
    font-size: 2.5rem; } }

@media (prefers-color-scheme: dark) {
  .logo, .logo:hover {
    color: #FFFFFF; }
  .tooltip_text:before {
    background: #FFFFFF33; }
  .modal_response {
    background-color: rgba(0, 0, 0, 0.8); }
  .loading_modal.show {
    background-color: rgba(0, 0, 0, 0.8); }
  .loading_modal.hide {
    background-color: rgba(0, 0, 0, 0); }
  .loading_modal h2 {
    background-color: #000000;
    border-color: #FFFFFF; }
  .support_link {
    background-color: #000000;
    color: #FFFFFF;
    border-color: #FFFFFF; }
  .close {
    color: #ffffff;
    border-color: #ffffff;
    background-color: #000000; } }

@media (prefers-color-scheme: light) {
  .logo, .logo:hover {
    color: #000000; }
  .tooltip_text:before {
    background: #FFFFFF66; }
  .modal_response {
    background-color: rgba(255, 255, 255, 0.8); }
  .support_link {
    background-color: #FFFFFF;
    color: #000000;
    border-color: #000000; }
  .loading_modal.show {
    background-color: rgba(255, 255, 255, 0.8); }
  .loading_modal.hide {
    background-color: rgba(255, 255, 255, 0); }
  .loading_modal h2 {
    background-color: #FFFFFF;
    border-color: #000000; }
  .close {
    color: #000000;
    border-color: #000000;
    background-color: #ffffff; } }

h3 i {
  font-weight: normal; }

.input {
  font-size: 2rem;
  font-family: finalsix, sans-serif;
  display: block;
  padding: 0.5rem;
  box-sizing: border-box;
  width: 100%; }
  .input::placeholder {
    font-style: italic; }

div.input {
  border: 2px solid; }

a.button {
  display: inline-block; }

.button {
  font-size: 2rem;
  margin-top: 2rem;
  box-sizing: border-box;
  font-family: finalsix, sans-serif;
  border-radius: 2rem;
  border: .5rem solid;
  cursor: pointer;
  padding: 1rem;
  margin: 0 0 2rem;
  text-decoration: none;
  text-align: center; }
  .button:disabled, .button:disabled:hover, .button.disabled, .button.disabled:hover {
    cursor: crosshair;
    border-color: #cccccc;
    background-color: #999999;
    color: #333333;
    bottom: 0; }

.button_small {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0.5rem 1rem; }

.main_play_button:hover {
  transform: scale(1.1, 1.1); }

.form_button {
  margin: 1rem 0; }

.select {
  font-size: 2rem;
  font-family: finalsix, sans-serif;
  padding: 0.5rem;
  cursor: pointer; }

.textarea {
  width: 100%;
  height: 10rem;
  font-size: 2rem;
  font-family: finalsix, sans-serif;
  padding: 0.5rem;
  border-radius: 1rem;
  box-sizing: border-box; }

.textarea_wrapper {
  position: relative; }

.textarea_count {
  display: block;
  text-align: right;
  top: 0;
  right: 0; }

.radio_label {
  display: block; }

.checkbox_label {
  display: block;
  cursor: pointer; }

.form_header {
  margin-top: 0;
  margin-bottom: 2rem; }

.divider {
  margin: 1rem 0;
  height: 1px; }

.signout_form {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1; }

.home_button,
.signout_button {
  cursor: pointer;
  margin-left: 1rem; }

.matchword_button {
  margin: 1rem 0 1rem 3rem;
  width: auto !important;
  padding: 1rem 2rem;
  position: relative; }
  .matchword_button:before {
    content: "";
    position: absolute;
    display: block;
    background-size: contain;
    top: -2rem;
    left: -6rem;
    width: 8rem;
    height: 8rem;
    background-image: url("/images/vector/matchword-off.svg"); }

.save_deck {
  animation: button_float 1s infinite ease-in-out; }
  .save_deck:disabled {
    animation: none; }

.touched {
  background: #f0f0f0;
  border: 3px solid #b478dc; }

input.touched {
  background-repeat: no-repeat;
  background-color: #f0f0f0;
  background-image: url("/images/vector/form-check.svg");
  background-position: right;
  background-size: 3rem; }

input.optional.untouched {
  background-repeat: no-repeat;
  background-image: url("/images/vector/form-check-optional.svg");
  background-position: right;
  background-size: 3rem;
  background-color: #f0f0f0;
  border: 3px solid #b478dc; }

.valid_indicator {
  display: none;
  position: relative;
  top: 0.8rem;
  left: 0.5rem;
  width: 3rem;
  height: 3rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 3rem;
  border: none; }
  .valid_indicator.touched {
    display: inline-block; }

.untouched:focus {
  background: #f0f0f0; }

.validation {
  display: inline-block;
  position: relative;
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 2rem;
  border: none;
  top: 4px;
  padding-left: 4px; }

.check {
  background-image: url("/images/vector/form-check.svg"); }

.ex {
  background-image: url("/images/vector/form-ex.svg"); }

.visibility_wrapper {
  display: block;
  margin-top: 0.5rem; }

.welcome_text .firebaseui-container {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  font-family: finalsix, sans-serif; }
  .welcome_text .firebaseui-container .firebaseui-card-footer {
    background-color: rgba(255, 255, 255, 0.8); }
  .welcome_text .firebaseui-container .firebaseui-card-header {
    padding: 12px 24px 0; }
  .welcome_text .firebaseui-container .firebaseui-card-actions {
    padding: 0 24px 24px;
    margin-top: -12px; }
  .welcome_text .firebaseui-container .firebaseui-card-content, .welcome_text .firebaseui-container .firebaseui-card-footer {
    margin: -12px 0; }

#auth {
  position: relative;
  z-index: 100; }

.player_birthdate {
  position: relative;
  display: block; }
  .player_birthdate .valid_month, .player_birthdate .valid_year {
    position: absolute;
    pointer-events: none; }

@media (prefers-color-scheme: dark) {
  .divider {
    background: #FFFFFF; }
  .firebaseui-link {
    color: #b478dc;
    transition: color 0.5s; }
    .firebaseui-link:hover {
      color: #78dcdc; }
  .invalid, button.invalid {
    color: #111111;
    background: linear-gradient(0deg, white 0%, #787878 100%);
    border: 3px solid #b4b4b4;
    cursor: crosshair; }
    .invalid:hover, button.invalid:hover {
      color: #111111;
      background: linear-gradient(0deg, white 0%, #787878 100%);
      border: 3px solid #b4b4b4; }
  div.input {
    color: #000000;
    border-color: #000000;
    background-color: #FFFFFF; } }

@media (prefers-color-scheme: light) {
  .divider {
    background: #333333; }
  .firebaseui-link {
    color: #b478dc;
    transition: color 0.5s; }
    .firebaseui-link:hover {
      color: #329696; }
  .invalid, button.invalid {
    color: #111111;
    background: linear-gradient(0deg, white 0%, #787878 100%);
    border: 3px solid #b4b4b4;
    cursor: crosshair; }
    .invalid:hover, button.invalid:hover {
      color: #111111;
      background: linear-gradient(0deg, white 0%, #787878 100%);
      border: 3px solid #b4b4b4; }
  div.input {
    color: #000000;
    border-color: #000000;
    background-color: #FFFFFF; } }

@media (min-width: 768px) {
  .main_play_button {
    font-size: 4rem; }
  .player_birthdate .valid_month {
    display: none; }
  .player_birthdate .valid_year {
    display: none; } }

@media (max-width: 767px) {
  .button, .select {
    width: 100%; }
    .button.button_small, .select.button_small {
      width: auto; }
  .main_play_button {
    font-size: 3rem; }
  .player_birthdate .valid_month {
    top: 8px;
    right: 24px;
    left: auto; }
  .player_birthdate .valid_year {
    top: 54px;
    right: 24px;
    left: auto; }
  .player_birthdate .valid_month_and_year {
    display: none; } }

@keyframes button_float {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(0, 1rem); } }

.home_buttons {
  margin: 0;
  display: table;
  border-spacing: 1rem; }
  .home_buttons.home_buttons_bottom {
    margin: 0 0 2rem; }
  .home_buttons .home_quick_play {
    border-radius: 2rem 0 0 0; }
  .home_buttons .home_lobby {
    border-radius: 0 2rem 0 0; }
  .home_buttons .home_shop {
    border-radius: 0 0 0 2rem; }
  .home_buttons .home_coupon {
    border-radius: 0 0 2rem 0; }
  .home_buttons .home_play,
  .home_buttons .home_shop {
    display: table-row;
    margin: 0; }
  .home_buttons .home_play .home_button {
    font-size: 3rem;
    padding: 4rem 2rem;
    background-position: 0 4rem; }
    .home_buttons .home_play .home_button:hover {
      background-position: 0 1rem; }
  .home_buttons .home_shop .home_button {
    font-size: 1.8rem;
    padding: 2rem; }
  .home_buttons .home_button, .home_buttons .invite_button {
    display: table-cell; }

.home_button {
  border: 4px solid;
  text-decoration: none;
  width: 50%;
  height: 100%;
  padding: 1rem;
  margin: 0;
  text-align: center;
  font-weight: bold; }
  .home_button h3 {
    margin: 0;
    border-top: none; }
  .home_button p {
    font-size: 1.6rem;
    margin: 0;
    padding: 0 2rem 2rem; }

.home_invite {
  padding: 0 1rem; }
  .home_invite .invite_button {
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box; }

.invite_button {
  display: block;
  position: relative;
  padding: 1rem;
  border: 4px solid;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  cursor: pointer; }
  .invite_button:before {
    content: "";
    position: absolute;
    top: -1.4rem;
    width: 7.2rem;
    height: 7.2rem;
    background-image: url("/images/vector/qr-code-icon.svg");
    background-size: contain; }
  .invite_button:hover {
    background-position: 0 0.5rem; }

@media (min-width: 768px) {
  .home_buttons {
    width: 70vw;
    max-width: 800px; }
  .invite_button:before {
    left: 14vw; } }

@media (max-width: 767px) {
  .home_buttons_wrapper {
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box; }
  .home_buttons {
    width: 100%; }
  .invite_button:before {
    left: 1rem; } }

@media (prefers-color-scheme: dark) {
  .home_button, .invite_button {
    background-color: black; } }

@media (prefers-color-scheme: light) {
  .home_button, .invite_button {
    background-color: white; } }

.how_to_play {
  height: 60vh; }
  .how_to_play .how_to_play_wrapper {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 60vh; }
  .how_to_play .how_to_play_steps {
    display: flex;
    position: absolute;
    flex-direction: row;
    transition: left 0.5s ease-out; }
  .how_to_play .how_to_play_step {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .how_to_play .how_to_play_step h2 {
      margin: 0 !important;
      font-size: 3rem; }
    .how_to_play .how_to_play_step img {
      display: block;
      object-fit: contain;
      height: 40vh;
      margin-bottom: 1rem; }
  .how_to_play .next_arrow,
  .how_to_play .back_arrow {
    width: 5rem;
    height: 5rem; }
    .how_to_play .next_arrow path,
    .how_to_play .back_arrow path {
      fill: #000000;
      stroke: #FFFFFF;
      stroke-width: 5px; }
  .how_to_play .next_arrow {
    transform: rotate(-90deg); }
  .how_to_play .back_arrow {
    transform: rotate(90deg); }
  .how_to_play .how_to_play_next {
    position: absolute;
    top: 35vh;
    right: -1vw;
    z-index: 10; }
  .how_to_play .how_to_play_back {
    position: absolute;
    top: 35vh;
    left: -1vw;
    z-index: 10; }
  .how_to_play .how_to_play_back,
  .how_to_play .how_to_play_next {
    transition: transform 0.5s; }
    .how_to_play .how_to_play_back.show,
    .how_to_play .how_to_play_next.show {
      transform: scale(1); }
    .how_to_play .how_to_play_back.hide,
    .how_to_play .how_to_play_next.hide {
      transform: scale(0); }

@media (min-width: 401px) {
  .how_to_play,
  .how_to_play_wrapper,
  .how_to_play_step {
    width: 320px; }
  .show_step_0 {
    left: 0px; }
  .show_step_1 {
    left: -320px; }
  .show_step_2 {
    left: -640px; }
  .show_step_3 {
    left: -960px; }
  .show_step_4 {
    left: -1280px; }
  .show_step_5 {
    left: -1600px; }
  .show_step_6 {
    left: -1920px; }
  .show_step_7 {
    left: -2240px; } }

@media (max-width: 400px) {
  .how_to_play,
  .how_to_play_wrapper,
  .how_to_play_step {
    width: 290px; }
  .show_step_0 {
    left: 0px; }
  .show_step_1 {
    left: -290px; }
  .show_step_2 {
    left: -580px; }
  .show_step_3 {
    left: -870px; }
  .show_step_4 {
    left: -1160px; }
  .show_step_5 {
    left: -1450px; }
  .show_step_6 {
    left: -1740px; }
  .show_step_7 {
    left: -2030px; }
  .how_to_play .how_to_play_step img {
    height: 36vh; } }

@media (prefers-color-scheme: light) {
  .how_to_play_step img {
    border: 5px solid #000000; } }

button {
  font-family: finalsix, sans-serif; }

.game_board {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  border-top: 5px solid;
  position: absolute;
  top: 6rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transition: opacity 1s; }

.false {
  text-decoration: line-through; }

.room_id {
  position: absolute;
  left: 0;
  bottom: 0;
  color: #ffffff;
  margin: 0; }

.leave_game {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem; }
  .leave_game a {
    display: block; }

.leave_game_button {
  width: 3rem;
  height: 3rem; }

.confirm_leave_game {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .confirm_leave_game p {
    margin: 0 0 1rem; }
  .confirm_leave_game .confirm_content {
    border-radius: 2rem;
    margin: 2rem;
    padding: 2rem; }
  .confirm_leave_game .confirm_buttons {
    text-align: center; }

.isolated_message,
.timeout_message {
  text-align: center; }

/* ----------------------- */
/* ---- INITIAL GAME ----- */
/* ----------------------- */
.find_match_button {
  border-radius: 2rem;
  padding: 1rem;
  cursor: pointer;
  font-size: 2rem;
  font-weight: bold; }

.cancel_button {
  border-radius: 2rem;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold; }

.disconnected_button {
  max-width: 30rem; }

.start_game {
  display: flex;
  margin: 0 2rem 1rem;
  flex-direction: column;
  align-items: center; }
  .start_game p {
    margin-bottom: 1rem; }
  .start_game label {
    display: block; }

.game_settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; }

.game_launched .game_settings {
  pointer-events: none; }

.game_options {
  text-align: center;
  max-width: 40rem;
  position: relative; }
  .game_options .select_deck {
    z-index: 10;
    margin-bottom: 1rem; }

.game_invite {
  position: relative;
  margin: 0;
  padding: 0 3.8rem 0 6.3rem;
  height: 7rem; }
  .game_invite .tooltip {
    padding-top: 1.6rem; }
  .game_invite .invite_button:before {
    left: -6.5rem; }
  .game_invite .tooltip {
    position: absolute;
    top: 0;
    right: 0;
    width: 4rem; }

.matchword_input {
  position: relative;
  padding-left: 7rem;
  margin: 0 0 1.5rem;
  display: flex;
  gap: 0.5rem;
  left: -0.8rem; }
  .matchword_input input {
    margin-bottom: 1rem;
    padding-left: 1rem;
    text-align: left; }

.matchword_input:before {
  content: "";
  position: absolute;
  display: block;
  background-size: contain;
  top: -2rem;
  left: 0.5rem;
  width: 8rem;
  height: 8rem;
  background-image: url("/images/vector/matchword-off.svg"); }

.matchword_input.matchword_entered:before {
  background-image: url("/images/vector/matchword-on.svg"); }

.matchword_input .tooltip {
  padding-top: 1rem; }

.matchword_input .button {
  position: relative;
  top: -7px;
  width: auto; }

.event_instructions {
  margin: 0 0 2rem; }
  .event_instructions .matchword_input {
    padding-right: 3rem; }

.default_game_settings .game_options {
  border-top: 1px solid; }
  .default_game_settings .game_options p {
    margin: 1rem 0; }

.default_game_settings .start_game {
  width: 100%;
  border-top: 1px solid; }
  .default_game_settings .start_game p {
    margin: 1rem 0; }

.invite_game_settings .game_options {
  width: 34rem; }

.start_game_button,
.majestic {
  font-size: 3rem;
  padding: 1.5rem 4rem;
  margin: 0 0 1rem;
  position: relative;
  font-weight: bold;
  overflow: hidden;
  background-image: linear-gradient(150deg, #52CA76 0%, #65D3E4 25%, #385CC4 50%, #A88EFF 75%, #FD90FE 100%);
  color: #FFFFFF;
  text-shadow: 2px  2px 5px #000000, 2px  0px 1px #000000, -2px  0px 1px #000000, 0px  2px 1px #000000, 0px -2px 1px #000000, 2px  2px 1px #000000, -2px -2px 1px #000000, -2px  2px 1px #000000, 2px -2px 1px #000000;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 0;
  border-right-width: 0;
  border-radius: 3.5rem;
  border-style: solid;
  border-top-color: #65D3E4;
  border-bottom-color: #FD90FE;
  transition: border 0.5s; }
  .start_game_button .text,
  .majestic .text {
    position: relative;
    z-index: 3; }
  .start_game_button:after,
  .majestic:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #385CC4;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s; }
  .start_game_button:before,
  .majestic:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #FFFFFF00 0%, #FFFFFFFF 10%, #FFFFFF00 20%, #FFFFFF00 40%, #FFFFFFFF 100%);
    z-index: 2; }
  .start_game_button:hover,
  .majestic:hover {
    border-top-color: #385CC4;
    border-bottom-color: #A88EFF; }
    .start_game_button:hover:after,
    .majestic:hover:after {
      opacity: 0.5; }

.interactive_lobby_button {
  text-decoration: none;
  display: inline-block;
  border: 5px solid;
  border-radius: 2rem;
  padding: 1rem 2rem; }

.game_search {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center; }

.qrcode_wrapper {
  display: inline-block;
  border: 2px solid #000000;
  background: #FFFFFF;
  border-radius: 2rem;
  margin: 1rem;
  padding: 1rem 1rem 0.5rem; }

.invite_link_text {
  display: inline-block;
  border-size: 2px;
  border-style: solid;
  border-radius: 2rem;
  margin: 1rem 0 2rem;
  padding: 1rem;
  text-align: center; }

.create_invite_search .matchword_input {
  left: -0.8rem; }

.start_game_go {
  display: flex;
  flex-direction: column;
  max-width: 40rem;
  gap: 1rem; }

.game_load_wrapper,
.game_settings,
.game_search {
  transition: height 0.5s, width 0.5s, margin 0.5s, border 0.5s, opacity 0.5s;
  overflow: hidden; }

.game_loading_modal {
  position: fixed;
  top: 34rem;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
  transition: width 0.5s; }
  .game_loading_modal h2 {
    font-family: wreath;
    font-size: 3.4rem;
    border: 5px solid;
    border-radius: 2rem;
    padding: 0.2rem 2rem !important;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    max-width: 100%; }

.game_loading .game_loading_modal {
  width: 90%; }

.game_loading .game_settings,
.game_loading .game_search {
  height: 0%;
  width: 80%;
  margin-top: 30rem;
  border-top: 5px solid;
  border-bottom: 3px solid; }

.game_settings.lobby_active {
  opacity: 0; }

.auto_invite_active .game_settings,
.auto_invite_active .open_lobbies.lobby_button {
  visibility: hidden; }

.game_loaded .game_loading_modal {
  width: 0%; }

.game_loaded .game_settings,
.game_loaded .game_search {
  height: 100%;
  margin-top: 0;
  border-top: 0 solid;
  border-bottom: 0px solid; }

/* ----------------------- */
/* ----- INTERACTION ----- */
/* ----------------------- */
.interaction {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh;
  background-image: linear-gradient(rgba(0, 0, 100, 0), rgba(0, 0, 100, 0.8)); }

.play_card {
  position: absolute;
  top: -10rem;
  opacity: 1;
  transition: opacity 0.3s;
  animation: button_float 1s infinite ease-in-out;
  cursor: pointer;
  border-radius: 1rem;
  font-size: 1.6rem;
  padding: 1rem; }
  .play_card:disabled {
    opacity: 0; }

.interaction_area {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end; }

/* Opinions */
.opinion_buttons {
  position: relatve;
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  top: 0;
  opacity: 1;
  transition: opacity 0.5s, top 0.5s; }
  .opinion_buttons .opinion_wrapper {
    position: relative; }
  .opinion_buttons .opinion_button {
    position: relative;
    border-radius: 10rem;
    aspect-ratio: 1/1;
    transition: transform 0.2s, bottom 0.3s, border 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border: 5px solid;
    border-color: #999999;
    background: #FFFFFF; }
    .opinion_buttons .opinion_button.opinion_selected {
      bottom: 1rem; }
      .opinion_buttons .opinion_button.opinion_selected:hover {
        bottom: 1rem;
        animation: none; }
    .opinion_buttons .opinion_button:hover {
      animation: button_float 1s infinite ease-in-out;
      bottom: 0.5rem; }
    .opinion_buttons .opinion_button:active {
      transform: scale(0.95); }
  .opinion_buttons .opinion_button:disabled,
  .opinion_buttons .opinion_button:disabled:hover {
    cursor: crosshair;
    border-color: #cccccc;
    bottom: 0; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1) path {
    fill: #52CA76; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2) path {
    fill: #65D3E4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3) path {
    fill: #385CC4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4) path {
    fill: #A88EFF; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5) path {
    fill: #FD90FE; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1) .stroke_path path {
    stroke: #52CA76; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2) .stroke_path path {
    stroke: #65D3E4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3) .stroke_path path {
    stroke: #385CC4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4) .stroke_path path {
    stroke: #A88EFF; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5) .stroke_path path {
    stroke: #FD90FE; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1).opinion_button {
    box-shadow: 0px 0px 20px rgba(82, 202, 118, 0); }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2).opinion_button {
    box-shadow: 0px 0px 20px rgba(101, 211, 228, 0); }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3).opinion_button {
    box-shadow: 0px 0px 20px rgba(56, 92, 196, 0); }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4).opinion_button {
    box-shadow: 0px 0px 20px rgba(168, 142, 255, 0); }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5).opinion_button {
    box-shadow: 0px 0px 20px rgba(253, 144, 254, 0); }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1).opinion_enabled .opinion_button {
    animation: show_opinion_buttons_1 1.4s ease-out forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2).opinion_enabled .opinion_button {
    animation: show_opinion_buttons_2 1.4s ease-out forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3).opinion_enabled .opinion_button {
    animation: show_opinion_buttons_3 1.4s ease-out forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4).opinion_enabled .opinion_button {
    animation: show_opinion_buttons_4 1.4s ease-out forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5).opinion_enabled .opinion_button {
    animation: show_opinion_buttons_5 1.4s ease-out forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1).opinion_disabled .opinion_button {
    animation: hide_opinion_buttons_1 1.4s ease-in forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2).opinion_disabled .opinion_button {
    animation: hide_opinion_buttons_2 1.4s ease-in forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3).opinion_disabled .opinion_button {
    animation: hide_opinion_buttons_3 1.4s ease-in forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4).opinion_disabled .opinion_button {
    animation: hide_opinion_buttons_4 1.4s ease-in forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5).opinion_disabled .opinion_button {
    animation: hide_opinion_buttons_5 1.4s ease-in forwards; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1):hover .opinion_button, .opinion_buttons .opinion_wrapper:nth-child(5n+1).opinion_selected .opinion_button {
    border-color: #52CA76; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2):hover .opinion_button, .opinion_buttons .opinion_wrapper:nth-child(5n+2).opinion_selected .opinion_button {
    border-color: #65D3E4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3):hover .opinion_button, .opinion_buttons .opinion_wrapper:nth-child(5n+3).opinion_selected .opinion_button {
    border-color: #385CC4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4):hover .opinion_button, .opinion_buttons .opinion_wrapper:nth-child(5n+4).opinion_selected .opinion_button {
    border-color: #A88EFF; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5):hover .opinion_button, .opinion_buttons .opinion_wrapper:nth-child(5n+5).opinion_selected .opinion_button {
    border-color: #FD90FE; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+1).opinion_selected .opinion_button {
    background: radial-gradient(#FFFFFF 60%, #52ca76 90%);
    box-shadow: 0px 0px 20px #52ca76; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+2).opinion_selected .opinion_button {
    background: radial-gradient(#FFFFFF 60%, #65d3e4 90%);
    box-shadow: 0px 0px 20px #65d3e4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+3).opinion_selected .opinion_button {
    background: radial-gradient(#FFFFFF 60%, #385cc4 90%);
    box-shadow: 0px 0px 20px #385cc4; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+4).opinion_selected .opinion_button {
    background: radial-gradient(#FFFFFF 60%, #a88eff 90%);
    box-shadow: 0px 0px 20px #a88eff; }
  .opinion_buttons .opinion_wrapper:nth-child(5n+5).opinion_selected .opinion_button {
    background: radial-gradient(#FFFFFF 60%, #fd90fe 90%);
    box-shadow: 0px 0px 20px #fd90fe; }

.game_exit .opinion_buttons {
  top: 5rem;
  opacity: 0; }

.opinion_welcome {
  background: linear-gradient(0deg, white 0%, #b478dc 100%);
  border: 5px solid gainsboro; }
  .opinion_welcome:hover {
    border: 5px solid #b478dc; }

/* Opinion Animation */
.bg_opinion_icon {
  position: absolute;
  top: 7.5%;
  left: 7.5%;
  width: 85%;
  height: 85%;
  pointer-events: none; }

.indicator_selected {
  position: absolute;
  width: 50%;
  left: 25%;
  pointer-events: none; }
  .indicator_selected path {
    fill: #FFFFFF !important;
    stroke-width: 5px; }

.opinion_selected .indicator_selected {
  animation: selected_show 0.5s 1 ease-in-out forwards; }

.opinion_deselected .indicator_selected {
  animation: selected_hide 0.2s 1 ease-in-out forwards; }

.indicator_miss,
.indicator_miss_echo,
.indicator_check,
.indicator_check_echo {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 80%;
  opacity: 0;
  pointer-events: none; }

.indicator_check,
.indicator_miss {
  animation: glyph_hide 0.5s 1 forwards; }

.indicator_check_echo,
.indicator_miss_echo {
  top: -6.2rem; }
  .indicator_check_echo path,
  .indicator_miss_echo path {
    fill: none !important;
    stroke-width: 2px; }

.opinion_check .indicator_check,
.opinion_miss .indicator_miss {
  animation: glyph_show 0.4s 1 ease-in forwards; }

.opinion_check .indicator_check_echo,
.opinion_miss .indicator_miss_echo {
  animation: glyph_echo_show 0.8s 1 ease-out forwards; }

.indicator_correct,
.indicator_correct_echo {
  position: absolute;
  left: 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none; }

.indicator_correct {
  animation: correct_hide 0.5s 1 forwards; }
  .indicator_correct path {
    stroke-width: 5px;
    stroke: #000000; }

.opinion_correct .indicator_correct {
  animation: correct_show 0.8s 1 linear forwards; }

.indicator_correct_echo {
  top: -7rem; }
  .indicator_correct_echo path {
    fill: none !important;
    stroke-width: 2px; }

.opinion_correct .indicator_correct_echo {
  animation: correct_echo_show 0.8s 1 ease-out forwards; }

.game_enter .indicator_selected,
.game_enter .indicator_miss,
.game_enter .indicator_miss_echo,
.game_enter .indicator_check,
.game_enter .indicator_check_echo,
.game_enter .indicator_correct,
.game_enter .indicator_correct_echo {
  opacity: 0 !important; }

.my_cards {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 5rem; }
  .my_cards > button {
    position: relative;
    transition: transform 0.3s; }
  .my_cards > button:nth-child(1) {
    transform: rotateZ(-20deg) translate(0, 0);
    left: 2rem;
    bottom: 0rem; }
    .my_cards > button:nth-child(1):hover {
      transform: rotateZ(-20deg) translate(0, -2rem); }
    .my_cards > button:nth-child(1):active {
      transform: rotateZ(-20deg) translate(0, -2rem) scale(0.9); }
  .my_cards > button:nth-child(2) {
    transform: rotateZ(-11deg) translate(0, 0);
    left: 1rem;
    bottom: 3rem; }
    .my_cards > button:nth-child(2):hover {
      transform: rotateZ(-11deg) translate(0, -2rem); }
    .my_cards > button:nth-child(2):active {
      transform: rotateZ(-11deg) translate(0, -2rem) scale(0.9); }
  .my_cards > button:nth-child(3) {
    transform: rotateZ(0deg) translate(0, 0);
    bottom: 4rem; }
    .my_cards > button:nth-child(3):hover {
      transform: rotateZ(0deg) translate(0, -2rem); }
    .my_cards > button:nth-child(3):active {
      transform: rotateZ(0deg) translate(0, -2rem) scale(0.9); }
  .my_cards > button:nth-child(4) {
    transform: rotateZ(11deg) translate(0, 0);
    right: 1rem;
    bottom: 3rem; }
    .my_cards > button:nth-child(4):hover {
      transform: rotateZ(11deg) translate(0, -2rem); }
    .my_cards > button:nth-child(4):active {
      transform: rotateZ(11deg) translate(0, -2rem) scale(0.9); }
  .my_cards > button:nth-child(5) {
    transform: rotateZ(20deg) translate(0, 0);
    right: 2rem;
    bottom: 0rem; }
    .my_cards > button:nth-child(5):hover {
      transform: rotateZ(20deg) translate(0, -2rem); }
    .my_cards > button:nth-child(5):active {
      transform: rotateZ(20deg) translate(0, -2rem) scale(0.9); }

.game_enter .my_cards > button {
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  opacity: 0; }

.game_enter .my_cards > button:nth-child(1) {
  animation-name: show_first_card;
  animation-delay: 0s; }

.game_enter .my_cards > button:nth-child(2) {
  animation-name: show_second_card;
  animation-delay: 0.1s; }

.game_enter .my_cards > button:nth-child(3) {
  animation-name: show_third_card;
  animation-delay: 0.2s; }

.game_enter .my_cards > button:nth-child(4) {
  animation-name: show_fourth_card;
  animation-delay: 0.3s; }

.game_enter .my_cards > button:nth-child(5) {
  animation-name: show_fifth_card;
  animation-delay: 0.4s; }

.game_enter .cards_inactive .my_cards > button:nth-child(1) {
  animation-name: show_first_card_off;
  animation-delay: 0s; }

.game_enter .cards_inactive .my_cards > button:nth-child(2) {
  animation-name: show_second_card_off;
  animation-delay: 0.1s; }

.game_enter .cards_inactive .my_cards > button:nth-child(3) {
  animation-name: show_third_card_off;
  animation-delay: 0.2s; }

.game_enter .cards_inactive .my_cards > button:nth-child(4) {
  animation-name: show_fourth_card_off;
  animation-delay: 0.3s; }

.game_enter .cards_inactive .my_cards > button:nth-child(5) {
  animation-name: show_fifth_card_off;
  animation-delay: 0.4s; }

.game_exit .my_cards > button {
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1; }

.game_exit .my_cards > button:nth-child(1) {
  animation-name: show_first_card_out;
  animation-delay: 0s; }

.game_exit .my_cards > button:nth-child(2) {
  animation-name: show_second_card_out;
  animation-delay: 0.1s; }

.game_exit .my_cards > button:nth-child(3) {
  animation-name: show_third_card_out;
  animation-delay: 0.2s; }

.game_exit .my_cards > button:nth-child(4) {
  animation-name: show_fourth_card_out;
  animation-delay: 0.3s; }

.game_exit .my_cards > button:nth-child(5) {
  animation-name: show_fifth_card_out;
  animation-delay: 0.4s; }

.partner_cards {
  position: absolute;
  top: -16rem;
  display: flex;
  transition: top 1s; }
  .partner_cards > div {
    position: relative; }
  .partner_cards > div:nth-child(1) {
    transform: rotateZ(40deg);
    left: 8rem;
    bottom: 8rem; }
  .partner_cards > div:nth-child(2) {
    transform: rotateZ(10deg);
    left: 3rem;
    bottom: 5rem; }
  .partner_cards > div:nth-child(3) {
    transform: rotateZ(0deg);
    bottom: 4rem; }
  .partner_cards > div:nth-child(4) {
    transform: rotateZ(-10deg);
    right: 3rem;
    bottom: 5rem; }
  .partner_cards > div:nth-child(5) {
    transform: rotateZ(-40deg);
    right: 8rem;
    bottom: 8rem; }
  .state_playing .partner_cards {
    top: 0; }

.postgame {
  display: flex;
  align-items: center; }

.cards_inactive .my_cards {
  bottom: -2rem; }
  .cards_inactive .my_cards button {
    cursor: crosshair; }
  .cards_inactive .my_cards button > div {
    background-color: #999999; }
  .cards_inactive .my_cards > button:nth-child(1) {
    transform: rotateZ(-20deg) translate(5rem, 5rem); }
    .cards_inactive .my_cards > button:nth-child(1):hover {
      transform: rotateZ(-20deg) translate(3rem, 0rem); }
  .cards_inactive .my_cards > button:nth-child(2) {
    transform: rotateZ(-11deg) translate(2rem, 4rem); }
    .cards_inactive .my_cards > button:nth-child(2):hover {
      transform: rotateZ(-11deg) translate(1rem, 0rem); }
  .cards_inactive .my_cards > button:nth-child(3) {
    transform: rotateZ(0deg) translate(0, 4rem); }
    .cards_inactive .my_cards > button:nth-child(3):hover {
      transform: rotateZ(0deg) translate(0, 0rem); }
  .cards_inactive .my_cards > button:nth-child(4) {
    transform: rotateZ(11deg) translate(-2rem, 4rem); }
    .cards_inactive .my_cards > button:nth-child(4):hover {
      transform: rotateZ(11deg) translate(-1rem, 0rem); }
  .cards_inactive .my_cards > button:nth-child(5) {
    transform: rotateZ(20deg) translate(-5rem, 5rem); }
    .cards_inactive .my_cards > button:nth-child(5):hover {
      transform: rotateZ(20deg) translate(-3rem, 0rem); }

/* ----------------------- */
/* ------ PLAY AREA ------ */
/* ----------------------- */
.play_area {
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  top: 20vh;
  left: 0;
  bottom: 40vh;
  right: 0;
  flex-direction: column; }

.play_header {
  color: #009600;
  text-align: center; }

.card_in_play.show {
  animation: show_card 0.7s 1 ease-in-out forwards; }

.card_in_play.hide {
  animation: hide_card 0.7s 1 ease-in-out forwards; }

.card_in_play.full_hide {
  display: none; }

.active_player_name {
  margin-bottom: 2rem;
  width: 100%;
  text-align: center; }

.rematch_requested {
  border: 2px solid black;
  background: #ffffff;
  color: #333333;
  border-radius: 1rem;
  padding: 1rem;
  font-weight: bold;
  animation: button_float 1s infinite ease-in-out; }

.goodbye_received {
  border: 2px solid #333333;
  background: #cccccc;
  color: #333333;
  border-radius: 0.5rem;
  padding: 1rem; }

.game_result_burst {
  position: absolute;
  padding: 1rem;
  min-width: 30%;
  top: 30px; }
  .game_result_burst .burst_name, .game_result_burst .burst_opinion, .game_result_burst .burst_card {
    color: #000000;
    position: relative;
    z-index: 1;
    display: block;
    font-family: wreath, serif;
    font-size: 3.5rem; }
  .game_result_burst .burst_bubble {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    border: 5px solid;
    border-radius: 3rem; }
  .game_result_burst.show .burst_bubble,
  .game_result_burst.show .burst_name,
  .game_result_burst.show .burst_opinion,
  .game_result_burst.show .burst_card {
    transform: scale(0);
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: 0.5s; }
  .game_result_burst.show .burst_bubble {
    animation-name: show_result_burst; }
  .game_result_burst.show .burst_name {
    animation-name: show_burst_name; }
  .game_result_burst.show .burst_opinion {
    animation-name: show_burst_opinion; }
  .game_result_burst.show .burst_card {
    animation-name: show_burst_card; }
  .game_result_burst.hide .burst_bubble,
  .game_result_burst.hide .burst_name,
  .game_result_burst.hide .burst_opinion,
  .game_result_burst.hide .burst_card {
    animation: hide_result_burst 0.1s 1 linear forwards; }

/* ----------------------- */
/* -------- SCORE -------- */
/* ----------------------- */
.score {
  position: fixed;
  top: 65px;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  overflow: hidden; }

.game_turn {
  border: 3px solid;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  text-align: center;
  transition: opacity 1s; }
  .game_turn.show {
    opacity: 1; }
  .game_turn.hide {
    opacity: 0; }

.gameplay_dialogue {
  position: absolute;
  padding: 1rem;
  border: 5px solid;
  border-radius: 2rem; }

.first_guess {
  top: 24vh; }

.first_answer {
  top: 28vh; }

.second_guess {
  top: 32vh; }

.second_answer {
  top: 36vh; }

.dialogue_show {
  display: block; }
  .dialogue_show .first_guess, .dialogue_show .second_guess {
    animation: dialogue_show_first 1s 1 ease-in-out; }
  .dialogue_show .first_answer, .dialogue_show .second_answer {
    animation: dialogue_show_second 1s 1 ease-in-out; }

.dialogue_hide {
  display: none; }

.progress {
  margin-bottom: 4px; }

.progress_step {
  display: inline-block;
  height: 10px;
  width: 20px;
  position: relative; }
  .progress_step:after {
    content: "";
    display: inline-block;
    background-size: contain; }
  .progress_step.progress_point:after {
    position: relative;
    height: 5px;
    width: 5px;
    border-radius: 1rem;
    border: 3px solid #cccccc;
    top: 1px; }
  .progress_step.progress_check:after {
    position: relative;
    background-image: url("/images/vector/progress-check.svg");
    height: 20px;
    width: 20px;
    top: 4px; }
  .progress_step.progress_nocard:after {
    position: absolute;
    height: 16px;
    aspect-ratio: 2/3;
    border: 3px solid #65D3E4;
    border-radius: 2px;
    transform: rotate(15deg);
    top: -5px;
    left: 5px; }
  .progress_step.progress_card:after {
    position: absolute;
    background-image: url("/images/product/rewards-random.png");
    height: 35px;
    width: 30px;
    top: -14px;
    left: 0; }
  .progress_step.progress_current:after {
    box-shadow: 0px 0px 0px #FFFFFF; }

/* -------------------------- */
/* -------- SUMMARY --------- */
/* -------------------------- */
.hidden_summary {
  display: none; }

.match_details {
  position: relative;
  border-left: 3px solid;
  border-bottom: 3px solid;
  border-right: 3px solid;
  border-radius: 0 0 1rem 1rem;
  padding: 0.5rem 1rem;
  text-align: center;
  pointer-events: all;
  transition: margin 1s; }
  .match_details.show {
    margin-top: 0rem; }
  .match_details.hide {
    margin-top: -20rem; }

.match_summary .match_details.show {
  margin-top: 0rem;
  margin-bottom: 4.5rem; }

.match_summary .match_details.hide {
  margin-top: -28rem;
  margin-bottom: 8rem; }

.share_summary_button {
  display: inline-block;
  border-width: 2px;
  border-style: solid;
  border-radius: 1rem;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0.5rem 4rem;
  margin: 1rem 0px 0.5rem; }

.share_glyph {
  padding-left: 0.5rem;
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  vertical-align: text-bottom; }

.summary_copied {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none; }
  .summary_copied .summary_copied_text {
    position: relative;
    border-style: solid;
    border-width: 2px;
    padding: 3px;
    opacity: 0; }
  .summary_copied.show .summary_copied_text {
    display: inline-block;
    animation: ping_copied_notice 2s 1 forwards; }
  .summary_copied.hide .summary_copied_text {
    opacity: 0; }

.hide_summary_button {
  position: absolute;
  bottom: -3rem;
  border-left: 3px solid;
  border-bottom: 3px solid;
  border-right: 3px solid;
  border-radius: 0 0 1rem 1rem;
  left: 0;
  right: 0;
  z-index: -1;
  margin: 0 auto;
  padding: 0;
  max-width: 6rem; }

.hide_summary_glyph {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  position: relative;
  top: 0.7rem; }

.show_summary_button {
  position: absolute;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-right: 1px solid;
  border-radius: 0 0 1rem 1rem;
  padding: 0.5rem 1rem;
  pointer-events: all;
  transition: top 1s; }
  .show_summary_button.show {
    top: 0rem; }
  .show_summary_button.hide {
    top: -3rem; }

.match_summary {
  position: absolute;
  transition: margin-top 1s;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .match_summary.show {
    margin-top: 0; }
    .match_summary.show .match_summary_line {
      transform: rotateX(0deg); }
  .match_summary.hide {
    margin-top: -350px; }
    .match_summary.hide .match_summary_line {
      transform: rotateX(90deg); }

.match_summary_line {
  text-align: left;
  transition: transform 0.8s; }
  .match_summary_line:nth-child(6n+1) {
    transition-delay: 0.8s; }
    .match_summary_line:nth-child(6n+1) .summary_player * {
      transition-delay: 0s; }
    .match_summary_line:nth-child(6n+1) .summary_answer * {
      transition-delay: 0.05s; }
    .match_summary_line:nth-child(6n+1) .summary_first * {
      transition-delay: 0.10s; }
    .match_summary_line:nth-child(6n+1) .summary_second * {
      transition-delay: 0.15s; }
  .match_summary_line:nth-child(6n+2) {
    transition-delay: 0.9s; }
    .match_summary_line:nth-child(6n+2) .summary_player * {
      transition-delay: 0.05s; }
    .match_summary_line:nth-child(6n+2) .summary_answer * {
      transition-delay: 0.10s; }
    .match_summary_line:nth-child(6n+2) .summary_first * {
      transition-delay: 0.15s; }
    .match_summary_line:nth-child(6n+2) .summary_second * {
      transition-delay: 0.20s; }
  .match_summary_line:nth-child(6n+3) {
    transition-delay: 1.0s; }
    .match_summary_line:nth-child(6n+3) .summary_player * {
      transition-delay: 0.10s; }
    .match_summary_line:nth-child(6n+3) .summary_answer * {
      transition-delay: 0.15s; }
    .match_summary_line:nth-child(6n+3) .summary_first * {
      transition-delay: 0.20s; }
    .match_summary_line:nth-child(6n+3) .summary_second * {
      transition-delay: 0.25s; }
  .match_summary_line:nth-child(6n+4) {
    transition-delay: 1.1s; }
    .match_summary_line:nth-child(6n+4) .summary_player * {
      transition-delay: 0.15s; }
    .match_summary_line:nth-child(6n+4) .summary_answer * {
      transition-delay: 0.20s; }
    .match_summary_line:nth-child(6n+4) .summary_first * {
      transition-delay: 0.25s; }
    .match_summary_line:nth-child(6n+4) .summary_second * {
      transition-delay: 0.30s; }
  .match_summary_line:nth-child(6n+5) {
    transition-delay: 1.2s; }
    .match_summary_line:nth-child(6n+5) .summary_player * {
      transition-delay: 0.20s; }
    .match_summary_line:nth-child(6n+5) .summary_answer * {
      transition-delay: 0.25s; }
    .match_summary_line:nth-child(6n+5) .summary_first * {
      transition-delay: 0.30s; }
    .match_summary_line:nth-child(6n+5) .summary_second * {
      transition-delay: 0.35s; }
  .match_summary_line:nth-child(6n+6) {
    transition-delay: 1.3s; }
    .match_summary_line:nth-child(6n+6) .summary_player * {
      transition-delay: 0.25s; }
    .match_summary_line:nth-child(6n+6) .summary_answer * {
      transition-delay: 0.30s; }
    .match_summary_line:nth-child(6n+6) .summary_first * {
      transition-delay: 0.35s; }
    .match_summary_line:nth-child(6n+6) .summary_second * {
      transition-delay: 0.40s; }

.summary_glyph {
  width: 20px;
  height: 22px;
  margin-right: -20px;
  vertical-align: bottom;
  transform: rotateY(0deg);
  transition: transform 0.5s; }

.summary_city {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  margin-right: -20px;
  transform: rotateY(0deg);
  transition: transform 0.5s; }

.summary_unicode {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  transform: rotateY(-90deg);
  transition: transform 0.5s; }

.match_summary:hover .summary_glyph, .match_summary:hover .summary_city {
  transform: rotateY(90deg); }

.match_summary:hover .summary_unicode {
  transform: rotateY(0deg); }

.summary_blue path {
  fill: #3399FF; }

.summary_orange path {
  fill: #FF9900; }

/* ----------------------- */
/* -------- CHAT --------- */
/* ----------------------- */
.chat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: bottom 1s, opacity 1s; }

.show_chat {
  bottom: 12rem;
  opacity: 1; }

.hide_chat {
  bottom: 100vh;
  opacity: 0; }

.chat_input {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 0;
  border: none;
  outline: none;
  padding: 0.5rem 5rem 0.5rem 0.5rem;
  font-size: 1.6rem; }
  .chat_input:focus {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); }

.chat_submit {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  border-radius: 0;
  border: none;
  border-left: 2px solid #333333;
  outline: none;
  padding: 0.3rem;
  font-size: 1.6rem;
  color: #333333;
  transition: right 0.3s;
  width: 5rem;
  cursor: pointer; }
  .chat_submit:disabled {
    color: #666666;
    right: -5rem; }
  .chat_submit:focus {
    outline: 1px solid #333333; }

.chat_conversation {
  position: absolute;
  padding: 0.5rem;
  left: 0;
  right: 0;
  top: 0;
  bottom: 3rem;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: end; }
  .chat_conversation::-webkit-scrollbar {
    width: 1rem; }
  .chat_conversation::-webkit-scrollbar-track {
    background: #966496;
    transform: background 0.5s; }
  .chat_conversation::-webkit-scrollbar-thumb {
    background: #640064; }
  .chat_conversation::-webkit-scrollbar-thumb:hover {
    background: #960096; }
  .chat_conversation p {
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid; }
    .chat_conversation p:last-child {
      scroll-snap-align: end; }

/* ----------------------- */
/* ------ POST GAME ------ */
/* ----------------------- */
.postgame {
  display: flex;
  flex-direction: column;
  transition: opacity 1s; }
  .postgame.show {
    opacity: 1; }
  .postgame.hide {
    pointer-events: none;
    opacity: 0; }

.postgame_options {
  position: absolute;
  display: flex;
  height: 12rem;
  width: 100%;
  bottom: 0;
  gap: 1rem;
  justify-content: center;
  align-items: center; }

.confirm {
  text-align: center;
  max-width: 45rem; }

.confirm_button {
  border-radius: 2rem;
  padding: 2rem;
  cursor: pointer;
  font-size: 3rem;
  font-weight: bold;
  animation: button_float 1s infinite ease-in-out; }

.event_signup {
  position: fixed;
  top: 0px;
  right: 6px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center; }
  .event_signup .button {
    margin: 0;
    padding: 0.5rem 1rem; }

.event_suggest_signup {
  text-align: center; }
  .event_suggest_signup .button {
    width: auto; }

.connection_indicator {
  position: fixed;
  bottom: 0;
  left: 0; }

.audience_indicator {
  position: fixed;
  top: 7rem; }

.modal_message {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity 1s; }
  .modal_message p, .modal_message h3 {
    width: 100%; }
  .modal_message .button {
    margin: 0; }

.modal_show {
  opacity: 1;
  pointer-events: auto; }

.modal_hide {
  opacity: 0;
  pointer-events: none; }

/* ----------------------- */
/* ------- Z-INDEX ------- */
/* ----------------------- */
.lobby_confirm {
  z-index: 60; }

.lobby_error {
  z-index: 55; }

.game_lobby {
  z-index: 50; }

.game_loading_modal {
  z-index: 45; }

.modal_message {
  z-index: 40; }

.confirm_leave_game {
  z-index: 35; }

.game_settings {
  z-index: 30; }

.play_card {
  z-index: 25; }

.game_search,
.score {
  z-index: 20; }

.chat {
  z-index: 15; }

.my_cards > button:hover {
  z-index: 10; }

.interaction {
  z-index: 5; }

/* ----------------------- */
/* ------ ANIMATION ------ */
/* ----------------------- */
@keyframes button_float {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(0, 1rem); } }

@keyframes dialogue_show_first {
  0% {
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes dialogue_show_second {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes hide_card {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.3); }
  100% {
    transform: scale(0); } }

@keyframes show_card {
  0% {
    transform: scale(0); }
  50% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }

@keyframes opinion_click {
  0% {
    transform: scale(1); }
  45% {
    transform: scale(0.95); }
  90% {
    transform: scale(1.02); }
  100% {
    transform: scale(1); } }

@keyframes show_opinion_buttons_1 {
  0% {
    bottom: -300px; }
  40% {
    bottom: 20px; }
  60% {
    bottom: 0px; }
  100% {
    bottom: 0px; } }

@keyframes show_opinion_buttons_2 {
  0% {
    bottom: -300px; }
  10% {
    bottom: -300px; }
  50% {
    bottom: 20px; }
  70% {
    bottom: 0px; }
  100% {
    bottom: 0px; } }

@keyframes show_opinion_buttons_3 {
  0% {
    bottom: -300px; }
  20% {
    bottom: -300px; }
  60% {
    bottom: 20px; }
  80% {
    bottom: 0px; }
  100% {
    bottom: 0px; } }

@keyframes show_opinion_buttons_4 {
  0% {
    bottom: -300px; }
  30% {
    bottom: -300px; }
  70% {
    bottom: 20px; }
  90% {
    bottom: 0px; }
  100% {
    bottom: 0px; } }

@keyframes show_opinion_buttons_5 {
  0% {
    bottom: -300px; }
  40% {
    bottom: -300px; }
  80% {
    bottom: 20px; }
  100% {
    bottom: 0px; } }

@keyframes hide_opinion_buttons_1 {
  0% {
    bottom: 0px;
    transform: rotateY(0deg); }
  40% {
    bottom: 20px;
    transform: rotateY(360deg); }
  60% {
    bottom: -300px;
    transform: rotateY(360deg); }
  100% {
    bottom: -300px;
    transform: rotateY(360deg); } }

@keyframes hide_opinion_buttons_2 {
  0% {
    bottom: 0px;
    transform: rotateY(0deg); }
  10% {
    bottom: 0px;
    transform: rotateY(0deg); }
  50% {
    bottom: 20px;
    transform: rotateY(360deg); }
  70% {
    bottom: -300px;
    transform: rotateY(360deg); }
  100% {
    bottom: -300px;
    transform: rotateY(360deg); } }

@keyframes hide_opinion_buttons_3 {
  0% {
    bottom: 0px;
    transform: rotateY(0deg); }
  20% {
    bottom: 0px;
    transform: rotateY(0deg); }
  60% {
    bottom: 20px;
    transform: rotateY(360deg); }
  80% {
    bottom: -300px;
    transform: rotateY(360deg); }
  100% {
    bottom: -300px;
    transform: rotateY(360deg); } }

@keyframes hide_opinion_buttons_4 {
  0% {
    bottom: 0px;
    transform: rotateY(0deg); }
  30% {
    bottom: 0px;
    transform: rotateY(0deg); }
  70% {
    bottom: 20px;
    transform: rotateY(360deg); }
  90% {
    bottom: -300px;
    transform: rotateY(360deg); }
  100% {
    bottom: -300px;
    transform: rotateY(360deg); } }

@keyframes hide_opinion_buttons_5 {
  0% {
    bottom: 0;
    transform: rotateY(0deg); }
  40% {
    bottom: 0;
    transform: rotateY(0deg); }
  80% {
    bottom: 20px;
    transform: rotateY(360deg); }
  100% {
    bottom: -300px;
    transform: rotateY(360deg); } }

@keyframes selected_show {
  0% {
    bottom: 0;
    transform: rotateY(0deg); }
  90% {
    bottom: 4.5rem; }
  100% {
    bottom: 4rem;
    transform: rotateY(360deg); } }

@keyframes selected_hide {
  0% {
    bottom: 4rem;
    opactiy: 1; }
  100% {
    bottom: 4rem;
    opacity: 0; } }

@keyframes glyph_show {
  0% {
    opacity: 0;
    top: 0.5rem; }
  100% {
    opacity: 1;
    top: -6.2rem; } }

@keyframes glyph_echo_show {
  0% {
    opacity: 0;
    transform: scale(4); }
  50% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(2); } }

@keyframes glyph_hide {
  0% {
    opacity: 1;
    top: -7rem; }
  100% {
    opacity: 0;
    top: -7rem; } }

@keyframes correct_show {
  0% {
    opacity: 1;
    top: 0rem;
    transform: rotateY(0); }
  50% {
    opacity: 1;
    transform: rotateY(360deg);
    top: -8rem; }
  65% {
    top: -8.5rem; }
  80% {
    opacity: 1;
    top: -7rem; }
  100% {
    opacity: 1;
    top: -7rem;
    transform: rotateY(360deg); } }

@keyframes correct_echo_show {
  60% {
    opacity: 0;
    transform: scale(4); }
  80% {
    opacity: 1;
    transform: scale(1); }
  100% {
    opacity: 0;
    transform: scale(2); } }

@keyframes correct_hide {
  0% {
    opacity: 1;
    top: -7rem; }
  100% {
    opacity: 0;
    top: -7rem; } }

@keyframes show_result_burst {
  0% {
    transform: scale(0); }
  10% {
    transform: scale(1.25); }
  15% {
    transform: scale(1); }
  90% {
    transform: scale(1); }
  95% {
    transform: scale(1.25); }
  100% {
    transform: scale(0); } }

@keyframes show_burst_name {
  0% {
    transform: scale(0); }
  5% {
    transform: scale(0); }
  10% {
    transform: scale(1.5); }
  15% {
    transform: scale(1); }
  85% {
    transform: scale(1); }
  90% {
    transform: scale(0); }
  100% {
    transform: scale(0); } }

@keyframes show_burst_opinion {
  0% {
    transform: scale(0); }
  10% {
    transform: scale(0); }
  15% {
    transform: scale(1.5); }
  20% {
    transform: scale(1); }
  87.5% {
    transform: scale(1); }
  92.5% {
    transform: scale(0); }
  100% {
    transform: scale(0); } }

@keyframes show_burst_card {
  0% {
    transform: scale(0); }
  15% {
    transform: scale(0); }
  20% {
    transform: scale(1.5); }
  25% {
    transform: scale(1); }
  90% {
    transform: scale(1); }
  95% {
    transform: scale(0); }
  100% {
    transform: scale(0); } }

@keyframes hide_result_burst {
  0% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes show_first_card {
  0% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateY(0deg) translate(0, 0); } }

@keyframes show_second_card {
  0% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateY(0deg) translate(0, 0); } }

@keyframes show_third_card {
  0% {
    opacity: 1;
    transform: rotateZ(0) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(0) rotateY(0deg) translate(0, 0); } }

@keyframes show_fourth_card {
  0% {
    opacity: 1;
    transform: rotateZ(11deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(11deg) rotateY(0deg) translate(0, 0); } }

@keyframes show_fifth_card {
  0% {
    opacity: 1;
    transform: rotateZ(20deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(20deg) rotateY(0deg) translate(0, 0); } }

@keyframes show_first_card_off {
  0% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateY(0deg) translate(5rem, 5rem); } }

@keyframes show_second_card_off {
  0% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateY(0deg) translate(2rem, 4rem); } }

@keyframes show_third_card_off {
  0% {
    opacity: 1;
    transform: rotateZ(0) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(0) rotateY(0deg) translate(0, 4rem); } }

@keyframes show_fourth_card_off {
  0% {
    opacity: 1;
    transform: rotateZ(11deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(11deg) rotateY(0deg) translate(-2rem, 4rem); } }

@keyframes show_fifth_card_off {
  0% {
    opacity: 1;
    transform: rotateZ(20deg) rotateY(90deg) translate(0, 10rem); }
  100% {
    opacity: 1;
    transform: rotateZ(20deg) rotateY(0deg) translate(-5rem, 5rem); } }

@keyframes show_first_card_out {
  0% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateX(0deg) translate(5rem, 5rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-20deg) rotateX(-45deg) translate(5rem, 35rem); } }

@keyframes show_second_card_out {
  0% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateX(0deg) translate(2rem, 4rem); }
  100% {
    opacity: 1;
    transform: rotateZ(-11deg) rotateX(-45deg) translate(2rem, 35rem); } }

@keyframes show_third_card_out {
  0% {
    opacity: 1;
    transform: rotateZ(0) rotateX(0deg) translate(0, 4rem); }
  100% {
    opacity: 1;
    transform: rotateZ(0) rotateX(-45deg) translate(0, 35rem); } }

@keyframes show_fourth_card_out {
  0% {
    opacity: 1;
    transform: rotateZ(11deg) rotateX(0deg) translate(-2rem, 4rem); }
  100% {
    opacity: 1;
    transform: rotateZ(11deg) rotateX(-45deg) translate(-2rem, 35rem); } }

@keyframes show_fifth_card_out {
  0% {
    opacity: 1;
    transform: rotateZ(20deg) rotateX(0deg) translate(-5rem, 5rem); }
  100% {
    opacity: 1;
    transform: rotateZ(20deg) rotateX(-45deg) translate(-5rem, 35rem); } }

@keyframes ping_copied_notice {
  0% {
    opacity: 0;
    top: 0; }
  10% {
    opacity: 1;
    top: 0; }
  100% {
    opacity: 0;
    top: -3rem; } }

/* ------------------------ */
/* ----- REGULAR SIZE ----- */
/* ------------------------ */
@media (min-width: 551px) {
  .my_cards {
    position: relative;
    bottom: -3rem; }
  .confirm_leave_game .confirm_content {
    width: 50%; }
  .opinion_button {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 1rem; }
  .first_guess {
    left: 20vw; }
  .first_answer {
    right: 20vw; }
  .second_guess {
    left: 20vw; }
  .second_answer {
    right: 20vw; } }

/* ----------------------- */
/* ----- MOBILE SIZE ----- */
/* ----------------------- */
@media (max-width: 550px) {
  .partner_cards .card_back {
    width: 18vw; }
  .my_cards .card {
    width: 18vw; }
    .my_cards .card .card_category {
      font-size: 10px; }
    .my_cards .card .card_name {
      font-size: 9px; }
  .card_in_play .card {
    width: 30vw; }
    .card_in_play .card .card_category {
      font-size: 4.5vw; }
    .card_in_play .card .card_name {
      font-size: 3.5vw; }
  .opinion_button {
    width: 6.4rem;
    height: 6.4rem;
    font-size: 1rem; }
  .confirm_leave_game .confirm_content {
    width: 90%; }
  .score {
    overflow-y: auto; }
  .first_guess {
    left: 5vw; }
  .first_answer {
    right: 5vw; }
  .second_guess {
    left: 5vw; }
  .second_answer {
    right: 5vw; } }

/* ----------------------- */
/* ----- IPHONE SIZE ----- */
/* ----------------------- */
@media (max-width: 460px) {
  .start_game {
    flex-direction: column; }
  .score {
    overflow-y: auto; }
  .first_guess {
    left: 1rem; }
  .first_answer {
    right: 1rem; }
  .second_guess {
    left: 1rem; }
  .second_answer {
    right: 1rem; } }

/* ----------------------- */
/* ---- CONTRAST MODE ---- */
/* ----------------------- */
@media (prefers-color-scheme: dark) {
  .game_board,
  .game_settings,
  .game_search,
  .game_summary {
    border-color: #FFFFFF; }
  .confirm_leave_game {
    background-color: rgba(0, 0, 0, 0.7); }
    .confirm_leave_game .confirm_content {
      background-color: #cccccc;
      color: #333333; }
  .game_loading_modal h2 {
    background-color: #000000;
    border-color: #FFFFFF; }
  .match_details, .game_turn, .modal_message {
    background-color: #000000;
    border-color: #FFFFFF; }
  .show_summary_button, .hide_summary_button, .share_summary_button, .summary_copied_text {
    background-color: #000000;
    border-color: #FFFFFF;
    color: #FFFFFF; }
  .share_glyph path,
  .hide_summary_glyph path {
    fill: #FFFFFF; }
  .gameplay_dialogue {
    background-color: white;
    color: #000000;
    border-color: #000000; }
  .invite_link_text {
    border-color: #000000;
    background: #FFFFFF;
    color: #000000; }
  .indicator_miss path,
  .indicator_check path {
    stroke-width: 5px;
    stroke: #000000; }
  .leave_game_button path {
    fill: #FFFFFF; } }

@media (prefers-color-scheme: light) {
  .game_board,
  .game_settings,
  .game_search,
  .game_summary {
    border-color: #000000; }
  .confirm_leave_game {
    background-color: rgba(255, 255, 255, 0.9); }
    .confirm_leave_game .confirm_content {
      color: #cccccc;
      background-color: #333333; }
  .game_loading_modal h2 {
    background-color: #FFFFFF;
    border-color: #000000; }
  .match_details, .game_turn, .modal_message, .summary_copied_text {
    background-color: white;
    border-color: #000000; }
  .gameplay_dialogue, .show_summary_button, .hide_summary_button, .share_summary_button {
    background-color: white;
    color: #000000;
    border-color: #000000; }
  .share_glyph path,
  .hide_summary_glyph path {
    fill: #000000; }
  .invite_link_text {
    border-color: #000000;
    background: #FFFFFF;
    color: #000000; }
  .indicator_miss path,
  .indicator_check path,
  .indicator_correct path {
    fill: #FFFFFF !important;
    stroke-width: 5px; }
  .leave_game_button path {
    fill: #000000; }
  .opinion_wrapper:nth-child(5n+1) .indicator_check path, .opinion_wrapper:nth-child(5n+1) .indicator_miss path, .opinion_wrapper:nth-child(5n+1) .indicator_correct path {
    stroke: #52CA76; }
  .opinion_wrapper:nth-child(5n+2) .indicator_check path, .opinion_wrapper:nth-child(5n+2) .indicator_miss path, .opinion_wrapper:nth-child(5n+2) .indicator_correct path {
    stroke: #65D3E4; }
  .opinion_wrapper:nth-child(5n+3) .indicator_check path, .opinion_wrapper:nth-child(5n+3) .indicator_miss path, .opinion_wrapper:nth-child(5n+3) .indicator_correct path {
    stroke: #385CC4; }
  .opinion_wrapper:nth-child(5n+4) .indicator_check path, .opinion_wrapper:nth-child(5n+4) .indicator_miss path, .opinion_wrapper:nth-child(5n+4) .indicator_correct path {
    stroke: #A88EFF; }
  .opinion_wrapper:nth-child(5n+5) .indicator_check path, .opinion_wrapper:nth-child(5n+5) .indicator_miss path, .opinion_wrapper:nth-child(5n+5) .indicator_correct path {
    stroke: #FD90FE; } }

/**********/
/* Layout */
/**********/
.game_lobby {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: bottom 1s, border 1s, filter 1s, opacity 1s;
  overflow: hidden; }

.lobby {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.lobby_nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  margin: 2rem 0 1rem; }
  .lobby_nav a {
    display: block;
    padding: 1rem;
    border: 2px solid;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    flex-grow: 1;
    width: 35%; }
    .lobby_nav a:nth-child(4n+1) {
      border-radius: 2rem 0 0 0; }
    .lobby_nav a:nth-child(4n+2) {
      border-radius: 0 2rem 0 0; }
    .lobby_nav a:nth-child(4n+3) {
      border-radius: 0 0 0 2rem; }
    .lobby_nav a:nth-child(4n+4) {
      border-radius: 0 0 2rem 0; }

.show_lobby {
  bottom: 0;
  border-bottom: 3px solid;
  pointer-events: auto; }

.hide_lobby {
  bottom: 100%;
  pointer-events: none; }

.lobby_game_on {
  filter: blur(10px);
  pointer-events: none;
  opacity: 0; }

.lobby_game_off {
  filter: blur(0px);
  pointer-events: auto;
  opacity: 1; }

.lobby_error, .lobby_confirm, .lobby_loading {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: opacity 1s; }
  .lobby_error.show, .lobby_confirm.show, .lobby_loading.show {
    opacity: 1;
    pointer-events: auto; }
  .lobby_error.hide, .lobby_confirm.hide, .lobby_loading.hide {
    opacity: 0;
    pointer-events: none; }

.lobby_confirm h4 {
  margin-bottom: 1rem; }

.lobby_confirm p {
  display: flex;
  gap: 1rem; }

.lobby_loading {
  pointer-events: none;
  transition: opacity 0.5s; }

/************/
/* Listings */
/************/
.lobby_list {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  padding: 1rem 1rem 5rem; }

.lobby_list_public {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-top: 1px solid; }

.lobby_list_item {
  display: flex;
  justify-content: space-between;
  width: 100%; }
  .lobby_list_item a, .lobby_list_item span {
    padding: 2px 5px; }

.lobby_state_header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-weight: bold;
  font-size: 2rem;
  line-height: 2rem;
  margin: 1rem 0; }

.lobby_state_text {
  flex-grow: 1; }

.lobby_footer {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  align-items: center;
  width: 100%; }

.event_lobby_input .matchword_input {
  margin: 0 auto;
  width: 32rem;
  padding-top: 1rem;
  padding-left: 7.2rem;
  transition: width 1s;
  overflow: hidden; }
  .event_lobby_input .matchword_input .button {
    font-weight: bold; }
  .event_lobby_input .matchword_input .button.invalid {
    border-width: 5px; }
  .event_lobby_input .matchword_input:before {
    top: -10px;
    left: 8px;
    transition: left 1s; }

.event_lobby_input .custom_lobby_input {
  display: flex;
  justify-content: center; }
  .event_lobby_input .custom_lobby_input .button {
    margin-bottom: 0; }

/****************/
/* Custom Lobby */
/****************/
.custom_lobby_controls {
  display: flex;
  gap: 1rem; }
  .custom_lobby_controls p {
    margin: 0 0 1.2rem; }
  .custom_lobby_controls .button {
    margin: 0 0 0.6rem; }
  .custom_lobby_controls .qrcode_wrapper {
    margin: 0; }
  .custom_lobby_controls .custom_lobby_buttons {
    width: 100%; }

.custom_lobby_title {
  padding-bottom: 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid; }

/****************/
/* Lobby Layout */
/****************/
.lobby_room {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; }

.lobby_divider {
  padding: 0 2rem; }

.lobby_description {
  overflow: auto;
  transition: max-height .7s, margin-bottom .7s; }
  .lobby_description .lobby_description_content {
    padding: 1rem;
    border: 1px solid; }
  .lobby_description p {
    margin-bottom: 1rem; }
  .lobby_description p:last-child {
    margin-bottom: 0; }
  .lobby_description.show {
    max-height: 30vh;
    margin-bottom: 1rem; }
  .lobby_description.hide {
    max-height: 0vh;
    margin-bottom: 0rem; }

.lobby_show_description {
  display: block;
  border-top: 2px solid;
  margin: 0 -2rem 1rem;
  display: flex;
  justify-content: center; }
  .lobby_show_description .toggle_button {
    height: 2rem;
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    width: 5rem;
    border-radius: 0 0 1rem 1rem; }
  .lobby_show_description .toggle_button_glyph {
    transition: transform 1s; }
  .lobby_show_description.up .toggle_button_glyph {
    transform: rotateX(180deg); }
  .lobby_show_description.down .toggle_button_glyph {
    transform: rotateX(0deg); }

.lobby_population {
  flex-grow: 1;
  overflow-y: scroll; }
  .lobby_population h4 {
    padding-bottom: 4px; }

.lobby_controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 2rem; }

.lobby_status {
  display: flex;
  align-items: center; }
  .lobby_status button {
    margin: 0; }
  .lobby_status p {
    margin: 0 2rem;
    text-align: center; }

.player_list_buttons {
  margin: 1rem -2rem 0;
  padding: 0.2rem 2rem 1rem; }
  .player_list_buttons .all_players_button,
  .player_list_buttons .only_invites_button {
    position: relative; }
    .player_list_buttons .all_players_button .indicator,
    .player_list_buttons .only_invites_button .indicator {
      position: absolute;
      height: 2rem;
      bottom: -1.9rem;
      left: 0;
      width: 100%;
      transition: transform 0.5s; }
    .player_list_buttons .all_players_button.on .indicator,
    .player_list_buttons .only_invites_button.on .indicator {
      transform: rotateY(180deg); }
    .player_list_buttons .all_players_button.off .indicator,
    .player_list_buttons .only_invites_button.off .indicator {
      transform: rotateY(-90deg); }

.only_invites_button {
  margin-left: 1rem; }

.lobby_player_list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column; }
  .lobby_player_list.players .default,
  .lobby_player_list.invites .invite {
    height: 2.5rem; }
  .lobby_player_list.invites .default {
    margin-top: -1px;
    height: 0rem;
    padding-top: 0;
    padding-bottom: 0; }

.lobby_player {
  padding-right: 1rem;
  padding-left: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid;
  box-sizing: border-box;
  overflow: hidden;
  transition: height 0.5s, padding 0.5s; }
  .lobby_player .accept_invite {
    flex-grow: 2;
    text-align: right; }
  .lobby_player .player_self {
    flex-grow: 2;
    text-align: right; }
  .lobby_player .player_id {
    padding: 0 0.2rem; }

.lobby_modal {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s;
  z-index: 10; }
  .lobby_modal .lobby_modal_content {
    position: relative;
    text-align: center;
    border: 5px solid;
    border-radius: 2rem;
    padding: 2rem;
    z-index: 10; }
    .lobby_modal .lobby_modal_content h2 {
      margin-top: -3rem; }
    .lobby_modal .lobby_modal_content .url {
      font-weight: bold;
      margin-bottom: 1rem; }
  .lobby_modal .close_modal_button {
    display: inline-block;
    border: 3px solid;
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    margin-top: 1rem; }
    .lobby_modal .close_modal_button.no_margin {
      margin-top: 0rem; }
  .lobby_modal.show {
    opacity: 1;
    pointer-events: auto; }
  .lobby_modal.hide {
    opacity: 0;
    pointer-events: none; }

.player_details {
  display: flex;
  flex-direction: column;
  gap: 1rem; }
  .player_details .button {
    margin-bottom: 0; }

/***********/
/* Buttons */
/***********/
.open_lobbies,
.close_lobbies {
  padding: 0.5rem 2rem;
  border-style: solid;
  text-decoration: none; }

.open_lobbies {
  position: absolute;
  top: 0;
  border-width: 0px 1px 1px 1px;
  border-radius: 0 0 1rem 1rem; }

.close_lobbies {
  border-width: 1px 1px 0px 1px;
  border-radius: 1rem 1rem 0 0; }

.quick_close_lobbies {
  text-decoration: none; }

.refresh_lobbies, .leave_lobby, .close_player {
  line-height: 1.5rem;
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  padding: 0 5px; }

.refresh_lobbies, .leave_lobby {
  height: 3rem; }

.close_player {
  display: inline-block; }
  .close_player .lobby_glyph {
    height: 2rem;
    width: 2rem; }

.refresh_lobbies {
  font-size: 3rem;
  width: 2.5rem;
  font-weight: bold; }

.leave_lobby {
  font-size: 2rem; }

.join_lobby {
  display: block;
  width: 100%; }

.lobby_back, .lobby_you {
  transform: rotate(90deg);
  position: relative;
  height: 2rem;
  width: 2rem; }

.lobby_back {
  top: 1px; }

.lobby_you {
  top: 4px;
  right: 4px; }

/*************/
/* Animation */
/*************/
.lobby, .lobby:before {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 110% auto; }

.lobby_room, .lobby_list {
  transition: top 0.75s, opacity 0.75s, transform 0.75s; }

.in_lobby .join_lobby {
  pointer-events: none; }

.in_lobby .lobby_list {
  top: -20vh;
  transform: scale(1.25);
  opacity: 0;
  pointer-events: none; }

.in_lobby .lobby_room {
  top: 0vh;
  transform: scale(1);
  opacity: 1; }

.selecting_lobby .join_lobby {
  pointer-events: auto; }

.selecting_lobby .lobby_list {
  top: 0vh;
  transform: scale(1);
  opacity: 1; }

.selecting_lobby .lobby_room {
  top: 20vh;
  transform: scale(0.75);
  opacity: 0;
  pointer-events: none; }

.selecting_lobby.lobby:before {
  background-position: center bottom -70vw; }

/*********/
/* Media */
/*********/
@media (max-width: 550px) {
  .lobby_status {
    flex-direction: column; }
  .lobby {
    background-position: center bottom;
    background-size: 110% auto;
    background-position: center bottom -5vw; }
    .lobby.in_lobby:before {
      background-position: center bottom -30vw; }
  .lobby_deck_selector {
    max-width: 100%; }
  .event_lobby_input .matchword_input {
    width: 25rem; }
  .matchword_input.invite_display {
    margin: 0 auto;
    width: 25rem; }
  h2.with_logo {
    font-size: 3.5rem; } }

@media (min-width: 551px) {
  .lobby_status {
    flex-direction: row; }
  .lobby {
    background-position: center bottom -15vw; }
    .lobby.in_lobby:before {
      background-position: center bottom -40vw; }
  .lobby_deck_selector {
    max-width: 25rem; } }

@media (max-width: 800px) {
  .lobby {
    background-position: center bottom -20vw; }
    .lobby.in_lobby:before {
      background-position: center bottom -45vw; }
  .lobby_modal_content {
    margin: 2rem; } }

@media (min-width: 801px) {
  .lobby {
    background-position: center bottom -25vw; }
    .lobby.in_lobby:before {
      background-position: center bottom -50vw; }
  .lobby_nav a {
    width: 15%; }
    .lobby_nav a:nth-child(4n+1) {
      border-radius: 2rem 0 0 2rem; }
    .lobby_nav a:nth-child(4n+2) {
      border-radius: 0; }
    .lobby_nav a:nth-child(4n+3) {
      border-radius: 0; }
    .lobby_nav a:nth-child(4n+4) {
      border-radius: 0 2rem 2rem 0; }
  .lobby_player_list {
    flex-direction: row;
    flex-wrap: wrap; }
  .lobby_player {
    width: 50%; }
    .lobby_player:nth-child(even) {
      border-left: 1px solid;
      padding: 0.2rem 0 0.2rem 1rem; }
    .lobby_player:nth-child(odd) {
      padding: 0.2rem 1rem 0.2rem 1.5rem; }
  .lobby_modal_textline {
    display: block; } }

@media (prefers-color-scheme: dark) {
  .lobby_glyph {
    fill: #FFFFFF; }
  .open_lobbies, .close_lobbies, .refresh_lobbies, .leave_lobby, .quick_close_lobbies, .close_player {
    color: #FFFFFF; }
  .open_lobbies, .close_lobbies {
    background-color: #000000; }
  .toggle_button {
    border-color: #FFFFFF !important; }
  .player_id {
    color: #999999; }
  .lobby_list_item {
    background-color: rgba(50, 50, 50, 0.8); }
  .lobby_error, .lobby_confirm, .lobby_loading, .lobby_modal, .lobby_player_list, .player_list_buttons {
    background-color: rgba(0, 0, 0, 0.8); }
  .lobby_description {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: #ffffff; }
  .lobby_modal {
    background-color: rgba(0, 0, 0, 0.6); }
    .lobby_modal .lobby_modal_content {
      border-color: #ffffff;
      background-color: #000000; }
  .lobby_player {
    border-color: #555555; }
  .lobby {
    background-color: #000000;
    background-image: url(/images/background/bg-city-night.png); }
    .lobby.selecting_lobby:before {
      background-color: rgba(0, 0, 0, 0); }
    .lobby.in_lobby:before {
      background-color: rgba(0, 0, 0, 0.5); }
  .lobby_nav a {
    background-color: #000000; }
  .close_modal_button {
    color: #ffffff;
    border-color: #ffffff;
    background-color: #000000; }
  .lobby_show_description {
    color: #ffffff;
    border-color: #ffffff;
    background-color: transparent; }
    .lobby_show_description .toggle_button {
      background-color: #000000; } }

@media (prefers-color-scheme: light) {
  .lobby_glyph {
    fill: #000000; }
  .open_lobbies, .close_lobbies, .refresh_lobbies, .leave_lobby, .quick_close_lobbies, .close_player {
    color: #000000; }
  .open_lobbies, .close_lobbies {
    background-color: #FFFFFF; }
  .toggle_button {
    border-color: #000000 !important; }
  .player_id {
    color: #666666; }
  .lobby_list_item, .lobby_player_list, .lobby_error, .lobby_confirm, .lobby_loading, .player_list_buttons, .lobby_description {
    background-color: rgba(255, 255, 255, 0.8); }
  .lobby_description {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: #000000; }
  .lobby_modal {
    background-color: rgba(255, 255, 255, 0.6); }
    .lobby_modal .lobby_modal_content {
      border-color: #000000;
      background-color: #ffffff; }
  .lobby_player {
    border-color: #aaaaaa; }
  .lobby {
    background-color: #99ccff;
    background-image: url(/images/background/bg-city-day.png); }
    .lobby.selecting_lobby:before {
      background-color: rgba(153, 204, 255, 0); }
    .lobby.in_lobby:before {
      background-color: rgba(153, 204, 255, 0.5); }
  .lobby_nav a {
    background-color: #ffffff; }
  .close_modal_button {
    color: #000000;
    border-color: #000000;
    background-color: #ffffff; }
  .lobby_show_description {
    color: #000000;
    border-color: #000000;
    background-color: transparent; }
    .lobby_show_description .toggle_button {
      background-color: #ffffff; } }

/* Animation Keyframes */
@keyframes answer_movement {
  0% {
    top: 8%; }
  50% {
    top: 12%; }
  100% {
    top: 8%; } }

@keyframes border_shimmer_1 {
  0% {
    border-color: #FD90FE; }
  20% {
    border-color: #A88EFF; }
  40% {
    border-color: #385CC4; }
  60% {
    border-color: #65D3E4; }
  80% {
    border-color: #52CA76; }
  100% {
    border-color: #FD90FE; } }

@keyframes border_shimmer_2 {
  0% {
    border-color: #A88EFF; }
  20% {
    border-color: #385CC4; }
  40% {
    border-color: #65D3E4; }
  60% {
    border-color: #52CA76; }
  80% {
    border-color: #FD90FE; }
  100% {
    border-color: #A88EFF; } }

@keyframes border_shimmer_3 {
  0% {
    border-color: #385CC4; }
  20% {
    border-color: #65D3E4; }
  40% {
    border-color: #52CA76; }
  60% {
    border-color: #FD90FE; }
  80% {
    border-color: #A88EFF; }
  100% {
    border-color: #385CC4; } }

@keyframes border_shimmer_4 {
  0% {
    border-color: #65D3E4; }
  20% {
    border-color: #52CA76; }
  40% {
    border-color: #FD90FE; }
  60% {
    border-color: #A88EFF; }
  80% {
    border-color: #385CC4; }
  100% {
    border-color: #65D3E4; } }

@keyframes border_shimmer_5 {
  0% {
    border-color: #52CA76; }
  20% {
    border-color: #FD90FE; }
  40% {
    border-color: #A88EFF; }
  60% {
    border-color: #385CC4; }
  80% {
    border-color: #65D3E4; }
  100% {
    border-color: #52CA76; } }

/* Styles */
.welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; }
  .welcome:after {
    content: "";
    display: block;
    height: 200px; }

.welcome_video {
  aspect-ratio: 16/9;
  width: 100%; }

.welcome_action {
  display: flex;
  gap: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 1px solid;
  padding: 5px;
  justify-content: center; }
  .welcome_action .button {
    margin: 0; }

.welcome_screenshots {
  display: flex;
  gap: 20px;
  margin: 30px 0;
  justify-content: center; }
  .welcome_screenshots img {
    cursor: pointer;
    width: 10vw;
    transform: rotateZ(-10deg);
    border: 2px solid;
    border-radius: 10px;
    transition: border 0.5s; }
    .welcome_screenshots img:hover:nth-child(5n+0) {
      border-color: #FD90FE; }
    .welcome_screenshots img:hover:nth-child(5n+1) {
      border-color: #A88EFF; }
    .welcome_screenshots img:hover:nth-child(5n+2) {
      border-color: #385CC4; }
    .welcome_screenshots img:hover:nth-child(5n+3) {
      border-color: #65D3E4; }
    .welcome_screenshots img:hover:nth-child(5n+4) {
      border-color: #52CA76; }

.inline_matchword {
  position: relative;
  padding-left: 30px; }
  .inline_matchword:before {
    content: "";
    display: inline-block;
    background-size: contain;
    position: absolute;
    top: -4px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url("/images/vector/matchword-on.svg"); }

.content,
.intro_content,
.welcome_intro,
.welcome_item {
  padding: 2rem;
  margin: 2rem;
  border: 3px solid;
  border-radius: 5rem; }
  .content:nth-child(5n+0),
  .intro_content:nth-child(5n+0),
  .welcome_intro:nth-child(5n+0),
  .welcome_item:nth-child(5n+0) {
    border-color: #FD90FE; }
  .content:nth-child(5n+1),
  .intro_content:nth-child(5n+1),
  .welcome_intro:nth-child(5n+1),
  .welcome_item:nth-child(5n+1) {
    border-color: #A88EFF; }
  .content:nth-child(5n+2),
  .intro_content:nth-child(5n+2),
  .welcome_intro:nth-child(5n+2),
  .welcome_item:nth-child(5n+2) {
    border-color: #385CC4; }
  .content:nth-child(5n+3),
  .intro_content:nth-child(5n+3),
  .welcome_intro:nth-child(5n+3),
  .welcome_item:nth-child(5n+3) {
    border-color: #65D3E4; }
  .content:nth-child(5n+4),
  .intro_content:nth-child(5n+4),
  .welcome_intro:nth-child(5n+4),
  .welcome_item:nth-child(5n+4) {
    border-color: #52CA76; }
  .content p,
  .intro_content p,
  .welcome_intro p,
  .welcome_item p {
    margin-bottom: 1rem; }

.welcome_popup {
  display: flex;
  align-items: top;
  justify-content: center;
  transition: opacity 1s;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  padding: 50px;
  cursor: pointer; }
  .welcome_popup img {
    height: 100%; }
  .welcome_popup .welcome_image_wrapper {
    height: 70vh;
    width: auto;
    border: 5px solid;
    border-radius: 20px;
    top: 12vh;
    position: relative;
    padding: 1rem; }
  .welcome_popup .close_circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-weight: bold;
    font-size: 2rem;
    top: -2.2rem;
    right: -2.2rem;
    height: 3rem;
    width: 3rem;
    border-radius: 20px;
    border: 5px solid;
    z-index: 10; }
  .welcome_popup.show {
    opacity: 1;
    pointer-events: all; }
  .welcome_popup.hide {
    opacity: 0;
    pointer-events: none; }

.intro_note {
  text-align: center;
  margin: 1.5rem 0 0;
  font-weight: bold; }

.intro_welcome {
  width: 100%;
  overflow: hidden; }

.intro_bar, .intro_break {
  display: block;
  background: linear-gradient(to left, #FD90FE, #A88EFF, #385CC4, #65D3E4, #52CA76, #FD90FE);
  animation-name: shiny_slide;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.intro_bar {
  height: 1rem; }

.intro_break {
  height: 2rem;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-image: linear-gradient(to top, transparent, #000000, transparent); }

.intro_wrapped_dual {
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  .intro_wrapped_dual .intro_shiny {
    aspect-ratio: 8 / 5; }

.intro_hype_text {
  flex-grow: 1; }

.intro_horizontal_dual {
  display: flex; }
  .intro_horizontal_dual .dual_item .intro_shiny {
    aspect-ratio: 8 / 5;
    width: 100%; }

.intro_shiny {
  position: relative;
  background-image: url("/images/background/bg-shiny.jpg");
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: 100vw 100vh;
  mask-size: contain;
  mask-repeat: no-repeat; }

.bunny_one {
  mask-image: url("/images/landing/bunny-one.png"); }

.bunny_two {
  mask-image: url("/images/landing/bunny-two.png"); }

.bunny_three {
  mask-image: url("/images/landing/bunny-three.png"); }

.bunny_cards {
  mask-image: url("/images/landing/bunny-cards.png"); }

.bunny_broom {
  mask-image: url("/images/landing/bunny-broom.png"); }

.bunny_cook {
  mask-image: url("/images/landing/bunny-cook.png"); }

.shiny_heart {
  mask-image: url("/images/reactions/heart-animated.gif"); }

.shiny_thumbdown {
  mask-image: url("/images/reactions/thumb-down.png");
  animation-name: answer_movement;
  animation-duration: 1s;
  animation-iteration-count: infinite; }

.welcome_text {
  padding: 1rem;
  text-align: center; }

.service_note {
  margin: 2rem auto;
  width: 350px; }

.intro_pitch {
  display: flex;
  gap: 2rem;
  flex-direction: column; }
  .intro_pitch .intro_pitch_text {
    max-width: 50vw;
    flex-grow: 1; }
  .intro_pitch .intro_connect {
    width: 100%; }

.welcome_header {
  background-image: url("/images/brand/logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  padding-left: 2rem; }

.intro_social {
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; }
  .intro_social .social_item {
    display: flex;
    flex-direction: row;
    align-item: flex-start;
    margin-top: 1rem;
    border-top: 1px solid;
    padding-top: 1rem; }
  .intro_social a img {
    aspect-ratio: 1/1;
    max-width: 100px;
    width: 10vw;
    margin-right: 1rem; }
  .intro_social p {
    flex-grow: 1;
    margin: 0; }
  .intro_social .social_title {
    font-weight: bold;
    display: block; }

/* Intro Graphic Styles */
.welcome_graphic {
  position: relative;
  background-size: contain;
  aspect-ratio: 12 / 11;
  overflow: hidden; }
  .welcome_graphic:after {
    content: "";
    position: absolute;
    pointer-events: none;
    height: 7.5%;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% auto; }
  .welcome_graphic .talk_off {
    opacity: 0; }
  .welcome_graphic .talk_on {
    opacity: 1; }
  .welcome_graphic .talk_left, .welcome_graphic .talk_right {
    position: absolute;
    display: block;
    top: 35%;
    aspect-ratio: 21 / 20;
    width: 30%;
    background-image: url("/images/landing/comic-bubble.svg");
    background-size: contain;
    pointer-events: none;
    transition: opacity 0.5s; }
    .welcome_graphic .talk_left .say_image, .welcome_graphic .talk_right .say_image {
      position: absolute;
      display: block;
      background-position: center center;
      height: 55%;
      top: 10%;
      left: 10%;
      right: 10%; }
  .welcome_graphic .talk_left {
    transform: scaleX(-1);
    left: 2%; }
    .welcome_graphic .talk_left .say_image {
      transform: scaleX(-1); }
  .welcome_graphic .talk_right {
    right: 2%; }
  .welcome_graphic .answer_heart {
    background-image: url("/images/landing/heart-animated.gif"); }
  .welcome_graphic .answer_thumbup {
    background-image: url("/images/landing/thumb-up.png"); }
  .welcome_graphic .answer_shrug {
    background-image: url("/images/landing/shrug.png"); }
  .welcome_graphic .answer_thumbdown {
    background-image: url("/images/landing/thumb-down.png"); }
  .welcome_graphic .ask_camping {
    background-image: url("/images/cards/camping.png"); }
  .welcome_graphic .ask_chai {
    background-image: url("/images/cards/chai.png"); }
  .welcome_graphic .ask_coffee {
    background-image: url("/images/cards/coffee.png"); }
  .welcome_graphic .ask_cooking {
    background-image: url("/images/cards/cooking.png"); }
  .welcome_graphic .ask_music {
    background-image: url("/images/cards/music.png"); }
  .welcome_graphic .ask_reading {
    background-image: url("/images/cards/reading.png"); }
  .welcome_graphic .ask_sports {
    background-image: url("/images/cards/sports.png"); }
  .welcome_graphic .ask_tea {
    background-image: url("/images/cards/tea.png"); }
  .welcome_graphic .ask_vidja {
    background-image: url("/images/cards/vidja.png"); }
  .welcome_graphic .answer_heart,
  .welcome_graphic .answer_thumbup,
  .welcome_graphic .answer_shrug,
  .welcome_graphic .answer_thumbdown {
    background-size: contain; }
  .welcome_graphic .answer_thumbup,
  .welcome_graphic .answer_shrug,
  .welcome_graphic .answer_thumbdown {
    animation-name: answer_movement;
    animation-duration: 1s;
    animation-iteration-count: infinite; }
  .welcome_graphic .ask_camping,
  .welcome_graphic .ask_chai,
  .welcome_graphic .ask_coffee,
  .welcome_graphic .ask_cooking,
  .welcome_graphic .ask_music,
  .welcome_graphic .ask_reading,
  .welcome_graphic .ask_sports,
  .welcome_graphic .ask_tea,
  .welcome_graphic .ask_vidja {
    background-size: cover; }
  .welcome_graphic .player {
    display: block;
    width: 35%;
    aspect-ratio: 10 / 14;
    position: absolute;
    bottom: -10%;
    pointer-events: none; }
    .welcome_graphic .player .head {
      display: block;
      position: absolute;
      aspect-ratio: 1 / 1;
      width: 51.8%;
      background-size: contain;
      z-index: 10; }
    .welcome_graphic .player .body {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-size: contain;
      z-index: 5; }
    .welcome_graphic .player .head img, .welcome_graphic .player .body img {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0; }
    .welcome_graphic .player .head:after, .welcome_graphic .player .body:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-size: contain; }
  .welcome_graphic .f_1.e_1 .head:after {
    background-image: url("/images/character/char-f1-e1.png"); }
  .welcome_graphic .f_1.e_2 .head:after {
    background-image: url("/images/character/char-f1-e2.png"); }
  .welcome_graphic .f_1.e_3 .head:after {
    background-image: url("/images/character/char-f1-e3.png"); }
  .welcome_graphic .f_1.e_4 .head:after {
    background-image: url("/images/character/char-f1-e4.png"); }
  .welcome_graphic .f_1.e_5 .head:after {
    background-image: url("/images/character/char-f1-e5.png"); }
  .welcome_graphic .f_2.e_1 .head:after {
    background-image: url("/images/character/char-f2-e1.png"); }
  .welcome_graphic .f_2.e_2 .head:after {
    background-image: url("/images/character/char-f2-e2.png"); }
  .welcome_graphic .f_2.e_3 .head:after {
    background-image: url("/images/character/char-f2-e3.png"); }
  .welcome_graphic .f_2.e_4 .head:after {
    background-image: url("/images/character/char-f2-e4.png"); }
  .welcome_graphic .f_2.e_5 .head:after {
    background-image: url("/images/character/char-f2-e5.png"); }
  .welcome_graphic .f_3.e_1 .head:after {
    background-image: url("/images/character/char-f3-e1.png"); }
  .welcome_graphic .f_3.e_2 .head:after {
    background-image: url("/images/character/char-f3-e2.png"); }
  .welcome_graphic .f_3.e_3 .head:after {
    background-image: url("/images/character/char-f3-e3.png"); }
  .welcome_graphic .f_3.e_4 .head:after {
    background-image: url("/images/character/char-f3-e4.png"); }
  .welcome_graphic .f_3.e_5 .head:after {
    background-image: url("/images/character/char-f3-e5.png"); }
  .welcome_graphic .f_4.e_1 .head:after {
    background-image: url("/images/character/char-f4-e1.png"); }
  .welcome_graphic .f_4.e_2 .head:after {
    background-image: url("/images/character/char-f4-e2.png"); }
  .welcome_graphic .f_4.e_3 .head:after {
    background-image: url("/images/character/char-f4-e3.png"); }
  .welcome_graphic .f_4.e_4 .head:after {
    background-image: url("/images/character/char-f4-e4.png"); }
  .welcome_graphic .f_4.e_5 .head:after {
    background-image: url("/images/character/char-f4-e5.png"); }
  .welcome_graphic .player_left {
    left: 12%; }
    .welcome_graphic .player_left.b_1 .head {
      left: 16%;
      top: 7%; }
    .welcome_graphic .player_left.b_1 .body:after {
      background-image: url("/images/character/char-b1-p1.png"); }
    .welcome_graphic .player_left.b_2 .head {
      left: 10%;
      top: 6%; }
    .welcome_graphic .player_left.b_2 .body:after {
      background-image: url("/images/character/char-b2-p1.png"); }
  .welcome_graphic .player_right {
    right: 14%; }
    .welcome_graphic .player_right .head {
      transform: scaleX(-1); }
    .welcome_graphic .player_right.b_1 .head {
      right: 11%;
      top: 6%; }
    .welcome_graphic .player_right.b_1 .body:after {
      background-image: url("/images/character/char-b1-p2.png"); }
    .welcome_graphic .player_right.b_2 .head {
      right: 5%;
      top: 6%; }
    .welcome_graphic .player_right.b_2 .body:after {
      background-image: url("/images/character/char-b2-p2.png"); }

.colyseus_summary {
  display: flex;
  align-items: center;
  margin-bottom: 2rem; }
  .colyseus_summary img {
    width: 10rem;
    height: 10rem;
    margin-left: 2rem;
    margin-right: 2rem; }

@media (min-width: 1211px) {
  .intro_welcome {
    display: flex; }
  .welcome_graphic {
    width: 720px;
    height: 660px; }
  .welcome_text {
    padding: 1rem 2.5vw;
    flex-grow: 1; }
  .welcome_description {
    margin: 2rem; }
  .welcome_video,
  .welcome_intro,
  .welcome_item {
    width: 900px; } }

@media (min-width: 951px) {
  .welcome_header {
    padding: 2rem 0rem 2rem 12rem;
    font-size: 5rem; }
  .intro_horizontal_dual .dual_item {
    width: 50%; }
  .intro_wrapped_dual .dual_item_text {
    width: 45%; }
  .intro_wrapped_dual .intro_shiny {
    width: 55%; } }

@media (max-width: 950px) {
  .welcome_header {
    padding-left: 7rem; }
  .intro_pitch .intro_pitch_text {
    max-width: none; }
  .intro_pitch .intro_pitch_header:before {
    content: "";
    aspect-ratio: 1 / 1;
    background-image: url("/images/brand/logo-50.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 5rem;
    float: left;
    padding-right: 1rem; }
  .intro_horizontal_dual {
    flex-direction: column; }
    .intro_horizontal_dual .dual_item {
      width: 100%; }
  .intro_wrapped_dual {
    flex-direction: column; }
    .intro_wrapped_dual .dual_item_text {
      width: 100%; }
    .intro_wrapped_dual .intro_shiny {
      width: 100%; }
    .intro_wrapped_dual .learn_friends_text {
      order: 5; } }

@media (max-width: 725px) {
  .welcome_header {
    padding: 0;
    background: none; } }

@media (min-width: 801px) and (max-width: 1235px) {
  .intro_welcome {
    display: block;
    position: relative; }
  .welcome_graphic {
    width: 720px;
    height: 660px; }
  .welcome_text {
    position: absolute;
    width: auto;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    top: 0;
    right: 0; }
  .welcome_video,
  .welcome_intro,
  .welcome_item {
    width: 600px; } }

@media (min-width: 801px) and (max-width: 1235px) and (prefers-color-scheme: dark) {
  .welcome_graphic {
    background-color: black;
    box-shadow: 30px 0px 20px black; }
  .welcome_text {
    background-color: rgba(0, 0, 0, 0.7); } }

@media (min-width: 801px) and (max-width: 1235px) and (prefers-color-scheme: light) {
  .welcome_graphic {
    background-color: white;
    box-shadow: 30px 0px 20px white; }
  .welcome_text {
    background-color: rgba(255, 255, 255, 0.7); } }

@media (min-width: 601px) and (max-width: 800px) {
  .welcome_graphic {
    width: 100%; }
  .welcome_action {
    display: flex;
    flex-direction: column; }
  .welcome_text {
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0; }
  .welcome_video {
    width: 100%; }
  .welcome_intro,
  .welcome_item {
    margin: 5px; } }

@media (min-width: 601px) and (max-width: 800px) and (prefers-color-scheme: dark) {
  .welcome_text {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 100%); } }

@media (min-width: 601px) and (max-width: 800px) and (prefers-color-scheme: light) {
  .welcome_text {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 20%, rgba(255, 255, 255, 0) 100%); } }

@media (max-width: 600px) {
  .intro_welcome,
  .welcome_action {
    display: flex;
    flex-direction: column; }
  .welcome_graphic {
    width: 100%; }
  .welcome_logo {
    position: fixed;
    padding-bottom: 2rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; }
  .welcome_video {
    width: 100%; }
  .welcome_intro,
  .welcome_item {
    margin: 5px; } }

@media (max-width: 600px) and (prefers-color-scheme: dark) {
  .welcome_logo {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0) 100%); } }

@media (max-width: 600px) and (prefers-color-scheme: light) {
  .welcome_logo {
    background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%); } }

@media (prefers-color-scheme: dark) {
  .intro_welcome, .intro_content {
    border-color: #FFFFFF; }
  .welcome_graphic {
    background-image: url("/images/landing/setting-city-night.jpg"); }
    .welcome_graphic:after {
      background-image: url("/images/landing/setting-table-night.png"); }
  .intro_content {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0) 100%); }
  .welcome_action, .close_circle {
    border-color: #FFFFFF;
    background-color: #000000; } }

@media (prefers-color-scheme: light) {
  .intro_welcome, .intro_content {
    border-color: #000000; }
  .welcome_graphic {
    background-image: url("/images/landing/setting-city-day.jpg"); }
    .welcome_graphic:after {
      background-image: url("/images/landing/setting-table-day.png"); }
  .intro_content {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0) 100%); }
  .welcome_action, .close_circle {
    border-color: #000000;
    background-color: #ffffff; } }

.shop_link {
  display: flex;
  gap: 1rem;
  border: 2px solid;
  text-decoration: none;
  padding: 1rem;
  border-radius: 1rem;
  transition: background-color 0.5s, border 0.5s, color 0.5s; }
  .shop_link .shop_image {
    display: block;
    content: "";
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    width: 11rem;
    height: 11rem;
    transition: width 0.5s, height 0.5s, margin 0.5s; }
  .shop_link:hover .shop_image {
    width: 14rem;
    height: 14rem;
    margin: -1.5rem; }
  .shop_link .shop_title {
    display: block;
    font-size: 2rem;
    font-weight: bold; }
  .shop_link .shop_price {
    display: block;
    font-size: 2rem; }

.buy_button {
  display: block;
  font-size: 3rem;
  margin: 1rem auto; }

.shop_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px; }

.shop_item {
  display: block;
  position: relative; }

.support_link {
  text-align: center; }

.coming_soon {
  font-style: italic; }

.shop_starter .shop_image {
  background-image: url("/images/product/product-starter.png"); }

.shop_random_one .shop_image {
  background-image: url("/images/product/product-random-one.png"); }

.shop_random_three .shop_image {
  background-image: url("/images/product/product-random-three.png"); }

.shop_choose_one .shop_image {
  background-image: url("/images/product/product-choose-one.png"); }

.shop_choose_two .shop_image {
  background-image: url("/images/product/product-choose-two.png"); }

.shop_choose_three .shop_image {
  background-image: url("/images/product/product-choose-three.png"); }

.shop_choose_five .shop_image {
  background-image: url("/images/product/product-choose-five.png"); }

.shop_sub_player .shop_image {
  background-image: url("/images/product/sub-player.png"); }

.shop_sub_player .shop_link:hover .shop_image {
  height: 13rem;
  width: 13rem;
  margin: -2rem -1rem -0rem; }

.shop_sub_organizer .shop_image {
  background-image: url("/images/product/sub-organizer.png");
  width: 19rem; }

.shop_sub_organizer .shop_link:hover .shop_image {
  width: 22rem;
  margin: -2.5rem -1.5rem -0.5rem; }

@media (min-width: 1041px) {
  .shop_list {
    flex-direction: row; }
  .shop_item {
    width: 48%; }
  .shop_starter {
    width: 100%; } }

@media (max-width: 1040px) {
  .shop_list {
    flex-direction: column; }
  .shop_item {
    width: 100%; } }

@media (max-width: 450px) {
  .shop_sub_organizer .shop_link {
    gap: 0; }
  .shop_sub_organizer .shop_image {
    background-image: url("/images/product/sub-organizer.png");
    width: 12rem; } }

@media (prefers-color-scheme: dark) {
  .shop_link {
    color: #A88EFF;
    background-image: linear-gradient(0deg, black 50%, rgba(0, 0, 0, 0.4) 100%); }
    .shop_link:hover {
      background-color: #65D3E4; }
  .coming_soon {
    color: #999999; } }

@media (prefers-color-scheme: light) {
  .shop_link {
    color: #501478;
    background-image: linear-gradient(0deg, white 50%, rgba(255, 255, 255, 0.4) 100%); }
    .shop_link:hover {
      background-color: #65D3E4; }
  .coming_soon {
    color: #666666; } }

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, font, 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, header, footer, nav, main, section {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  vertical-align: baseline;
  border: none; }

html {
  font-size: 10px;
  height: 100%; }

body {
  font-size: 1.6rem;
  font-family: finalsix, sans-serif;
  font-weight: 200;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  height: 100%; }

#root, .loaded {
  height: 100%; }

nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid;
  border-bottom: 1px solid;
  width: 100%; }
  nav a {
    padding: 1rem 0.8rem;
    text-decoration: none;
    font-weight: bold; }
    nav a:hover {
      text-decoration: underline; }

.main_nav,
.shop_nav {
  display: flex;
  align-items: center;
  justify-content: center; }

.shop_nav {
  border-top: 1px solid; }

button, a {
  cursor: pointer; }

.top, .loaded, .stable {
  width: 100%; }

.top {
  min-height: 100%;
  display: flex;
  flex-direction: column; }

.main_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%; }

.loading {
  display: block;
  font-family: wreath, serif;
  font-weight: 300;
  font-style: normal;
  font-size: 5rem;
  text-align: center;
  align-self: center;
  height: 90vh;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; }

.error, .offline, .unavailable {
  font-size: 1.6rem;
  font-family: finalsix, sans-serif;
  font-weight: 200;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; }
  .error h2, .offline h2, .unavailable h2 {
    font-size: 2.4rem;
    font-family: finalsix, sans-serif;
    font-weight: 200; }

.offline {
  height: 90vh; }

.unavailable {
  height: 65vh; }

.footer {
  margin-top: auto;
  padding: 2rem;
  text-align: center; }
  .footer:before {
    content: "";
    height: 2rem; }

.minimal_footer {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: -15rem;
  padding: 0;
  margin: 0;
  width: 19rem;
  transition: right 0.4s;
  z-index: 20; }
  .minimal_footer:before {
    content: "";
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-image: url("/images/ironohki-icon.png");
    background-size: contain;
    margin-right: 1rem; }
  .minimal_footer:hover {
    right: 0rem; }

h1 {
  font-family: finalsix, san-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2rem; }

h2, .subheader {
  font-family: finalsix, san-serif;
  font-size: 2.6rem;
  font-weight: 700;
  font-style: normal;
  margin: 0;
  padding: 0; }

.home_welcome h2, .intro_content h2 {
  font-family: wreath, serif;
  font-size: 4rem; }

h3, .section_head {
  border-top: 1px solid;
  margin-top: 3rem; }
  h3.no_line, .section_head.no_line {
    border-top: none; }

.lost {
  text-align: center;
  margin: 10rem 0; }

.stub {
  display: none; }

h2.fancy {
  font-family: wreath;
  font-size: 4rem; }

h3.fancy {
  font-family: wreath; }

.colored_parent:nth-child(5n+1) .colored_child, .colored:nth-child(5n+1), .green, .green:hover {
  border-color: #52CA76;
  color: #52CA76; }

.colored_parent:nth-child(5n+2) .colored_child, .colored:nth-child(5n+2), .cyan, .cyan:hover {
  border-color: #65D3E4;
  color: #65D3E4; }

.colored_parent:nth-child(5n+3) .colored_child, .colored:nth-child(5n+3), .blue, .blue:hover {
  border-color: #385CC4;
  color: #385CC4; }

.colored_parent:nth-child(5n+4) .colored_child, .colored:nth-child(5n+4), .violet, .violet:hover {
  border-color: #A88EFF;
  color: #A88EFF; }

.colored_parent:nth-child(5n+5) .colored_child, .colored:nth-child(5n+5), .pink, .pink:hover {
  border-color: #FD90FE;
  color: #FD90FE; }

.colored_parent:nth-child(5n+1) .contrast.colored_child, .contrast.colored:nth-child(5n+1), .contrast.green {
  border-color: #2B6A3D;
  color: #2B6A3D; }

.colored_parent:nth-child(5n+2) .contrast.colored_child, .contrast.colored:nth-child(5n+2), .contrast.cyan {
  border-color: #0a3232;
  color: #0a3232; }

.colored_parent:nth-child(5n+3) .contrast.colored_child, .contrast.colored:nth-child(5n+3), .contrast.blue {
  border-color: #17264F;
  color: #17264F; }

.colored_parent:nth-child(5n+4) .contrast.colored_child, .contrast.colored:nth-child(5n+4), .contrast.violet {
  border-color: #501478;
  color: #501478; }

.colored_parent:nth-child(5n+5) .contrast.colored_child, .contrast.colored:nth-child(5n+5), .contrast.pink {
  border-color: #832B85;
  color: #832B85; }

.colored_parent:nth-child(5n+1) .colored_child_bg, .colored_bg:nth-child(5n+1), .green_bg, .green_bg:hover {
  background-image: linear-gradient(180deg, rgba(82, 202, 118, 0) 50%, #52ca76 110%); }

.colored_parent:nth-child(5n+2) .colored_child_bg, .colored_bg:nth-child(5n+2), .cyan_bg, .cyan_bg:hover {
  background-image: linear-gradient(180deg, rgba(101, 211, 228, 0) 50%, #65d3e4 110%); }

.colored_parent:nth-child(5n+3) .colored_child_bg, .colored_bg:nth-child(5n+3), .blue_bg, .blue_bg:hover {
  background-image: linear-gradient(180deg, rgba(56, 92, 196, 0) 50%, #385cc4 110%); }

.colored_parent:nth-child(5n+4) .colored_child_bg, .colored_bg:nth-child(5n+4), .violet_bg, .violet_bg:hover {
  background-image: linear-gradient(180deg, rgba(168, 142, 255, 0) 50%, #a88eff 110%); }

.colored_parent:nth-child(5n+5) .colored_child_bg, .colored_bg:nth-child(5n+5), .pink_bg, .pink_bg:hover {
  background-image: linear-gradient(180deg, rgba(253, 144, 254, 0) 50%, #fd90fe 110%); }

.colored_parent:nth-child(5n+1) .colored_child_bg_solid, .colored_bg_solid:nth-child(5n+1), .green_bg_solid, .green_bg_solid:hover {
  background-color: #52ca76; }

.colored_parent:nth-child(5n+2) .colored_child_bg_solid, .colored_bg_solid:nth-child(5n+2), .cyan_bg_solid, .cyan_bg_solid:hover {
  background-color: #65d3e4; }

.colored_parent:nth-child(5n+3) .colored_child_bg_solid, .colored_bg_solid:nth-child(5n+3), .blue_bg_solid, .blue_bg_solid:hover {
  background-color: #385cc4; }

.colored_parent:nth-child(5n+4) .colored_child_bg_solid, .colored_bg_solid:nth-child(5n+4), .violet_bg_solid, .violet_bg_solid:hover {
  background-color: #a88eff; }

.colored_parent:nth-child(5n+5) .colored_child_bg_solid, .colored_bg_solid:nth-child(5n+5), .pink_bg_solid, .pink_bg_solid:hover {
  background-color: #fd90fe; }

.green svg {
  fill: #52CA76; }

.cyan svg {
  fill: #65D3E4; }

.blue svg {
  fill: #385CC4; }

.violet svg {
  fill: #A88EFF; }

.pink svg {
  fill: #FD90FE; }

a.green_bg, a.cyan_bg, a.blue_bg, a.violet_bg, a.pink_bg, .colored_parent a.colored_child_bg, a.colored_bg, a.blank {
  background-repeat: no-repeat;
  background-position: 0 2rem; }
  a.green_bg:hover, a.green_bg:focus, a.cyan_bg:hover, a.cyan_bg:focus, a.blue_bg:hover, a.blue_bg:focus, a.violet_bg:hover, a.violet_bg:focus, a.pink_bg:hover, a.pink_bg:focus, .colored_parent a.colored_child_bg:hover, .colored_parent a.colored_child_bg:focus, a.colored_bg:hover, a.colored_bg:focus, a.blank:hover, a.blank:focus {
    background-position: 0; }

.button, .button_click, .green, .cyan, .blue, .violet, .pink, .blank {
  transition: color 0.5s, background-color 0.5s, border-color 0.5s, background-position 0.5s; }
  .button:active, .button_click:active, .green:active, .cyan:active, .blue:active, .violet:active, .pink:active, .blank:active {
    animation: button_click 0.3s 1 ease-in-out forwards; }

.button {
  background-image: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 100%);
  color: #501478;
  background-color: #A88EFF;
  border-color: #501478; }
  .button.colored:nth-child(5n+1), .button.green {
    color: #2B6A3D;
    border-color: #2B6A3D;
    background-color: #52CA76; }
  .button.colored:nth-child(5n+2), .button.cyan {
    color: #0a3232;
    border-color: #0a3232;
    background-color: #65D3E4; }
  .button.colored:nth-child(5n+3), .button.blue {
    color: #17264F;
    border-color: #17264F;
    background-color: #385CC4; }
  .button.colored:nth-child(5n+4), .button.violet {
    color: #501478;
    border-color: #501478;
    background-color: #A88EFF; }
  .button.colored:nth-child(5n+5), .button.pink {
    color: #832B85;
    border-color: #832B85;
    background-color: #FD90FE; }
  .button:hover {
    color: #0a3232;
    background-color: #65D3E4;
    border-color: #0a3232; }
    .button:hover.colored:nth-child(5n+1), .button:hover.green {
      color: #17264F;
      border-color: #17264F;
      background-color: #385CC4; }
    .button:hover.colored:nth-child(5n+2), .button:hover.cyan {
      color: #832B85;
      border-color: #832B85;
      background-color: #FD90FE; }
    .button:hover.colored:nth-child(5n+3), .button:hover.blue {
      color: #2B6A3D;
      border-color: #2B6A3D;
      background-color: #52CA76; }
    .button:hover.colored:nth-child(5n+4), .button:hover.violet {
      color: #0a3232;
      border-color: #0a3232;
      background-color: #65D3E4; }
    .button:hover.colored:nth-child(5n+5), .button:hover.pink {
      color: #501478;
      border-color: #501478;
      background-color: #A88EFF; }

@keyframes button_click {
  0% {
    transform: scale(1); }
  45% {
    transform: scale(0.95); }
  90% {
    transform: scale(1.02); }
  100% {
    transform: scale(1); } }

@media (prefers-color-scheme: dark) {
  body {
    background-color: #222222;
    background-image: url("/images/background/texture-bg-dark.jpg");
    color: #eeeeee; }
  a {
    color: #b478dc;
    transition: color 0.5s; }
    a:hover {
      color: #78dcdc; }
  .footer a,
  .minimal_footer a {
    text-shadow: 2px 2px 2px #000000; }
  nav {
    border-color: #eeeeee;
    background-color: rgba(0, 0, 0, 0.5); }
  .blank, .blank:hover {
    border-color: #FFFFFF;
    color: #FFFFFF; }
  a.blank, a.blank:hover {
    background-color: #000000;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, white 110%); } }

@media (prefers-color-scheme: light) {
  body {
    background-color: #eeeeee;
    background-image: url("/images/background/texture-bg-light.jpg");
    color: #111111; }
  a {
    color: #b478dc;
    transition: color 0.5s; }
    a:hover {
      color: #329696; }
  .footer a,
  .minimal_footer a {
    color: #000000; }
  nav {
    border-color: #111111;
    background-color: rgba(255, 255, 255, 0.6); }
  .colored:nth-child(5n+5), .blank, .blank:hover {
    border-color: #000000;
    color: #000000; }
  a.blank, a.blank:hover {
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 110%); }
  .colored:nth-child(5n+1), .green, .green:hover {
    border-color: #309C50;
    color: #309C50; }
  .colored:nth-child(5n+2), .cyan, .cyan:hover {
    border-color: #1E9AAD;
    color: #1E9AAD; }
  .colored:nth-child(5n+3), .blue, .blue:hover {
    border-color: #385CC4;
    color: #385CC4; }
  .colored:nth-child(5n+4), .violet, .violet:hover {
    border-color: #751DAF;
    color: #751DAF; }
  .colored:nth-child(5n+5), .pink, .pink:hover {
    border-color: #C702CA;
    color: #C702CA; } }

.welcome_outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; }

.welcome_inner {
  display: block;
  padding: 2vw 5vw;
  border-bottom: 1px solid;
  border-right: 1px solid; }

.welcome_coffee {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1rem;
  overflow: hidden;
  border-bottom: 3px solid;
  height: 74px;
  padding: 20px 0; }
  .welcome_coffee.chosen {
    animation: close_coffee_opinions 1.5s ease-out forwards; }
  .welcome_coffee svg {
    display: none; }

.welcome_subhead {
  text-align: center;
  margin: 0 0 1rem;
  border: none; }

.welcome_button,
.welcome_about {
  overflow: hidden;
  text-align: center;
  margin: 1rem;
  animation: open_coffee_progress 1.5s ease-in forwards; }

.welcome_event {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; }
  .welcome_event input {
    padding-left: 1rem; }
  .welcome_event .button {
    width: auto; }
  .welcome_event:before {
    content: "";
    display: static;
    width: 8rem;
    height: 8rem;
    background-image: url("/images/vector/matchword-off.svg");
    background-size: contain; }
  .welcome_event.text_entered:before {
    background-image: url("/images/vector/matchword-on.svg"); }

.welcome_continue {
  position: fixed;
  z-index: 20;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #000000;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.8); }
  .welcome_continue .button {
    width: auto; }

@keyframes close_coffee_opinions {
  50% {
    border-bottom: 3px solid;
    height: 74px;
    padding: 20px 0; }
  100% {
    border-bottom: 0px solid;
    height: 0px;
    padding: 0px; } }

@keyframes open_coffee_progress {
  0% {
    max-height: 0px;
    margin: 0; }
  40% {
    max-height: 0px;
    margin: 0; }
  100% {
    max-height: 150px;
    margin: 1rem; } }

@media (min-width: 768px) {
  .welcome_inner {
    width: 50vw;
    max-width: 600px; }
  .welcome_event {
    flex-direction: row;
    gap: 2rem; }
    .welcome_event .welcome_event_input {
      max-width: 30rem; }
    .welcome_event:before {
      margin-right: -3.5rem;
      position: relative; } }

@media (max-width: 767px) {
  .welcome_inner {
    padding: 5vw;
    margin: 0 5vw; }
  .welcome_event {
    margin: 2rem 2rem 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem; }
    .welcome_event:before {
      position: absolute;
      top: -2rem;
      left: -0.5rem; }
    .welcome_event .button {
      width: 100%; }
    .welcome_event .input {
      margin-left: 6rem;
      width: auto; } }

@media (prefers-color-scheme: dark) {
  .welcome_inner {
    background: #000000;
    border-color: #cccccc; }
  .welcome_coffee {
    border-color: #cccccc; } }

@media (prefers-color-scheme: light) {
  .welcome_inner {
    background: #FFFFFF;
    border-color: #333333; }
  .welcome_coffee {
    border-color: #333333; } }