@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
.accent_text, .hero_section__subtitle_accent, .hero_section__title_accent {
  color: #dc2626;
}

html {
  width: 100%;
  height: 100%;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #0a0a0a;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
body h1 {
  margin: 0;
}

.container {
  overflow-x: clip;
}

.header {
  color: #ff1744;
  border-bottom: #dc143c 2px solid;
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(10, 10, 10, 0.5019607843);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  height: 60px;
}
@media screen and (min-width: 768px) {
  .header {
    height: 70px;
  }
}
.header .header_container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.header .game_title {
  color: #dc2626;
  font-size: 1.125rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.header .game_title__small {
  font-size: 0.75rem;
  letter-spacing: normal;
  display: block;
}
@media screen and (min-width: 768px) {
  .header .game_title__small {
    display: inline;
  }
}
.header .mobile_menu_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: transparent;
  border: none;
  color: #ff1744;
  cursor: pointer;
  padding: 0.5rem;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
@media screen and (min-width: 768px) {
  .header .mobile_menu_button {
    display: none;
  }
}
.header .mobile_menu_button:hover {
  color: #ef4444;
}
.header .mobile_menu_button svg {
  width: 1.5rem;
  height: 1.5rem;
}
.header .mobile_menu_button .menu_line {
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform-origin: center;
          transform-origin: center;
  transform-box: fill-box;
}
.header .mobile_menu_button.is_open .menu_line__top {
  -webkit-transform: translateY(6px) rotate(45deg);
          transform: translateY(6px) rotate(45deg);
}
.header .mobile_menu_button.is_open .menu_line__middle {
  opacity: 0;
}
.header .mobile_menu_button.is_open .menu_line__bottom {
  -webkit-transform: translateY(-6px) rotate(-45deg);
          transform: translateY(-6px) rotate(-45deg);
}
.header .nav_desktop {
  display: none;
}
@media screen and (min-width: 768px) {
  .header .nav_desktop {
    display: block;
  }
}
.header .nav_desktop ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header .nav_desktop ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.header .nav_desktop ul li a:hover {
  color: #ef4444;
}
.header .nav_desktop ul li.nav_button a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  background-color: #dc2626;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: bold;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.header .nav_desktop ul li.nav_button a:hover {
  background-color: #b91c1c;
}
.header .nav_desktop ul li.nav_button a svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.header .nav_mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #0a0a0a;
  border-bottom: #dc143c 2px solid;
  padding: 1rem;
  z-index: 49;
}
@media screen and (min-width: 768px) {
  .header .nav_mobile {
    display: none !important;
  }
}
.header .nav_mobile.is_open {
  display: block;
}
.header .nav_mobile ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem;
}
.header .nav_mobile ul li a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
  display: block;
  padding: 0.5rem 0;
}
.header .nav_mobile ul li a:hover {
  color: #ef4444;
}
.header .nav_mobile ul li.nav_button {
  margin-top: 0.5rem;
}
.header .nav_mobile ul li.nav_button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  background-color: #dc2626;
  color: #ffffff;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  font-weight: bold;
  text-align: center;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.header .nav_mobile ul li.nav_button a:hover {
  background-color: #b91c1c;
}
.header .nav_mobile ul li.nav_button a svg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.hero_section__subtitle, .hero_section__title {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: #ffffff;
  line-height: 1.25;
}

