/*----------------------------------------------------------------------
  YYPoker — style.css (mobile hero typography cleanup)
  - Remove legacy 80% !important single-line overrides for h1 on mobile
  - Delegate sizes to resouces/custom.css via CSS variables
  - No visual change on desktop; mobile uses variables
----------------------------------------------------------------------*/
/*--------------------------------------------------------*/
/*  Author: Travolgi                                      */
/*  Theme: Astro html Template                            */
/*  Version: 1.0.2                                        */
/*  Created: 01/12/2022                                   */
/*  Last update: 17/01/2024                               */
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
/*                                                        */
/*    CONTENT:                                            */
/*                                                        */
/*       1.  CSS RESET                                    */
/*       2.  UTILITIES                                    */
/*       3.  FONTS                                        */
/*       4.  BUTTONS                                      */
/*       5.  HEADER AND NAVIVATION                        */
/*       6.  SECTIONS                                     */
/*       7.  CARDS                                        */
/*       8.  TIMELINE                                     */
/*       9.  CAROUSELS                                    */
/*       10. BLOG                                         */
/*       11. FOOTER                                       */
/*       12. MODALS                                       */
/*       13. ANIMATIONS                                   */
/*                                                        */
/*--------------------------------------------------------*/
/*--------------------------------------------------------*/
/*	1. CSS RESET */
/*--------------------------------------------------------*/
* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  list-style: none;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0.7rem;
}

::-webkit-scrollbar-track {
  background: #130228;
}

::-webkit-scrollbar-thumb {
  background: #d6188a;
  border-radius: 1rem;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #d6188a #130228;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: #091e31;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

img {
  width: 100%;
  border-radius: 1.5rem;
}

ul.inline-list li {
  display: inline-block;
  padding-right: 0.5rem;
}

aside {
  padding-inline: 1.2rem;
}

iframe {
  width: 100%;
  min-height: 18rem;
  border-radius: 1.5rem;
}

hr {
  width: 100%;
  margin-block: 2rem;
  border-top: 0.12rem solid rgba(255, 255, 255, 0.6);
}

input,
textarea,
select {
  width: 100%;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1.8rem;
  margin-bottom: 0.6rem;
}
input.underline,
textarea.underline,
select.underline {
  padding: 0.6rem;
  padding-right: 3rem;
  border-radius: 0;
  border-bottom: 0.2rem solid #d6188a;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
}

#preload {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-top: 40vh;
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  background-image: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  color: rgba(255, 255, 255, 0.9);
  z-index: 99999;
}

.user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.user img {
  width: 2.8rem;
  border-radius: 50%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: absolute;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5em 1em;
  margin-inline: auto;
  transform: translateY(-100%);
  transition: transform 250ms ease-in;
}
.skip-to-content:focus {
  transform: translateY(0);
}

/*--------------------------------------------------------*/
/*	2. UTILITIES */
/*--------------------------------------------------------*/
.container {
  max-width: 90rem;
  padding-inline: 1.2rem;
}

.block {
  display: block;
}

.relative {
  position: relative !important;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 4rem;
}

.flex {
  display: flex;
  gap: 1.2rem;
}

.gtm-sm-2 {
  grid-template-columns: repeat(2, 1fr);
}

.g-1 {
  gap: 1rem;
}

.g-2 {
  gap: 2rem;
}

.g-3 {
  gap: 3rem;
}

.g-4 {
  gap: 4rem;
}

