html,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: \\5fae\8f6f\96c5\9ed1, Microsoft Yahei, sans-serif;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.container {
  margin: 0 auto;
  padding: 0 0.15rem;
  padding-bottom: 1.5rem;
}

.banner-bg {
  width: 100%;
  height: 12rem;
  background: url("../images/banner_bg.png") no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  overflow: hidden;
}

.banner-bg .banner-container {
  position: relative;
}

.banner-bg .banner-container img {
  position: absolute;
}

.banner-bg .banner_title1 {
  width: 4.43rem;
  height: 0.44rem;
  left: 1.4rem;
  top: 0.5rem;
}

.banner-bg .banner_title2 {
  width: 4.58rem;
  height: 0.95rem;
  top: 1rem;
  left: 1.4rem;
}

.banner-bg .banner_title3 {
  width: 4.58rem;
  height: 0.57rem;
  top: 2.1rem;
  left: 1.4rem;
}

.banner-bg .banner_title4 {
 width: 3.59rem;
 height: 1.75rem;
 top: 3rem;
 left: 1.9rem;
}

.banner-bg .banner_title5 {
 
}

.banner-bg .banner_icon {
  width: 6.99rem;
  height: 6.03rem;
  top: 5.5rem;
  left: 0.3rem;
}

.bg-color {
  width: 100%;
  height: 41rem;
  background: url("../images/m_block.png") top center no-repeat;
  background-size: 100% 100%;
}

.bg-color .block_img {
  position: relative;
  z-index: 20;
}

.bg-color .rule-block{
  padding-top: 0.8rem;
}