.hero_section {
  position: relative;
  padding: 5rem 0;
  background-image: url("/static/images/hero-background.webp");
  background-size: cover;
  background-position: center;
}
.hero_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(10, 10, 10, 0.92)), color-stop(70%, rgba(10, 10, 10, 0.5)), to(rgba(10, 10, 10, 0.2)));
  background: linear-gradient(to right, rgba(10, 10, 10, 0.92) 35%, rgba(10, 10, 10, 0.5) 70%, rgba(10, 10, 10, 0.2) 100%);
  pointer-events: none;
}
.hero_section__content {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.hero_section__accent_bar {
  margin-bottom: 2rem;
  height: 0.125rem;
  width: 4rem;
  background: -webkit-gradient(linear, left top, right top, from(#dc2626), to(#ff1744));
  background: linear-gradient(to right, #dc2626, #ff1744);
}
.hero_section__title {
  max-width: 42rem;
  font-size: 3rem;
  text-transform: uppercase;
  font-family: "Bebas Neue", sans-serif;
}
@media screen and (min-width: 768px) {
  .hero_section__title {
    font-size: 3.125rem;
  }
}
.hero_section__subtitle {
  max-width: 42rem;
  font-size: 1.5rem;
}
@media screen and (min-width: 768px) {
  .hero_section__subtitle {
    font-size: 1.875rem;
  }
}
.hero_section__description {
  font-size: 1.125rem;
  color: #9ca3af;
  margin-bottom: 2rem;
  max-width: 36rem;
}
.hero_section__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 640px) {
  .hero_section__actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.hero_section__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
  font-weight: bold;
  padding: 0.75rem 2rem;
  border-radius: 0.25rem;
  font-size: 1.125rem;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.hero_section__button_icon {
  width: 1.25rem;
  height: 1.25rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: -webkit-filter 0.2s ease;
  transition: -webkit-filter 0.2s ease;
  transition: filter 0.2s ease;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
}
.hero_section__button_primary {
  background-color: #dc2626;
  color: #ffffff;
  border: none;
}
.hero_section__button_primary:hover {
  background-color: #b91c1c;
}
.hero_section__button_primary .hero_section__button_icon {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
.hero_section__button_secondary {
  background-color: transparent;
  color: #dc2626;
  border: 2px solid #dc2626;
}
.hero_section__button_secondary .hero_section__button_icon {
  -webkit-filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
          filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
}
.hero_section__button_secondary:hover {
  background-color: #dc2626;
  color: #ffffff;
}
.hero_section__button_secondary:hover .hero_section__button_icon {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}

.section_title_wrapper {
  margin-bottom: 3rem;
}
.section_title_wrapper h2 {
  margin-bottom: 0.5rem;
}
.section_title_wrapper p {
  margin-top: 0;
  margin-bottom: 0;
  color: #a1a1aa;
}
.section_title_wrapper .accent {
  color: #dc2626;
}

.official_games_section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1rem;
  border-bottom: 2px solid #ff1744;
}

.new_games_section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1rem;
  border-bottom: 2px solid #ff1744;
}
.new_games_section__title {
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}
.new_games_section__title::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 4rem;
  background-color: #dc2626;
  margin-bottom: 1rem;
}
.new_games_section__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .new_games_section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.popular_games_section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1rem;
}
.popular_games_section__title {
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}
.popular_games_section__title::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 4rem;
  background-color: #dc2626;
  margin-bottom: 1rem;
}
.popular_games_section__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .popular_games_section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.index_h2 {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.index_h2::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 4rem;
  background-color: #dc2626;
  margin-bottom: 1rem;
}

.game_cards_container {
  max-width: 1280px;
  margin: 0 auto 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media screen and (min-width: 768px) {
  .game_cards_container {
    grid-template-columns: repeat(3, 1fr);
  }
}

.game_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding: 1rem;
  margin: 0;
  background-color: #101828;
  border: 2px solid #dc2626;
  border-radius: 0.75rem;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.game_card:hover {
  border-color: #ef4444;
  -webkit-box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.5);
          box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.5);
}
.game_card dd {
  margin-left: 0;
}
.game_card__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.game_card__thumbnail_wrapper {
  position: relative;
  width: 6rem;
  height: 9rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 1rem;
  background-color: #2a2a2a;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .game_card__thumbnail_wrapper {
    width: 8rem;
    height: 12rem;
  }
}
.game_card__thumbnail_wrapper .game_thumbnail {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.game_card__thumbnail_wrapper .game_card__official_badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 66.6666666667%;
}
.game_card:hover .game_thumbnail {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.game_card__info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-width: 0;
}
.game_card__info_top {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 0;
}
.game_card .play_link_wrapper {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
}
.game_card__title {
  margin: 0 0 0.75rem 0;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  word-break: break-all;
}
.game_card__date {
  display: none;
}
.game_card__play_count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0 0 0.75rem 0;
}
.game_card__fire_icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.25rem;
  -webkit-filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
          filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
}
.game_card__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.5rem 1rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.game_card__button:hover {
  background-color: #b91c1c;
}