.place-start {
  place-items: start;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.self-start {
  align-self: start;
}

.right {
  float: right;
}

.w-100 {
  width: 100%;
}

.mx-w-25 {
  max-width: 25rem;
}

.mx-w-32 {
  max-width: 32rem;
}

.mx-w-40 {
  max-width: 40rem;
}

.sm-none {
  display: none;
}

.p-0 {
  padding: 0 !important;
}

.p-3 {
  padding: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-6 {
  margin-top: 6rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.bg-primary {
  background: #d6188a;
}

.bg-primary-rgba {
  background: rgba(214, 24, 138, 0.6);
}

.bg-secondary {
  background: #02c0ca;
}

.bg-secondary-rgba {
  background: rgba(2, 192, 202, 0.6);
}

.bg-image {
  background-image: var(--img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.translateY-3 {
  transform: translateY(3rem);
}

.translateY--5 {
  transform: translateY(-5rem);
}

.icon-opensea {
  content: url("../imgs/icon-opensea.png");
  width: 2rem;
}

.space-vortex {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  transition: 2s ease;
}
.space-vortex:hover {
  transform: scale(1.2);
}
.space-vortex.vortex-sm {
  width: 50%;
}
.space-vortex .arc {
  position: absolute;
  display: block;
  width: 85%;
  height: 85%;
  margin: 7.5%;
  border-radius: 50%;
  animation: 120s rotate linear infinite;
}
.space-vortex .arc::before, .space-vortex .arc::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  display: block;
  width: 100%;
  height: 100%;
  border: 0.3rem solid transparent;
  border-color: #d6188a transparent transparent transparent;
  border-radius: 50%;
  z-index: -8;
}
.space-vortex .arc::after {
  border-color: transparent transparent #02c0ca transparent;
}

@media (min-width: 55em) {
  .container {
    text-align: left;
    margin-inline: auto;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gtc-1-2 {
    grid-template-columns: 0.5fr 1fr;
  }
  .gtc-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .gtc-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .gtc-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .order-md-2 {
    order: 2;
  }
  .sm-none {
    display: flex;
  }
}
/*--------------------------------------------------------*/
/*	3. FONTS */
/*--------------------------------------------------------*/
body {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

h1, h2, h3, h4 {
  font-family: "Space Grotesk", sans-serif;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  font-weight: 900;
}

h1 {
  font-size: calc(1.2rem * 2.618);
}

h2 {
  font-size: calc(1.2rem * 1.618);
}

h3 {
  font-size: 1.6rem;
  font-weight: 600;
  color: #02c0ca;
}

h4 {
  font-size: 1.4rem;
}

a {
  font-family: "Space Grotesk", sans-serif;
  color: #d6188a;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.5s ease-in;
}
a:hover {
  text-decoration: underline;
}

input, textarea {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.2rem;
}

button, a.btn {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

footer {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

.txt-white {
  color: rgba(255, 255, 255, 0.9);
}

.txt-gradient {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  -webkit-background-clip: text;
  display: inline-block;
}

.txt-secondary {
  color: #02c0ca;
}

.txt-center {
  text-align: center;
}

.upper {
  text-transform: uppercase;
}

/*--------------------------------------------------------*/
/*	4. BUTTONS */
/*--------------------------------------------------------*/
button, a.btn {
  background-color: transparent;
  border-radius: 1.8rem;
  padding: 0.8rem 2.5rem;
  text-align: center;
  transition: background-color 0.8s, color 0.5s;
  cursor: pointer;
}
button.btn-cta, a.btn.btn-cta {
  background-color: #d6188a;
}
button.btn-cta:hover, a.btn.btn-cta:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #e34aa6;
}
button.btn-border, a.btn.btn-border {
  border: 0.1rem solid rgba(255, 255, 255, 0.9);
}
button.btn-border:hover, a.btn.btn-border:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: #d6188a;
}
button#goTop, a.btn#goTop {
  display: none;
  position: fixed;
  right: 1.8rem;
  bottom: 7rem;
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  padding: 0.2rem 0.6rem;
  z-index: 99;
  animation: fade ease 4s;
}
button#goTop svg, a.btn#goTop svg {
  width: 1.2rem;
  fill: rgba(255, 255, 255, 0.9);
}

.btn-buy {
  z-index: 999999;
  position: fixed;
  top: 25%;
  right: -6.3rem;
  padding-inline: 1rem !important;
  border-radius: 0 !important;
  border-right: 0;
  padding-right: 2rem;
  font-size: 1.4rem;
  border: 0.15rem solid rgb(255, 4, 4);
  background-color: rgba(255, 4, 4, 0.6) !important;
}
.btn-buy:hover {
  background-color: rgb(255, 4, 4);
  right: 0;
}
.btn-buy i {
  margin-right: .5rem;
}

.wa-chat {
  display: block;
  position: fixed;
  background: #25d366 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z'/%3E%3C/svg%3E") 50% no-repeat;
  background-size: 60%;
  height: 4rem;
  width: 4rem;
  border-radius: 100%;
  right: 1rem;
  bottom: 1rem;
  padding: 0;
  z-index: 999;
  animation: fadeIn ease 4s;
}
.wa-chat .wa-msg {
  position: fixed;
  bottom: 2rem;
  right: 5rem;
  width: 15rem;
  padding: 0.6rem 0.8rem;
  border-radius: 1rem;
  background-color: #02c0ca;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  text-align: center;
  z-index: 999;
  box-shadow: 0 0 0.4rem #130228;
}
@media (min-width: 55em) {
  .wa-chat {
    height: 4rem;
    width: 4rem;
  }
  .wa-chat .wa-msg {
    visibility: hidden;
    bottom: 3rem;
    border-radius: 1rem 1rem 0;
    transform: rotateY(90deg);
    transform-origin: right;
    transition: 0.8s cubic-bezier(0.06, 0.8, 0.1, 1);
  }
  .wa-chat:hover .wa-msg {
    visibility: visible;
    transform: rotateY(0);
  }
}

/*--------------------------------------------------------*/
/*	5. HEADER AND NAVIVATION */
/*--------------------------------------------------------*/
header {
  position: fixed;
  width: 100%;
  padding-block: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.6s ease-in-out;
  z-index: 999;
}
header.bg {
  background-color: #130228;
}
header .container {
  grid-template-columns: 12rem 1fr;
}
header .container img {
  width: 12rem;
}

.mobile-nav-toggle {
  display: block;
  justify-self: end;
  width: 2.5rem;
  padding: 0;
  z-index: 9999;
}
.mobile-nav-toggle .bar1,
.mobile-nav-toggle .bar2,
.mobile-nav-toggle .bar3 {
  width: 100%;
  height: 0.12rem;
  margin-block: 0.65rem;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.8s ease;
}
.mobile-nav-toggle[aria-expanded=true] .bar1 {
  transform: rotate(-45deg) translate(-50%, -50%);
}
.mobile-nav-toggle[aria-expanded=true] .bar2 {
  opacity: 0;
}
.mobile-nav-toggle[aria-expanded=true] .bar3 {
  transform: rotate(45deg) translate(-50%, -50%);
}
@media (min-width: 1220px) {
  .mobile-nav-toggle {
    display: none;
  }
}

nav#navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 7rem;
  width: calc(100% - 1.2rem * 2);
  padding: 0.6rem 1.2rem;
  border-radius: 1.5rem;
  background-color: #130228;
  transform: rotateX(90deg);
  transform-origin: top;
  transition: all 0.5s ease-in-out;
  z-index: 1000;
}
nav#navbar[data-visible=true] {
  transform: rotateX(0);
}
@media (max-width: 55em) {
  nav#navbar {
    box-shadow: 0 0.8rem 2rem rgba(37, 37, 45, 0.3);
  }
}
nav#navbar ul {
  text-align: center;
}
@media (max-width: 55em) {
  nav#navbar ul {
    width: 100%;
  }
}
nav#navbar ul li {
  display: block;
  padding-top: 1rem;
}
nav#navbar ul li.has-submenu > a::after {
  content: url(../imgs/icon-arrow.svg);
  display: inline-block;
  padding-left: 0.5rem;
  transition: all 0.5s ease-in-out;
}
nav#navbar ul li.has-submenu.open > a::after {
  transform: rotate(180deg);
  padding-right: 0.5rem;
}
nav#navbar ul li.has-submenu.open ul.submenu {
  display: block;
}
nav#navbar ul li a {
  color: rgba(255, 255, 255, 0.9);
}
nav#navbar ul li a:hover {
  color: #d6188a;
  text-decoration: none;
}
nav#navbar ul li ul.submenu {
  display: none;
  max-height: 36vh;
  padding: 0.6rem 1.2rem;
  margin-top: 1rem;
  border-radius: 1.5rem;
  background-color: #091e31;
  animation: fadeIn 0.5s ease-in;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #d6188a #130228;
  scroll-behavior: smooth;
}
nav#navbar ul li ul.submenu li {
  display: block;
  padding-block: 0.5rem;
  padding-left: 0;
}
nav#navbar ul li ul.submenu li a {
  text-decoration: none;
}
@media (max-height: 32em) {
  nav#navbar {
    display: block;
    overflow-y: scroll;
    max-height: 60vh;
  }
}
@media (max-width: 1220px) {
  nav#navbar .account {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 0.2rem solid #091e31;
    margin-top: 1.2rem;
  }
  nav#navbar .account button {
    width: -moz-max-content;
    width: max-content;
    margin: 0.8rem auto;
  }
  nav#navbar .account button.btn-cta {
    background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0;
  }
}
@media (min-width: 1220px) {
  nav#navbar {
    justify-content: space-between;
    flex-direction: row;
    position: relative;
    top: 0;
    padding: 0;
    background-color: transparent;
    transform: rotateX(0);
  }
  nav#navbar ul {
    text-align: left;
  }
  nav#navbar ul li {
    display: inline-block;
    padding-right: 2rem;
    padding-top: 0;
  }
  nav#navbar ul li a {
    color: rgba(255, 255, 255, 0.9);
  }
  nav#navbar ul li.has-submenu > a {
    color: rgba(255, 255, 255, 0.9);
  }
  nav#navbar ul li.has-submenu.open ul.submenu {
    position: absolute;
  }
  nav#navbar ul li ul.submenu {
    min-width: 10rem;
    max-height: 70vh;
    margin-top: 2.55rem;
    background-color: #130228;
    box-shadow: 0 0.8rem 2rem rgba(37, 37, 45, 0.3);
  }
}