.bg-color .rule-block .game-skills{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.bg-color .rule-block .game-skills .block_title1 {
  content: url("../images/block1_title1.png");
  width: 4.3rem;
  height: .68rem;
}

.bg-color .rule-block .game-skills .block_title2 {
  content: url("../images/block1_title2.png");
  width: 5.24rem;
  height: .94rem;
}

/* .bg-color .rule-block .game-skills .block_title3 {
  content: url("../images/block_title3.png");
} */

.bg-color .rule-block .game-skills .block_title {
  position: relative;
  margin: 0 auto;
}

.bg-color .rule-block .game-skills .last {
  position: absolute;
  font-size: 0.5rem;
  font-weight: 900;
  transform: translate(4.2rem, -3.15rem);
  text-align: center;
  width: 1.2rem;
  color: #fffc00;
  text-shadow: 0px -1px 0 #6e4709, -1px 3px 0 #6e4709, -1px 3px 0 #6e4709,
    2px 3px 0 #6e4709;
  display: none;
}

.bg-color .rule-block .game-skills .container {
  padding: 0 0rem;
  padding-top: 2rem;
}

.bg-color .rule-block .game-skills .container .road {
  background: url("../images/road.png") center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 11.28rem;
  animation: 3s ease 0.1s infinite normal none running flash;
}

.memory-game {
  display: grid;
  grid-template-columns: repeat(3, 28%);
  grid-gap: 0.4rem;
  justify-content: center;
  margin-top: -0.4rem;
}

.level.lv1 {
  background: url("../images/lv1.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv1p {
  background: url("../images/lv1p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv1.flipped {
  background: url("../images/lv1s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv2 {
  background: url("../images/lv2.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv2p {
  background: url("../images/lv2p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv2.flipped {
  background: url("../images/lv2s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv3 {
  background: url("../images/lv3.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv3p {
  background: url("../images/lv3p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv3.flipped {
  background: url("../images/lv3s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv4 {
  background: url("../images/lv4.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv4p {
  background: url("../images/lv4p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv4.flipped {
  background: url("../images/lv4s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv5 {
  background: url("../images/lv5.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv5p {
  background: url("../images/lv5p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv5.flipped {
  background: url("../images/lv5s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv6 {
  background: url("../images/lv6.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv6p {
  background: url("../images/lv6p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv6.flipped {
  background: url("../images/lv6s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv7 {
  background: url("../images/lv7.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv7p {
  background: url("../images/lv7p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv7.flipped {
  background: url("../images/lv7s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv8 {
  background: url("../images/lv8.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv8p {
  background: url("../images/lv8p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv8.flipped {
  background: url("../images/lv8s.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv9 {
  background: url("../images/lv9.png") center no-repeat;
  background-size: 100% 100%;
}

.levels.lv9p {
  background: url("../images/lv9p.png") center no-repeat;
  background-size: 100% 100%;
}

.level.lv9.flipped {
  background: url("../images/lv9s.png") center no-repeat;
  background-size: 100% 100%;
}

.extra-level.lv10 {
  background: url("../images/lv10.png") center no-repeat;
  background-size: 100% 100%;
}

.extra-levels.lv10p {
  background: url("../images/lv10p.png") center no-repeat;
  background-size: 100% 100%;
}

.extra-level.lv10.flipped {
  background: url("../images/lv10s.png") center no-repeat;
  background-size: 100% 100%;
}

.level,
.extra-level.lv10,
.levels,
.extra-levels.lv10p {
  width: 1.95rem;
  height: 1.96rem;
}

.level.flipped {
  background-color: #fff;
}

.flipped {
  animation: shake 0.5s;
}

.levels-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
}

.extra-level.lv11 {
  background: url("../images/lv11.png") center no-repeat;
  background-size: 100% 100%;
  width: 2.28rem;
  height: 2.2rem;
  margin-top: 0.3rem;
}

.extra-levels.lv11p {
  background: url("../images/lv11p.png") center no-repeat;
  background-size: 100% 100%;
  width: 2.29rem;
  height: 2.2rem;
}

.extra-level.lv11.flipped {
  background: url("../images/lv11s.png") center no-repeat;
  background-size: 100% 100%;
}

.extra-level.flipped {
  background-color: #fff;
}

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

.btn-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  max-width: 6.43rem;
  margin: 0 auto;
  padding-top: 0.5rem;
  min-height: 3rem;

}

.btn {
  background: url("../images/alert_btn.png") center no-repeat;
  background-size: 100% 100%;
  font-size: 0.3rem !important;
  letter-spacing: 2px;
  font-weight: 900;
  width: 3.71rem;
  height: 0.83rem;
  line-height: 0.83rem;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
  display: block;
  /* ★ 關鍵：文字描邊/陰影 (讓白字在金底上清楚) ★ */
  text-shadow: 1px 1px 0px #ca9d31, -1px -1px 0px #ca9d31;
}

.btn2 {
  background: url("../images/alert_btn2.png") center no-repeat;
  background-size: 100% 100%;
}

.btn-wrap .blocck_btn {
  background: url("../images/block_btn.png") center no-repeat;
  font-weight: 900;
  font-size: 0.4rem;
  width: 4.81rem;
  height: 1.43rem;
  color: #92600b;
  background-size: 100% 100%;
  line-height: 1.95rem;
  letter-spacing: 0.05rem;
  margin: 0 auto;
}

.btn-wrap .checkreward_btn {
  background: url("../images/checkreward_btn.png") center no-repeat;
  font-weight: 900;
  font-size: 0.4rem;
  width: 2.95rem;
  height: 0.81rem;
  color: #ffffff;
  background-size: 100% 100%;
  line-height: 1;
  letter-spacing: 0.05rem;
  margin: 0 auto;
  font-size: 0.3rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-wrap .getreward_btn {
  background: url("../images/getreward_btn.png") center no-repeat;
  font-weight: 900;
  font-size: 0.4rem;
  width: 2.95rem;
  height: 0.81rem;
  color: #ffffff;
  background-size: 100% 100%;
  line-height: 1;
  letter-spacing: 0.05rem;
  margin: 0 auto;
  font-size: 0.3rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#btn-exchange {
  /* display: none; */
}

#btn-getIntegral {
  /* display: none; */
}

.rule {
  font-size: 0.25rem;
}

.tc {
  text-align: center;
}

.rule-txt {
  text-align: justify;
  color: #000;
  padding-bottom: 0.2rem;
}

.rule-title {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.4rem;
  font-weight: 900;
  color: #fbbf07;
}

.rule-subtitle {
  margin-bottom: 0.1rem;
  font-size: 0.345rem;
  font-weight: 700;
}

.rule-sm-title {
  font-weight: 900;
}

.tx_s {
  font-size: 0.25rem;
}

.rule ul li {
  display: flex;
  margin-bottom: 0.1rem;
}

.rule ol {
  padding-left: 0;
}

.rule ol li {
  list-style-type: decimal;
  margin-left: 1em;
  padding-left: 0.15rem;
  line-height: 0.4rem;
}

.rule ol li .important {
  color: #d11d1e;
}

#popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 0.36rem;
  text-align: center;
  z-index: 999;
  display: none;
}

#popup-wrapper .inner {
  margin-top: 2.8rem;
  width: auto;
  height: 1rem;
}

#message-section .inner {
  padding: 0;
  margin-top: 2rem;
}

#popup-wrapper .popup-content {
  position: absolute;
  transform: translate(2%, 70%);
  text-align: center;
  overflow: initial;
  display: none;
  width: 7.16rem;
  height: 3.67rem;
}

#popup-wrapper #login-section {
  background: url("../images/login-section.png") center no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  width: 7.16rem;
  height: 3.67rem;
}

#popup-wrapper #go-to-app-section {
  background: url("../images/go-to-app-section.png") center no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  width: 7.16rem;
  height: 3.67rem;
}

#popup-wrapper #activation-section {
  background: url("../images/activation-section.png") center no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}

#popup-wrapper #no-demo-section {
  background: url("../images/no-demo-section.png") center no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}

#popup-wrapper #no-demo-section .inner {
  margin: 0.3rem 0.3rem;
}

#message-section {
  background: url("../images/message-section.png") center no-repeat;
  background-size: 100% 100%;
  padding-top: 0.8rem;
  color: #ffffff;
  width: 7.16rem;
  height: 3.67rem;
}

#message-section .description {
  margin-top: -0.8rem;
  padding-bottom: 1rem;
}

#final-bonus-section {
  background: url("../images/final-bonus-section.png") center no-repeat;
  background-size: 100% 100%;
  padding-top: 0.8rem;
}

#bonus-section {
  background: url("../images/bonus-section.png") center no-repeat;
  background-size: 100% 100%;
  padding-top: 0.8rem;
  width: 7.16rem !important;
  height: 3.83rem !important;
}

#bonus-section .levelTitle {
  margin-top: -3rem;
  color: #ffffff;
  font-weight: 700;
}

#bonus-section .levelTitle .stageNumber {
  color: #ffffff;
  font-weight: 700;
}

#bonus-section .levelMoney {
  padding-top: 0;
  padding-bottom: 2.5rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 2px;
}

#bonus-section .levelMoney .award {
  color: #ffffff;
  font-weight: 700;
}

#popup-wrapper #score-section,
#popup-wrapper #exchange-section {
  background: url("../images/score-section.png") center no-repeat;
  background-size: 100% 100%;
  transform: translate(2.5%, 28%);
  height: 8.07rem;
  color: #ffffff;
  font-size: 0.25rem;
}

#popup-wrapper .popup-content.max-height {
  max-height: 88%;
}

#popup-wrapper .popup-content#game {
  transform: none;
}

#getExchange-section,
#getIntegral-section {
  padding: 0rem;
}

#popup-wrapper .inner.no-border {
  border: none;
}

#popup-wrapper .title {
  margin: 0 auto 0.62rem;
}