.games_list_section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.games_list_section__header {
  padding: 3rem 0;
  border-bottom: 2px solid #dc2626;
}
.games_list_section__title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.games_list_section__title::before {
  content: "";
  display: block;
  height: 0.25rem;
  width: 4rem;
  background-color: #dc2626;
  margin-bottom: 1rem;
}
.games_list_section__subtitle {
  color: #dc2626;
  margin: 0 0 2rem 0;
}
.games_list_section__search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
}
.games_list_section__search_form {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  margin: 0;
}
.games_list_section__search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.games_list_section__search_input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 2.25rem;
  padding: 0.25rem 0.75rem 0.25rem 2.5rem;
  background-color: #2a2a2a;
  border: 2px solid #dc2626;
  border-radius: 0.375rem;
  color: #ffffff;
  font-size: 0.875rem;
  outline: none;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
.games_list_section__search_input::-webkit-input-placeholder {
  color: #9ca3af;
}
.games_list_section__search_input::-moz-placeholder {
  color: #9ca3af;
}
.games_list_section__search_input:-ms-input-placeholder {
  color: #9ca3af;
}
.games_list_section__search_input::-ms-input-placeholder {
  color: #9ca3af;
}
.games_list_section__search_input::placeholder {
  color: #9ca3af;
}
.games_list_section__search_input:focus {
  border-color: #ff1744;
}
.games_list_section__search_button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 2.25rem;
  padding: 0 1.5rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.games_list_section__search_button:hover {
  background-color: #b91c1c;
}
.games_list_section__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
}
@media screen and (min-width: 768px) {
  .games_list_section__cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pager {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  padding: 2rem 0;
}
.pager__nav {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: bold;
  font-size: 0.875rem;
  text-transform: uppercase;
  border: 2px solid #dc2626;
  color: #dc2626;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.pager__nav:hover {
  background-color: rgba(220, 38, 38, 0.1);
}
.pager__nav--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pager__nav svg {
  width: 1.25rem;
  height: 1.25rem;
}
.pager__page {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 2.25rem;
  padding: 0.5rem 0.75rem;
  font-weight: bold;
  font-size: 0.875rem;
  text-transform: uppercase;
  border: 2px solid #dc2626;
  color: #dc2626;
  text-decoration: none;
  line-height: 1;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.pager__page:hover {
  background-color: rgba(220, 38, 38, 0.1);
}
.pager__page--active {
  background-color: #dc2626;
  color: #ffffff;
}

.ranking_section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.ranking_section__header {
  padding: 3rem 0;
  position: relative;
}
.ranking_section__header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background-color: #dc2626;
}
.ranking_section__title_wrapper {
  margin-bottom: 2rem;
}
.ranking_section__title {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}
.ranking_section__subtitle {
  color: #dc2626;
  margin: 0;
}
.ranking_section__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.ranking_section__tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.875rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #9ca3af;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.ranking_section__tab.is_active {
  border-bottom-color: #dc2626;
  color: #dc2626;
}
.ranking_section__tab:hover {
  color: #ef4444;
}
.ranking_section__tab_icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  -webkit-filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
          filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
}
.ranking_section__cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 0;
}