/*--------------------------------------------------------*/
/*	6. SECTIONS */
/*--------------------------------------------------------*/
section {
  padding-block: 6rem;
  overflow-x: clip;
}
section.page-title {
  padding-block: 12rem 6rem;
  background: linear-gradient(150deg, #d6188a, #02c0ca 80%);
  border-bottom-left-radius: 4rem;
}
section.page-title h1 {
  margin-bottom: 0.6rem;
}
section.cta {
  background: linear-gradient(45deg, #130228 30%, #091e31);
}
section.cta .container {
  display: grid;
  place-items: center;
  gap: 2rem;
}
section.er404 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  min-height: 80vh;
  background: linear-gradient(150deg, #d6188a, #02c0ca 80%);
}

#mint {
  padding-block: 2rem !important; /* 或者更小，比如 2rem */
}

#slider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  height: clamp(35rem, 75vh, 90vh);
  padding: 2.4rem 0;
  border-bottom-left-radius: 4rem;
  background: linear-gradient(150deg, #d6188a, #02c0ca 80%);
  color: rgba(255, 255, 255, 0.9);
}
#slider div.grid {
  gap: 1rem;
}
#slider h1 {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.9);
  background: unset;
  -webkit-text-fill-color: unset;
  -webkit-background-clip: unset;
}
#slider div {
  margin-top: 2rem;
}
@media (max-width: 55em) {
  #slider {
    min-height: 85vh;
    line-height: 1;
  }
  #slider .container {
    padding-top: 8rem;
  }
  #slider .container h1 {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
  }
  #slider .container img {
    max-width: 80%;
    margin-bottom: -5.5rem;
  }
  #slider .container div a.btn {
    padding-inline: 1.5rem;
  }
  #slider .container div:last-child {
    max-width: 30rem;
  }
}
@media (max-height: 44.5em) {
  #slider {
    min-height: 50rem;
  }
}