#game-over .inner .title {
  margin: 0 auto 0.27rem;
  font-size: 0.55rem;
  color: #fefc7a;
  font-weight: 600;
}

#popup-wrapper .description {
  margin-bottom: 0rem;
  line-height: 0.55rem;
  font-weight: 900;
  font-size: 0.35rem;
  color: #ffffff;
}

#game-over .description .obj {
  position: initial;
  margin: 0 auto;
  padding-top: 2px;
}

#game-over .description .obj img {
  width: 1rem;
  height: 1rem;
}

#popup-wrapper .btn {
  margin: 0 auto;
}

.popup-content .inner .title {
  width: 4.51rem;
  height: 0.49rem;
  font-size: 0.44rem;
  font-weight: 900;
}

#score-section #getIntegral-section,
#exchange-section #getExchange-section {
  padding: 0.5rem 0;
  margin: 0.2rem 0.2rem;
  height: 4rem;
}

#score-section #getIntegral-section .recodeNone,
#exchange-section #getExchange-section .recodeNone {
  font-weight: 900;
  margin-top: 1.5rem;
  padding-bottom: 1.2rem;
}

#score-section .inner,
#exchange-section .inner {
  padding: 0.5rem 0 0 0;
  margin: 0.2rem 0.5rem;
}

#exchange-section #accumulation {
  font-size: 0.4rem;
}

#score-section #accumulation,
#exchange-section #accumulation{
    /* 核心：定義從左到右的線性漸變背景 */
    /* 白色(#ffffff) -> 黃色(#fffc00) */
    background-image: linear-gradient(to right, #ffffff 20%, #fffc00 80%);
    
    /* 核心：將背景裁剪為文字形狀 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 核心：將文字顏色設為透明，透出背景的漸變色 */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 其他樣式設定 */
    font-weight: 900;    /* 特粗字體 */
    text-align: center;
    margin-bottom: 0.3rem;
}

#score-section #accumulation {
  font-size: 0.4rem;
  margin-bottom: 0.1rem;
}

#score-section .inner{
  margin: 0rem 0.5rem;
}