.game_ranking_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #111827;
  border: 2px solid #dc2626;
  border-radius: 0.75rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
  .game_ranking_card {
    gap: 1rem;
  }
}
.game_ranking_card:hover {
  border-color: #ef4444;
  -webkit-box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.5);
          box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.5);
}
.game_ranking_card__rank {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: #dc2626;
  border-radius: 0.125rem;
  font-weight: 900;
  font-size: 1.25rem;
  color: #ffffff;
}
.game_ranking_card__rank_icon {
  width: 1.5rem;
  height: 1.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.game_ranking_card__info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.game_ranking_card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.game_ranking_card__play_count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.25rem;
  color: #dc2626;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.game_ranking_card__fire_icon {
  width: 1rem;
  height: 1rem;
  -webkit-filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
          filter: brightness(0) saturate(100%) invert(18%) sepia(89%) saturate(2814%) hue-rotate(352deg) brightness(91%) contrast(97%);
}
.game_ranking_card__play_label {
  font-size: 0.75rem;
  color: #9ca3af;
}
.game_ranking_card__button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 2.25rem;
  padding: 0.5rem 1.5rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.game_ranking_card__button:hover {
  background-color: #b91c1c;
}

.game_creation_page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.game_creation_page__header {
  margin-bottom: 3rem;
}
.game_creation_page__title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0 0 1rem 0;
}
@media screen and (min-width: 768px) {
  .game_creation_page__title {
    font-size: 3.75rem;
  }
}
.game_creation_page__subtitle {
  font-size: 1.125rem;
  color: #9ca3af;
  margin: 0;
}
.game_creation_page__banner {
  margin-bottom: 3rem;
  border-radius: 0.75rem;
  overflow: hidden;
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 100%;
}
@media screen and (min-width: 768px) {
  .game_creation_page__banner {
    width: 50%;
  }
}
.game_creation_page__banner a {
  display: block;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.game_creation_page__banner a:hover {
  opacity: 0.9;
}
.game_creation_page__banner img {
  width: 100%;
  height: auto;
  display: block;
}

.game_creation__section {
  margin-bottom: 3rem;
}
.game_creation__section_header {
  margin-bottom: 1.5rem;
}
.game_creation__section_label {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.game_creation__section_title {
  font-size: 1.875rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .game_creation__section_title {
    font-size: 2.25rem;
  }
}
.game_creation__section_body {
  background: -webkit-gradient(linear, left top, right bottom, from(rgba(236, 72, 153, 0.05)), to(transparent));
  background: linear-gradient(to bottom right, rgba(236, 72, 153, 0.05), transparent);
  border-radius: 0.75rem;
  backdrop-filter: blur(4px);
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 0.5rem;
}
.game_creation__section_body dl {
  margin: 0;
  padding: 0;
}
.game_creation__section_body dd {
  margin-left: 0;
  margin-bottom: 2rem;
}
.game_creation__section_body dd:last-child {
  margin-bottom: 0;
}
.game_creation__element_label {
  color: #f472b6;
  font-size: 1.125rem;
  margin-bottom: 1rem;
  display: block;
}
.game_creation__section_body dl dt:has(label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.game_creation__title_input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #ffffff;
  font-size: 1rem;
  outline: none;
  -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.game_creation__title_input::-webkit-input-placeholder {
  color: #6b7280;
}
.game_creation__title_input::-moz-placeholder {
  color: #6b7280;
}
.game_creation__title_input:-ms-input-placeholder {
  color: #6b7280;
}
.game_creation__title_input::-ms-input-placeholder {
  color: #6b7280;
}
.game_creation__title_input::placeholder {
  color: #6b7280;
}
.game_creation__title_input:focus {
  border-color: #f472b6;
  background-color: rgba(236, 72, 153, 0.2);
}
.game_creation .selected_image {
  display: none;
  width: 7.5rem;
  height: 7.5rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  border: 2px solid rgba(236, 72, 153, 0.3);
}
.game_creation .selected_image.is_selected {
  display: block;
}
.game_creation__display_label {
  display: block;
  color: #9ca3af;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.game_creation__display_input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: rgba(236, 72, 153, 0.1);
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  outline: none;
  margin-bottom: 1rem;
}
.game_creation .image_picker_button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.75rem;
  background: -webkit-gradient(linear, left top, right top, from(rgba(236, 72, 153, 0.1)), to(rgba(168, 85, 247, 0.1)));
  background: linear-gradient(to right, rgba(236, 72, 153, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.5rem;
  padding: 3rem 0;
  color: #f472b6;
  font-size: 1.125rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.game_creation .image_picker_button:hover {
  background: -webkit-gradient(linear, left top, right top, from(rgba(236, 72, 153, 0.2)), to(rgba(168, 85, 247, 0.2)));
  background: linear-gradient(to right, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.2));
  border-color: rgba(236, 72, 153, 0.5);
}
.game_creation .image_picker_button img {
  width: 2rem;
  height: 2rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-filter: brightness(0) saturate(100%) invert(62%) sepia(60%) saturate(1037%) hue-rotate(295deg) brightness(99%) contrast(93%);
          filter: brightness(0) saturate(100%) invert(62%) sepia(60%) saturate(1037%) hue-rotate(295deg) brightness(99%) contrast(93%);
}
.game_creation__actions {
  margin-top: 2rem;
}
.game_creation__preview_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.game_creation__preview_button:hover {
  background-color: #b91c1c;
}

#game_preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  overflow-y: auto;
}
#game_preview .game_preview__centering_layer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#game_preview #game-preview-contents {
  background-color: #0a0a0a;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 0.75rem;
  width: 100%;
  max-width: 42rem;
  max-height: 90vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
  overflow-y: auto;
}
#game_preview .game_preview__header {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(220, 38, 38, 0.3);
  background: -webkit-gradient(linear, left top, right top, from(rgba(220, 38, 38, 0.05)), to(transparent));
  background: linear-gradient(to right, rgba(220, 38, 38, 0.05), transparent);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  #game_preview .game_preview__header {
    padding: 1.5rem;
  }
}
#game_preview .game_preview__header_title {
  font-size: 2.25rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}