.bg-dark {
  background-image: linear-gradient(45deg, #091e31, #130228 30%);
  border-top-right-radius: 4rem;
  border-bottom-left-radius: 4rem;
}

.bg-dark-circle {
  color: rgba(255, 255, 255, 0.9);
  background-image: url(../imgs/bg-circles.svg), linear-gradient(45deg, #130228 30%, #091e31);
  background-position: 10% center, center;
  background-size: 100%, auto;
  background-repeat: no-repeat;
  border-top-right-radius: 4rem;
  border-bottom-left-radius: 4rem;
  margin-top: 10rem;
  margin-bottom: 0;
}
.bg-dark-circle .container {
  gap: 2rem;
}
.bg-dark-circle .container > img {
  margin-top: -15rem;
}

@media (min-width: 55em) {
  section.cta .container {
    grid-template-columns: 1fr 0.8fr;
  }
  section.intro h1 {
    grid-column: span 2;
  }
  section.intro img {
    right: -30%;
    left: unset;
  }
  .out-container {
    position: relative;
    width: 150%;
    left: -30%;
  }
  .bg-dark-circle {
    background-position: 22% 85%, center;
    background-size: 40%, auto;
    margin-block: 0;
  }
}
/*--------------------------------------------------------*/
/*	7. CARDS */
/*--------------------------------------------------------*/
.card {
  position: relative;
  border-radius: 1.5rem;
  padding: 1.2rem;
  overflow: hidden;
}
.card * > :last-child {
  margin-bottom: 0;
}
.card img {
  transform: translateY(-4rem);
}
.card .card-overlay {
  position: absolute;
  inset: 0;
  top: unset;
  padding: 2rem 1.2rem;
  border-radius: 1.5rem 0 0 0;
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  transition: 0.35s ease-in-out;
  z-index: 1;
}
.card .card-overlay::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(2, 192,202)"><path d="M 40 80 c 22 0 40 -22 40 -40 v 40 Z"></path></svg>');
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 70px;
  height: 70px;
}
.card .card-overlay h2 {
  margin-bottom: 0;
}
.card .card-overlay > p:not(:last-child) {
  margin-bottom: 1.2rem;
}
.card .card-overlay i {
  font-size: calc(1.2rem * 1.618);
  color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 55em) {
  .card img {
    transform: none;
  }
  .card .card-overlay {
    transform: translateY(56%);
  }
  .card .card-overlay:hover {
    transform: translateY(0);
  }
}

/*--------------------------------------------------------*/
/*	8. TIMELINE */
/*--------------------------------------------------------*/
ul.timeline {
  position: relative;
}
ul.timeline:before {
  content: "";
  position: absolute;
  height: 100%;
  border-left: 2px dashed rgba(255, 255, 255, 0.9);
}
ul.timeline li {
  position: relative;
  width: 25rem;
  margin-left: 2rem;
  padding: 2rem 1.2rem;
  border-radius: 1.5rem;
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
}
ul.timeline li:not(:first-child) {
  margin-top: 4rem;
}
ul.timeline li span.line {
  position: absolute;
  left: -2rem;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
}
ul.timeline li span.line:before, ul.timeline li span.line:after {
  content: "";
  position: absolute;
  left: -0.35rem;
  top: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: #02c0ca;
}
ul.timeline li span.line:after {
  top: 100%;
}
ul.timeline li span.line strong {
  position: absolute;
  font-size: 0.6rem;
  left: -4rem;
}
ul.timeline li span.line strong:first-child {
  top: 0;
}
ul.timeline li span.line strong:last-child {
  top: 100%;
}
ul.timeline li h2 {
  margin-bottom: 0.6rem;
}
@media (max-width: 55em) {
  ul.timeline li {
    width: 16rem;
    margin-left: 0.8rem;
  }
  ul.timeline li span.line {
    left: -0.8rem;
  }
  ul.timeline li span.line strong {
    left: -2.4rem;
  }
}

/*--------------------------------------------------------*/
/*	9. CAROUSELS */
/*--------------------------------------------------------*/
.carousel-list {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 18rem;
  height: 15rem;
}
.carousel-list li {
  position: absolute;
  width: 10rem;
  box-shadow: 0 0.8rem 2rem rgba(37, 37, 45, 0.3);
  transition: all 0.3s ease-in;
}
.carousel-list li[data-pos="0"] {
  z-index: 5;
}
.carousel-list li[data-pos="-1"], .carousel-list li[data-pos="1"] {
  opacity: 0.7;
  filter: blur(1px) grayscale(10%);
}
.carousel-list li[data-pos="-1"] {
  transform: translateX(-50%) scale(0.9);
  z-index: 4;
}
.carousel-list li[data-pos="1"] {
  transform: translateX(50%) scale(0.9);
  z-index: 4;
}
.carousel-list li[data-pos="-2"], .carousel-list li[data-pos="2"] {
  opacity: 0.4;
  filter: blur(3px) grayscale(20%);
}
.carousel-list li[data-pos="-2"] {
  transform: translateX(-90%) scale(0.8);
  z-index: 3;
}
.carousel-list li[data-pos="2"] {
  transform: translateX(90%) scale(0.8);
  z-index: 3;
}
@media (min-width: 55em) {
  .carousel-list {
    height: 30rem;
  }
  .carousel-list li {
    width: 20rem;
  }
}

/*--------------------------------------------------------*/
/*	10. BLOG  */
/*--------------------------------------------------------*/
.grid-blog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.grid-blog .news-content > * {
  margin-bottom: 2rem;
}
.grid-blog .page-numb {
  width: 100%;
  padding-block: 4rem 1.2rem;
  text-align: center;
}
.grid-blog .page-numb a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}
.grid-blog .page-numb a.active {
  color: #d6188a;
}
.grid-blog .comment-list,
.grid-blog .nested-comment-list {
  margin-bottom: 4rem;
}
.grid-blog .comment-list article,
.grid-blog .nested-comment-list article {
  display: grid;
  grid-template-columns: 5rem 1fr;
  padding-block: 2rem;
  gap: 1.5rem;
}
.grid-blog .comment-list article img,
.grid-blog .nested-comment-list article img {
  border-radius: 100%;
}
.grid-blog .comment-list article a,
.grid-blog .nested-comment-list article a {
  color: rgba(255, 255, 255, 0.6);
}
.grid-blog .nested-comment-list {
  padding-left: 2rem;
}
.grid-blog aside {
  margin-top: 6rem;
}
.grid-blog aside a {
  color: rgba(255, 255, 255, 0.9);
}
.grid-blog aside a:hover {
  color: #d6188a;
}