/* #score-section #accumulation span,
#exchange-section #accumulation span {
  color: #660500;
  font-weight: 900;
} */

#score-section #getIntegral-section #listIntegral,
#exchange-section #getExchange-section #listExchange {
  border-radius: 0.3rem;
  box-shadow: 0 0 10px 5px inset #730200;
  background-color: #730200;
  height: 5rem;
  overflow-y: auto;
  text-align: justify;
  line-height: 0.35rem;
  padding-left: 1rem;
  padding-top: 0.2rem;
  display: block;
}

.listContent{
  display: flex;
  justify-content: space-evenly;
}

#score-section #getIntegral-section #listIntegral{
  padding-left: 0;
}

#no-demo-section .btn {
  margin-top: 2.8rem;
}

#getIntegral-section .btn,
#exchange-section .btn {
  margin-top: 0.3rem;
}

.txt-fw9 {
  font-weight: 900;
}

.txt-20 {
  font-size: 0.2rem;
}

.txt-30 {
  font-size: 0.3rem;
  font-weight: 600;
}

.txt-40 {
  font-size: 0.4rem;
}

.txt-50 {
  font-size: 0.5rem;
}

.no-border {
  border: none;
}

@media screen and (max-width: 1024px) and (min-width: 750px) {
  #popup-wrapper .popup-content {
    transform: translate(0%, 95%);
  }

  #popup-wrapper .description {
    font-size: 0.3rem;
  }

  #popup-wrapper #score-section {
    transform: translate(0%, 7%);
  }

  #popup-wrapper #exchange-section {
    transform: translate(0%, 18%);
  }
}

.bot-fixed {
  /* background: url("../images/bot-fixed.png") center no-repeat; */
  background-color: #aa7c23;
  background-size: 100% 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 7.5rem;
  height: 1.57rem;
}

.bot-fixed ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 7.2rem;
  height: 60%;
  margin: 0 auto;
  margin-top: 0.3rem;
}

.bot-fixed li {
  width: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bot-fixed li.item a {
  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: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bot-fixed li.activation_btn {
  display: none;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(-8%);
    transform: translateY(-8%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes move {
  0% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(-8%);
    transform: translateY(-8%);
  }
  100% {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.5;
  }
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 20px #fff, 0 0 100px #fff, 0 0 20px #fff;
  }
  50% {
    text-shadow: 0 0 50px #fff, 0 0 150px #fff, 0 0 50px #fff;
  }
}

@keyframes neon2 {
  0%,
  100% {
    text-shadow: 0 0 20px #e8d083, 0 0 100px #e8d083, 0 0 20px #e8d083;
  }
  50% {
    text-shadow: 0 0 50px #e8d083, 0 0 150px #e8d083, 0 0 50px #e8d083;
  }
}

.page-loader-container span {
  font-size: 16px;
}

body {
  background: #000000;
  padding: 0;
  border: 0;
  margin: 0;
  height: 100%;
}
html {
  -ms-touch-action: none;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px) rotate(3deg); }
  50% { transform: translateX(-5px) rotate(-3deg); }
  75% { transform: translateX(5px) rotate(2deg); }
  100% { transform: translateX(0); }
}

.rule {
  background: url("../images/rule_bg.png") center no-repeat;
  background-size: 100% 100%;
  height: 20.58rem;
  padding: 0.15rem;
  width: 7.08rem;
  margin: 0 auto;
}

.rule-txt {
  /* width: 7.4rem; */
  text-align: justify;
}


.rule-txt {
  text-align: justify;
  color: #ffffff;
  padding-bottom: 0.2rem;
  font-family: 'Microsoft YaHei';
}

.rule-title {
  background: url("../images/rule_title.png");
  background-size: 100% 100%;
  width: 2.09rem;
  height: 0.55rem;
  margin: 0.5rem auto;
}

.rule-sm-title, .rule-subtitle{
  color: #ffd200;
}

.rule-subtitle {
  margin-bottom: 0.1rem;
  font-size: 0.24rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

.rule-sm-title {
  font-weight: 900;
}

.rule ul li {
  display: flex;
  margin-bottom: 0.1rem;
}

.rule ol {
  padding-left: 0;
}

.rule ol li {
  list-style-type: decimal;
  margin-left: 1em;
  padding-left: 0.15rem;
  line-height: 1.4;
  font-size: 0.22rem;
}

.bot-fixed {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  background: #03354e;
}

.bot-fixed ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
  margin: 0.3rem auto;
}