#game_preview .game_preview__header_subtitle {
  color: #9ca3af;
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
}
#game_preview .game_preview__body {
  padding: 1rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  #game_preview .game_preview__body {
    padding: 2rem;
    gap: 2rem;
  }
}
#game_preview .game_preview__game_title_wrapper {
  text-align: center;
}
#game_preview .game_preview__game_title {
  font-size: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}
@media screen and (min-width: 768px) {
  #game_preview .game_preview__game_title {
    font-size: 2.5rem;
  }
}
#game_preview .game_preview__battle_area {
  border: 2px solid #dc2626;
  border-radius: 0.5rem;
  padding: 2rem;
}
#game_preview .game_preview__fighters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
#game_preview .game_preview__fighter {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(50% - 2.5rem);
  aspect-ratio: 1;
  background-color: #2a2a2a;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #dc2626;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#game_preview .game_preview__fighter:nth-child(3) {
  display: none;
}
#game_preview .game_preview__vs {
  display: none;
}
#game_preview .game_preview__others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
#game_preview .game_preview__other {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
#game_preview .game_preview__other_label {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}
#game_preview .preview_image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#game_preview .game_preview__other_image_wrapper {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  border: 1px solid #dc2626;
  background-color: #2a2a2a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
#game_preview .game_preview__placeholder_text {
  color: #9ca3af;
  font-size: 0.875rem;
  text-align: center;
}
#game_preview .game_preview__footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(220, 38, 38, 0.3);
  background: -webkit-gradient(linear, left top, right top, from(rgba(220, 38, 38, 0.05)), to(transparent));
  background: linear-gradient(to right, rgba(220, 38, 38, 0.05), transparent);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
#game_preview .game_preview__footer button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: bold;
  border-radius: 0.375rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#game_preview #game_preview_back {
  background: transparent;
  color: #dc2626;
  border: 1px solid #dc2626;
}
#game_preview #game_preview_back:hover {
  background-color: rgba(220, 38, 38, 0.1);
}
#game_preview button[type=submit] {
  background-color: #dc2626;
  color: #ffffff;
  border: none;
}
#game_preview button[type=submit]:hover {
  background-color: #b91c1c;
}