article.news {
  padding: 2rem;
  border-radius: 1.5rem;
  background: linear-gradient(45deg, #091e31, #130228 30%);
}
article.news a:hover {
  text-decoration: none;
}
article.news a:hover h3,
article.news a:hover h2 {
  color: #d6188a;
  transition: 0.5s ease-in;
}
article.news .news-category {
  display: inline-block;
  padding: 0.3rem 1rem;
  margin-bottom: 0.6rem;
  border-radius: 0.3rem;
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  color: white;
}
article.news p {
  color: rgba(255, 255, 255, 0.6);
}
article.news time {
  display: block;
  margin-top: 1.2rem;
}

@media (min-width: 55em) {
  .grid-blog {
    grid-template-columns: 4fr 1fr;
  }
  .grid-blog aside {
    margin-top: 0;
  }
  .grid-blog .page-numb {
    grid-column: span 3;
  }
  .grid-blog .nested-comment-list {
    padding-left: 6rem;
  }
}
/*--------------------------------------------------------*/
/*	11. FOOTER */
/*--------------------------------------------------------*/
.er-404 footer {
  border-top-right-radius: 0;
}

footer {
  position: relative;
  padding-block: 6rem 4rem;
  background-color: #130228;
  border-top-right-radius: 4rem;
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  height: 0.6rem;
  background-image: linear-gradient(45deg, #d6188a, #02c0ca 80%);
}
footer .container {
  gap: 2rem;
}
@media (min-width: 55em) {
  footer .container {
    grid-template-columns: repeat(4, 1fr);
    place-items: start;
  }
  footer .container p:last-child {
    width: 100%;
    margin-top: 2rem;
    text-align: center;
    grid-column: span 4;
  }
}
footer .container img {
  width: 12rem;
}
footer .container i {
  font-size: 2rem;
}
footer .container li a {
  font-family: "Nunito Sans", sans-serif;
  color: rgba(255, 255, 255, 0.9);
}
footer .container li a:hover {
  font-weight: 400;
}
footer.style-2 {
  padding-block: 8rem;
  border-top-right-radius: 0;
  background-image: url(../imgs/footer-2-primary.webp);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
}
footer.style-2 .container {
  gap: 5rem;
}
footer.style-2 .container div {
  width: 100%;
}
@media (min-width: 55em) {
  footer.style-2 .container {
    grid-template-columns: 1fr 1.6fr;
  }
}

/*--------------------------------------------------------*/
/*	12. MODALS */
/*--------------------------------------------------------*/
#loginModal, #signUpModal, #walletModal {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.5s ease-in;
  z-index: 9999;
}
#loginModal.open, #signUpModal.open, #walletModal.open {
  display: block;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 28rem;
  min-width: 21rem;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(45deg, #130228 30%, #091e31);
  border-radius: 1.2rem;
  transition: all 0.8s ease;
  animation: fade 1s ease-in-out;
  box-shadow: 0 0.8rem 2rem rgba(37, 37, 45, 0.3);
}
.modal .close-modal {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1.2rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}
.modal img {
  width: 12rem;
  padding-block: 2rem;
}
.modal h2 {
  color: #d6188a;
}
.modal form > * {
  margin-bottom: 0.8rem;
}
.modal form label {
  float: left;
}
.modal p {
  margin-block: 2rem;
}
.modal button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-direction: row;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}
.modal button:hover svg {
  fill: #d6188a;
}
.modal button.btn-cta {
  background: linear-gradient(45deg, #d6188a, #02c0ca 80%);
  color: rgba(255, 255, 255, 0.9);
}
.modal button svg {
  fill: rgba(255, 255, 255, 0.9);
  height: 1.2rem;
  transition: fill 0.6s;
}
/*--------------------------------------------------------*/
/*	13. ANIMATIONS */
/*--------------------------------------------------------*/
.pulse {
  animation: pulse 4s infinite ease-in-out alternate;
  transform-origin: center;
  transition: 1s ease;
}

.move {
  animation: move 4s infinite ease-in-out alternate;
  transform-origin: center;
  transition: 1s ease-in-out;
}

.zoom-hover {
  transition: 0.4s ease;
}
.zoom-hover:hover {
  transform: scale(1.3);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: top;
  }
  to {
    opacity: 1;
    transform: rotateX(0);
    transform-origin: top;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.05);
  }
}
@keyframes move {
  0% {
    transform: translate(0);
  }
  40% {
    transform: translate(-1rem);
  }
  to {
    transform: translate(1.8rem);
  }
}
@keyframes rotate {
  from {
    transform: rotate(90deg);
  }
  to {
    transform: rotate(8100deg);
  }
}/*# sourceMappingURL=style.css.map */