.bot-fixed li {
  height: .95rem;
  width: 2.17rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bot-fixed li.item a {
  width: 100%;
  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: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bot-fixed li.account {
  background: url("../../images/clawMachine2409/btn-account.png") no-repeat;
  background-size: 100% 100%;
}

.bot-fixed li.chat {
  background: url("../../images/clawMachine2409/btn-chat.png") no-repeat;
  background-size: 100% 100%;
}

.bot-fixed li#app {
  background: url("../../images/clawMachine2409/btn-download.png") no-repeat;
  background-size: 100% 100%;
}

/* =========================================
   1. 新增：移动端倒计时样式
   ========================================= */
.countdown-bar {
    width: 100%;
    text-align: center;
    margin: 0.2rem auto 0.1rem; /* 调整上下间距 */
    position: relative;
    z-index: 30;
    font-size: 0.24rem; /* 字体大小适配 */
}

.countdown-bar .cd-inner {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
    border: 1px solid #ffd200; /* 金边 */
    border-radius: 0.5rem; /* 圆角 */
    padding: 0.1rem 0.3rem;
    color: #ffd200; /* 金字 */
    font-weight: bold;
    box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.3);
}

.countdown-bar span[id^="cd-"] {
    font-family: Arial, sans-serif;
    margin: 0 0.05rem;
    color: #fff; /* 数字显示白色，更清晰 */
}

/* =========================================
   2. 新增：动态呼吸浮动特效 (Idle Animation)
   ========================================= */
@keyframes floating-m {
    0% { transform: translateY(0); }
    50% { transform: translateY(-0.1rem); } /* 移动端浮动幅度小一点 */
    100% { transform: translateY(0); }
}

/* 作用于所有关卡格子 */
.level, .extra-level {
    /* 加上过渡效果，让放大缩小时更顺滑 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27), filter 0.3s;
}

/* 奇数偶数错开浮动，由于用了grid布局，直接用nth-child */
.memory-game .level:nth-child(odd) {
    animation: floating-m 3s ease-in-out infinite;
}
.memory-game .level:nth-child(even) {
    animation: floating-m 3.5s ease-in-out infinite 0.5s;
}
/* 下方的大关卡也加上 */
.levels-flex .extra-level {
    animation: floating-m 4s ease-in-out infinite 1s;
}

/* =========================================
   3. 新增：跑马灯高亮特效 (Carousel Highlight)
   ========================================= */
.auto-highlight {
    /* 强制放大 */
    transform: scale(1.1) translateY(-0.1rem) !important;
    /* 金色高亮滤镜 */
    filter: brightness(1.3) drop-shadow(0 0 0.2rem #ffd200) !important;
    z-index: 25;
}

/* =========================================
   4. 新增：点击飘字特效 (Score Popup)
   ========================================= */
.score-popup {
    position: absolute;
    color: #ff3e3e; /* 红字 */
    font-weight: 900;
    font-size: 0.4rem;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; /* 白描边 */
    pointer-events: none; /* 不挡点击 */
    animation: floatUpFade 1s ease-out forwards;
    z-index: 100;
    white-space: nowrap;
}

@keyframes floatUpFade {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 1; transform: translateY(-0.5rem) scale(1.2); }
    100% { opacity: 0; transform: translateY(-1.2rem) scale(1); }
}

/* 解决翻转后的样式冲突 - 翻开后停止浮动 */
.flipped, .lv1p, .lv2p, .lv3p, .lv4p, .lv5p, .lv6p, .lv7p, .lv8p, .lv9p, .lv10p, .lv11p {
    animation: none !important;
    transform: scale(1) !important;
}

.alert-close{
  width: 0.39rem;
  height: 0.39rem;
  left: 80%;
  top: 6%;
}

#popup-wrapper .popup-content .alert-close {
  position: absolute;
  background: url("../../images/cryptoSep25/alert_close.png") no-repeat;
  background-size: 100% 100%;
  z-index: 999;
  width: 0.39rem;
  height: 0.39rem;
  left: 90%;
  top: 5%;
}

.remainpoints{
  display: inline-flex;
}

.remainpoints-panel{
  /* 核心：定義從左到右的線性漸變背景 */
    /* 白色(#ffffff) -> 黃色(#fffc00) */
    background-image: linear-gradient(to right, #ffffff 20%, #fffc00 80%);
    
    /* 核心：將背景裁剪為文字形狀 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 核心：將文字顏色設為透明，透出背景的漸變色 */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    /* 其他樣式設定 */
    font-weight: 900;    /* 特粗字體 */
    text-align: center;
    margin-bottom: 0rem;
    font-size: 0.3rem;
}