#image_picker_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 200;
}
#image_picker_modal #image-picker-contents {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 800px;
  width: calc(100% - 2rem);
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #1a1a1a;
  border: 2px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.75rem;
}
@media screen and (min-width: 768px) {
  #image_picker_modal #image-picker-contents {
    height: calc(100vh - 1rem);
    max-height: none;
  }
}
#image_picker_modal .image_picker__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(236, 72, 153, 0.2);
}
#image_picker_modal .image_picker__header h2 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
}
#image_picker_modal .image_picker__header #image_picker_close_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: transparent;
  border: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.25rem;
  color: #9ca3af;
  padding: 0.5rem;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#image_picker_modal .image_picker__header #image_picker_close_button img {
  -webkit-filter: brightness(0) saturate(100%) invert(72%) sepia(6%) saturate(611%) hue-rotate(182deg) brightness(90%) contrast(87%);
          filter: brightness(0) saturate(100%) invert(72%) sepia(6%) saturate(611%) hue-rotate(182deg) brightness(90%) contrast(87%);
  -webkit-transition: -webkit-filter 0.2s ease;
  transition: -webkit-filter 0.2s ease;
  transition: filter 0.2s ease;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
}
#image_picker_modal .image_picker__header #image_picker_close_button:hover {
  color: #ffffff;
  border-color: #f472b6;
}
#image_picker_modal .image_picker__header #image_picker_close_button:hover img {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1);
}
#image_picker_modal .image_picker__search {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 1.5rem 1.5rem 0;
  margin-bottom: 1rem;
}
#image_picker_modal .image_picker__search label {
  display: block;
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}
#image_picker_modal .image_picker__search input {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #2a2a2a;
  border: 2px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  outline: none;
}
#image_picker_modal .image_picker__search input::-webkit-input-placeholder {
  color: #9ca3af;
}
#image_picker_modal .image_picker__search input::-moz-placeholder {
  color: #9ca3af;
}
#image_picker_modal .image_picker__search input:-ms-input-placeholder {
  color: #9ca3af;
}
#image_picker_modal .image_picker__search input::-ms-input-placeholder {
  color: #9ca3af;
}
#image_picker_modal .image_picker__search input::placeholder {
  color: #9ca3af;
}
#image_picker_modal .image_picker__search input:focus {
  border-color: #f472b6;
}
#image_picker_modal .image_picker__sort {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding: 0 1.5rem;
  margin-bottom: 1.5rem;
}
#image_picker_modal .image_picker__sort label {
  display: block;
  font-size: 0.875rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}
#image_picker_modal .image_picker__sort select {
  background-color: #2a2a2a;
  border: 2px solid rgba(236, 72, 153, 0.3);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  font-size: 0.875rem;
  outline: none;
}
#image_picker_modal .image_picker__sort select:focus {
  border-color: #f472b6;
}
#image_picker_modal .image_picker__grid {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 1.5rem 1.5rem;
}
#image_picker_modal .image_picker__grid ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  #image_picker_modal .image_picker__grid ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
#image_picker_modal .image_picker__grid ul li {
  border-radius: 0.375rem;
  overflow: hidden;
  border: 2px solid transparent;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#image_picker_modal .image_picker__grid ul li:hover {
  border-color: #f472b6;
}
#image_picker_modal .image_picker__grid ul .image_picker_image {
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#image_picker_modal .image_picker__grid ul .image_picker_image .pick_image {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  background: transparent;
  border: 2px solid rgba(236, 72, 153, 0.4);
  border-radius: 0.25rem;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  margin-bottom: 0.75rem;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
#image_picker_modal .image_picker__grid ul .image_picker_image .pick_image:hover {
  border-color: #f472b6;
  -webkit-box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.1);
          box-shadow: 0 10px 15px -3px rgba(236, 72, 153, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.1);
}
#image_picker_modal .image_picker__grid ul .image_picker_image .pick_image img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#image_picker_modal .image_picker__grid ul .image_picker_image .image_picker_item__title {
  font-size: 0.75rem;
  color: #9ca3af;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 0.5rem;
}
#image_picker_modal #image_picker_pager {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(236, 72, 153, 0.3);
}
#image_picker_modal #image_picker_pager .page_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #f472b6;
  border-radius: 0.25rem;
  padding: 0.5rem;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