#astro-token{
  scroll-margin-top: 80px;
}
#roadmap{
  scroll-margin-top: 80px;
}
#team{
  scroll-margin-top: 80px;
}

.down-btn{
  display: flex;
  justify-content: space-between; /* 关键：平均分布 */
  gap: 2rem; /* 按钮之间的空隙数量，可调 */
  padding: 0 4rem; /* 两侧空白 */
  max-width: 800px; /* 控制总宽度 */
  margin: 0 auto; /* 水平居中 */
}


/* =====================================================================
   YYPoker — Mobile-only overrides (2025-09-10)
   Scope: CSS-only changes per requirements (hide sections on phones,
   move hero download buttons below image, shrink headings/logo/nav by ~20–30%).
   ---------------------------------------------------------------------
   NOTE: These rules are mobile-scoped and non-destructive to desktop.
   ===================================================================== */
@media (max-width: 768px){

  /* (1) 手机隐藏：俱乐部 */
  #team{ display:none !important; }

  /* (2) 手机隐藏：平台特色四项描述（时间轴） */
  #roadmap .timeline{ display:none !important; }

  /* (3) 手机隐藏：为“扑克而生”至“钱包管理”整块 */
  #mint{ display:none !important; }

  /* (4)(7)(8)(9) 将指定标题在手机上缩小约 20%，并限制为单行显示 */
  /* 英雄主标题 */
  #slider h1,
  #slider .container h1{
    font-size: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 从这里，开启你的扑克之旅 */
  #astro-token h1{
    font-size: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 扑克不只是游戏，更是交流与分享 */
  #astro-token h2:first-of-type{
    font-size: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 扑克，尽在你的掌握 */
  #about h1{
    font-size: 80% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* (5)(10) 不隐藏 PC 下载按钮（兜底显式开启） */
  #slider .show-pc,
  footer .down-btn .show-pc{
    display: inline-flex !important;
  }

  /* (6) 将上方下载按钮移动到“home_en”图片下方（仅用 CSS）
     通过让文字容器 display: contents; 使内部块成为网格直接子项，再使用 grid-area 排序 */
  #slider .container.grid{
    display:grid;
    grid-template-areas:
      "hero-title"
      "hero-desc"
      "hero-image"
      "hero-buttons";
    row-gap: 1rem;
  }
  /* 把左侧文本列“打散”为网格直接子项 */
  #slider .container.grid > div:first-child{ display: contents; }
  #slider .container.grid > div:first-child > h1{ grid-area: hero-title; }
  #slider .container.grid > div:first-child > p{ grid-area: hero-desc; }
  #slider .container.grid > .space-vortex{ grid-area: hero-image; }
  #slider .container.grid > div:first-child > .flex{ grid-area: hero-buttons; margin-top:.25rem; }

  /* (11) 顶部 Logo 缩小 30% 且整体左右内边距略收紧 */
  header .container img{ width: 8.4rem !important; } /* 原 12rem * 0.7 */
  header{ padding-block: .9rem !important; }
  header .container{ padding-inline: .8rem !important; }

  /* (12) 顶部导航菜单与按钮缩小约 30%，并让右侧间距更紧凑 */
  .mobile-nav-toggle{ width: 1.75rem !important; }
  .mobile-nav-toggle .bar1,
  .mobile-nav-toggle .bar2,
  .mobile-nav-toggle .bar3{
    margin-block: .5rem !important;
  }
  nav#navbar{ top: 5.6rem !important; }
  nav#navbar ul li{ padding-top: .6rem !important; }
  nav#navbar ul li a{ font-size: .875rem !important; } /* ~-27% */
  nav#navbar .account .btn-cta,
  header .account .btn-cta,
  header .lang-trigger{
    font-size: .84rem !important;        /* ~-30% */
    padding: .45rem 1rem !important;
    border-radius: 1.2rem !important;
  }
}