#image_picker_modal #image_picker_pager .page_link:hover {
  background-color: rgba(236, 72, 153, 0.2);
}
#image_picker_modal #image_picker_pager .page_link:active {
  background-color: rgba(236, 72, 153, 0.3);
}
#image_picker_modal #image_picker_pager .page_link.current_page {
  font-size: 0.8125rem;
  color: #9ca3af;
  cursor: default;
  padding: 0 0.75rem;
}
#image_picker_modal #image_picker_pager .page_link.current_page:hover {
  background: transparent;
}

.completed_page {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 1rem;
  text-align: center;
}
.completed_page__header {
  margin-bottom: 3rem;
}
.completed_page__trophy {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem auto;
  color: #9ca3af;
}
.completed_page__trophy svg {
  width: 100%;
  height: 100%;
}
.completed_page__title {
  font-size: clamp(1.5rem, 7vw, 4.5rem);
  font-weight: 900;
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1rem 0;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .completed_page__title {
    font-size: 6rem;
  }
}
.completed_page__subtitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
}
.completed_page__description {
  font-size: 1rem;
  color: #9ca3af;
  margin: 0;
}
.completed_page__card {
  border: 1px solid #374151;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.completed_page__vs_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.completed_page__vs_section .created-game-image.big {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(50% - 2rem);
  min-width: 0;
  max-width: none;
  max-height: none;
  height: 25rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid #374151;
  display: block;
}
@media screen and (min-width: 768px) {
  .completed_page__vs_section .created-game-image.big {
    height: 35rem;
  }
}
.completed_page__vs_section .created-game-image.small {
  display: none;
}
.completed_page__vs_section .game_card__thumbnail_wrapper {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 80%;
  height: auto;
  aspect-ratio: 2/3;
  margin: 0;
  border-radius: 0.375rem;
  border: 1px solid #374151;
}
@media screen and (min-width: 768px) {
  .completed_page__vs_section .game_card__thumbnail_wrapper {
    width: 45rem;
  }
}
.completed_page__vs_label {
  display: none;
}
.completed_page__vs_image {
  display: none;
}
.completed_page__game_title_box {
  border: 1px solid #374151;
  border-radius: 0.375rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.completed_page__game_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.completed_page__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
.completed_page__play_button, .completed_page__share_button {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid #374151;
  border-radius: 0.375rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.completed_page__play_button:hover, .completed_page__share_button:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.completed_page__next_steps_card {
  border: 1px solid #374151;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}
.completed_page__next_steps_title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
}
.completed_page__next_steps_list {
  color: #9ca3af;
  margin: 0;
  padding-left: 2rem;
}
.completed_page__next_steps_list li {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}
.completed_page__next_steps_list li:last-child {
  margin-bottom: 0;
}
.completed_page__home_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.completed_page__home_button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.75rem 2rem;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.completed_page__home_button:hover {
  background-color: #b91c1c;
}

footer {
  text-align: center;
  background-color: #030712;
  padding: 1.5rem 1rem;
  border-top: #dc143c 2px solid;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 2rem 1rem;
  }
}
footer .annotations {
  max-width: 1280px;
  margin: 0 auto 1.5rem auto;
  text-align: left;
}
footer .annotations .annotations_title {
  color: #9ca3af;
  margin: 0 0 0.5rem 0;
}
footer .annotations .annotations_contents {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}
@media screen and (min-width: 768px) {
  footer .annotations .annotations_contents {
    font-size: 0.875rem;
  }
}
footer .annotations .annotations_contents a {
  color: #9ca3af;
  text-underline-offset: 2px;
}
footer .annotations .annotations_contents a:hover {
  color: #ffffff;
}
footer .game_title {
  color: #dc2626;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}
@media screen and (min-width: 768px) {
  footer .game_title {
    font-size: 1rem;
  }
}
footer .copyright {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0 0 0.5rem 0;
}
@media screen and (min-width: 768px) {
  footer .copyright {
    font-size: 0.875rem;
  }
}/*# sourceMappingURL=design.css.map */