/* =====================================================================
   Mobile heading size fix (-20% from original, not "to 20%")
   This overrides earlier 80% percentage rules by tying to base rem sizes
   defined in style.css (h1 = 1.2rem*2.618; h2 = 1.2rem*1.618).
   ===================================================================== */
@media (max-width: 768px){
  /* Hero main title: YYPoker给您极致的扑克体验 */
  #slider h1,
  #slider .container h1{
    font-size: calc(1.2rem * 2.618 * 0.8) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 从这里，开启你的扑克之旅 */
  #astro-token h1{
    font-size: calc(1.2rem * 2.618 * 0.8) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 扑克不只是游戏，更是交流与分享 */
  #astro-token h2:first-of-type{
    font-size: calc(1.2rem * 1.618 * 0.8) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 扑克，尽在你的掌握 */
  #about h1{
    font-size: calc(1.2rem * 2.618 * 0.8) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}



/* =====================================================================
   Mobile Revert Patch (restore titles/images/logo to initial theme sizes)
   Put this CSS AFTER any custom patches. Only affects <=768px.
   ===================================================================== */
@media (max-width: 768px){
  /* 1) Restore main headings to theme's initial sizes and wrapping */
  #slider h1,
  #slider .container h1,
  #astro-token h1,
  #about h1{
    font-size: calc(1.2rem * 2.618) !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  #astro-token h2:first-of-type{
    font-size: calc(1.2rem * 1.618) !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* 2) Restore hero image (Home_zh / Home_en) to normal width */
  #slider .space-vortex img{
    max-width: 100% !important;
  }

  /* 3) Restore header logo and nav/button sizing to theme defaults */
  header .container img{ width: 12rem !important; }
  .mobile-nav-toggle{ width: 2.5rem !important; }
  nav#navbar{ top: 7rem !important; }
  nav#navbar ul li a{ font-size: 1.2rem !important; }
  nav#navbar .account .btn-cta,
  header .account .btn-cta,
  header .lang-trigger{
    font-size: 1.2rem !important;
    padding: 0.8rem 2.5rem !important;
    border-radius: 1.8rem !important;
  }
}



/* =====================================================================
   2025-09-10 — Restore navigation bar (header.bg) to initial state
   - Remove any bottom-left/right corner radius adjustments
   ===================================================================== */
header.bg {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}



/* =====================================================================
   2025-09-10 — Keep hero gradient (#slider) with BOTH bottom corners rounded
   - Left: 4rem (theme default)
   - Right: 4rem (ensure preserved)
   ===================================================================== */
#slider{
  border-bottom-left-radius: 4rem !important;
  border-bottom-right-radius: 4rem !important;
}



/* =====================================================================
   2025-09-10 — Adjust #slider corner radius: big on desktop, subtle on mobile
   ===================================================================== */
#slider{
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
}
@media (max-width: 768px){
  #slider{
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
  }
}



/* =====================================================================
   2025-09-10 — Mobile: Left logo snug to screen edge, size=65%
   Base: style_0910_final_mobile.css
   ===================================================================== */
@media (max-width: 768px){
  /* Remove left padding so logo can hug the edge */
  header .container{
    padding-left: 0 !important;
  }
  /* Anchor wrapper snug to left */
  header .container a:first-child{
    margin-left: 0 !important;
    display: inline-block;
  }
  /* Logo image size 65% */
  header .container a:first-child img{
    width: 65% !important;
    max-width: none !important;
  }
}



/* =====================================================================
   2025-09-10 — Mobile: Keep hamburger style unchanged, align to right edge
   Base: style_0910_final_mobile_logo65.css
   ===================================================================== */
@media (max-width: 768px){
  /* Allow content to approach the edge */
  header .container{
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Push the toggle fully to the right, keep its native look & size */
  .mobile-nav-toggle{
    margin-left: auto !important;
    margin-right: calc(env(safe-area-inset-right, 0px) + 1px) !important;
    transform: none !important;      /* ensure no scaling is applied */
    /* DO NOT override width/height/color/bars, to keep style unchanged */
  }
}


/* === Custom Fixes (2025-09-14) === */

/* 1. 确保 hero-downloads 在手机上显示在 hero 图片上方 */
@media (max-width: 768px){
  #slider .hero-downloads {
    margin-top: 0 !important;
    order: -1;
  }
}

/* 2. 确保 iOS / Android / PC 按钮在手机端始终显示 */
@media (max-width: 768px){
  .show-android,
  .show-ios,
  .show-pc {
    display: flex !important;
  }
}

/* =========================================================
   YYPoker — style_audit_fix.css
   Minimal, non-invasive mobile/display fixes (2025-09-14)
   ---------------------------------------------------------
   变更点：
   1) Hero 高度约束冲突：小屏仅保留 height:clamp(...)，移除 min-height 85vh 的影响
   2) Hero 图片负 margin 改为 transform，避免遮挡与点击层级问题
   3) 限定 hero 内部通用 margin 对按钮的影响，保持按钮贴近图片上方
   4) 统一顶部与底部下载按钮的尺寸系统（不改 HTML，仅按选择器覆盖）
   5) 小屏统一减小 .grid 间距，减少空白
   6) 时间线与卡片在小屏采用流式宽度，避免溢出
   ========================================================= */

/* 1) 移除小屏 min-height 叠加影响，保留 clamp 高度行为 */
@media (max-width: 55em){
  #slider{
    min-height: unset !important; /* 清除先前的 85vh 约束 */
  }
}

/* 2) Hero 图片：取消负 margin，改用位移；并抬高层级避免遮挡按钮点击 */
@media (max-width: 55em){
  #slider .container img{
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;               /* 图片在文本之上但低于按钮容器 */
    transform: translateY(-2rem);
  }
  /* 按钮容器抬高层级，确保可点击 */
  #slider .hero-downloads{
    position: relative;
    z-index: 2;
  }
}

/* 3) 收敛 hero 内通用 margin 对按钮的影响（最小覆盖） */
@media (max-width: 768px){
  /* 保证按钮与图片贴近、不过度下推 */
  #slider .hero-downloads{
    margin-top: .5rem !important;
  }
}

/* 4) 下载按钮尺寸系统统一（顶部与底部） */
#slider .hero-downloads a.show-android,
#slider .hero-downloads a.show-ios,
#slider .hero-downloads a.show-pc,
footer .down-btn a.btn-cta{
  min-width: 180px;
  height: 48px;
  padding: 0 .9em;
  font: 500 15px/1.2 Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#slider .hero-downloads .btn-icon,
footer .down-btn .btn-icon{
  width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain;
  margin: 0;
}

/* 5) 小屏统一减小网格 gap，避免空白过大 */
@media (max-width: 768px){
  .grid{ gap: 1.6rem !important; }
}

/* 6) 时间线与卡片小屏流式化，避免溢出 */
@media (max-width: 55em){
  ul.timeline li{
    width: min(100%, 20rem);
    margin-left: .8rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}