/* ==================== 顶部导航栏（ss-header-bar） ==================== */
.header-bar {
  display: flex;
  align-items: center;
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  background: #ECF5FF;
}

.header-bar .logo {
  width: calc(200 * var(--rpx));
  height: calc(84 * var(--rpx));
  flex-shrink: 0;
  border-radius: calc(20 * var(--rpx));
  overflow: hidden;
  cursor: pointer;
}

.header-bar .logo img {
  width: 100%;
  height: 100%;
}

.header-bar .search-box {
  width: calc(380 * var(--rpx));
  height: calc(72 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(150 * var(--rpx));
  display: flex;
  align-items: center;
  box-shadow: calc(4 * var(--rpx)) calc(4 * var(--rpx)) 0px 0px #B6DDFF;
  border: calc(4 * var(--rpx)) solid #1B2848;
  box-sizing: border-box;
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  margin-left: calc(12 * var(--rpx));
  cursor: pointer;
}

.header-bar .search-icon {
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  flex-shrink: 0;
}

.header-bar .search-placeholder {
  font-size: calc(24 * var(--rpx));
  color: #9FA5B2;
  margin-left: calc(8 * var(--rpx));
  margin-bottom: calc(2 * var(--rpx));
  font-weight: 400;
}

.header-bar .header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: calc(12 * var(--rpx));
}

.header-bar .action-btn {
  width: calc(76 * var(--rpx));
  height: calc(76 * var(--rpx));
  background: #FFFFFF;
  border-radius: 50%;
  position: relative;
  box-shadow: calc(4 * var(--rpx)) calc(4 * var(--rpx)) 0px 0px #B6DDFF;
  border: calc(4 * var(--rpx)) solid #1B2848;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-bar .action-btn.download {
  margin-left: calc(16 * var(--rpx));
}

.header-bar .action-icon {
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
}

.header-bar .badge {
  position: absolute;
  top: calc(-6 * var(--rpx));
  right: calc(-4 * var(--rpx));
  min-width: calc(28 * var(--rpx));
  height: calc(28 * var(--rpx));
  padding: 0 calc(6 * var(--rpx));
  background: #FF6060;
  box-shadow: calc(1 * var(--rpx)) calc(1 * var(--rpx)) 0px 0px #1B2848;
  border: calc(2 * var(--rpx)) solid #FFFFFF;
  border-radius: calc(14 * var(--rpx));
  font-size: calc(18 * var(--rpx));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================== 游戏卡片（ss-game-card） ==================== */
.game-card {
  position: relative;
  width: 100%;
  height: calc(244 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: calc(24 * var(--rpx));
  box-sizing: border-box;
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: calc(4 * var(--rpx)) calc(4 * var(--rpx)) 0px 0px #D4C9FF;
  border: calc(4 * var(--rpx)) solid #1B2848;
  cursor: pointer;
}

.game-card .card-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(144 * var(--rpx));
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.game-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.game-card .card-icon {
  width: calc(144 * var(--rpx));
  height: calc(144 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #fff;
  flex-shrink: 0;
  z-index: 1;
  margin-right: calc(20 * var(--rpx));
  object-fit: cover;
  overflow: hidden;
}

.game-card .card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  z-index: 1;
  min-width: 0;
}

.game-card .card-name {
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
}

.game-card .card-desc {
  font-size: calc(26 * var(--rpx));
  color: #fff;
  margin-bottom: calc(30 * var(--rpx));
}

.game-card .card-play-btn {
  width: calc(120 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: #FFFFFF;
  box-shadow: calc(4 * var(--rpx)) calc(4 * var(--rpx)) 0px 0px #7C5CFF;
  border-radius: calc(116 * var(--rpx));
  border: calc(4 * var(--rpx)) solid #1B2848;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex-shrink: 0;
  margin-left: calc(16 * var(--rpx));
  margin-bottom: calc(42 * var(--rpx));
  cursor: pointer;
}

.game-card .card-play-text {
  font-size: calc(28 * var(--rpx));
  color: #1B2848;
  font-weight: 500;
}

/* ==================== 游戏列表项（ss-index-game-item） ==================== */
.game-item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));

  background: #fff;
  cursor: pointer;
}

.game-item .game-info-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}

.game-item.last-item {
  padding-bottom: calc(24 * var(--rpx));
  border-radius: 0 0 calc(24 * var(--rpx)) calc(24 * var(--rpx));
  margin-bottom: 0;
}

.game-item .game-icon {
  width: calc(112 * var(--rpx));
  height: calc(112 * var(--rpx));
  border-radius: calc(21 * var(--rpx));
  flex-shrink: 0;
  box-shadow: calc(2 * var(--rpx)) calc(4 * var(--rpx)) 0px 0px #4F7CE5;
  object-fit: cover;
  overflow: hidden;
}

.game-item .game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  min-width: 0;
}

.game-item .game-name {
  font-size: calc(30 * var(--rpx));
  color: #1B2848;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.game-item .game-desc {
  font-size: calc(24 * var(--rpx));
  color: #5C6A85;
  font-weight: 500;
}

.game-item .game-play-count {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}

.game-item .play-icon {
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
}

.game-item .play-count-text {
  font-size: calc(22 * var(--rpx));
  color: #9FA5B2;
  font-weight: 400;
}

.game-item .play-btn {
  width: calc(128 * var(--rpx));
  height: calc(64 * var(--rpx));
  background: #fff;
  border: calc(4 * var(--rpx)) solid #1F2937;
  box-shadow: 0.125rem 0.125rem 0px 0px #7C5CFF;
  border-radius: calc(32 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.game-item .play-btn-text {
  font-size: calc(28 * var(--rpx));
  color: #1F2937;
  font-weight: 500;
}

/* ==================== 年龄验证弹窗（ss-age-gate） ==================== */
.ss-age-gate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
}
.ss-age-gate.show {
  display: block;
}

.age-gate-modal {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-gate-modal .modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

.age-gate-modal .modal-content {
  position: relative;
  width: calc(690 * var(--rpx));
  z-index: 1;
}

.age-gate-modal .modal-bg {
  width: 100%;
  height: auto;
  display: block;
}

.age-gate-modal .modal-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: calc(180 * var(--rpx)) calc(30 * var(--rpx)) calc(40 * var(--rpx));
  box-sizing: border-box;
}

.age-gate-modal .modal-title-area {
  margin-bottom: calc(16 * var(--rpx));
  padding-left: calc(225 * var(--rpx));
}

.age-gate-modal .modal-title {
  font-size: calc(40 * var(--rpx));
  font-weight: 800;
  color: #1B2848;
}

.age-gate-modal .modal-title .highlight {
  color: #7C5CFF;
}

.age-gate-modal .modal-subtitle {
  display: block;
  margin-top: calc(16 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  color: #7C5CFF;
  font-weight: bold;
}

.age-gate-modal .modal-desc {
  width: calc(600 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #5C6A85;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: calc(16 * var(--rpx));
  background: #F8F2FC;
  border-radius: calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #F2E5FA;
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  box-sizing: border-box;
  margin-left: calc(14 * var(--rpx));
}

.age-gate-modal .modal-actions {
  display: flex;
  gap: calc(40 * var(--rpx));
  margin: calc(20 * var(--rpx)) auto 0;
}

.age-gate-modal .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(276 * var(--rpx));
  height: calc(78 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) 0px 0px #9FA5B2;
  border-radius: calc(96 * var(--rpx));
  box-sizing: border-box;
  font-size: calc(30 * var(--rpx));
  cursor: pointer;
}

.age-gate-modal .btn-outline {
  color: #5C6A85;
  border: calc(4 * var(--rpx)) solid #9FA5B2;
}

.age-gate-modal .btn-primary {
  background-image: url('../img/index/age-button.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  gap: calc(8 * var(--rpx));
}

.age-gate-modal .btn-icon {
  width: calc(37 * var(--rpx));
  height: calc(37 * var(--rpx));
}

/* 拒绝页 */
.age-gate-reject {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.age-gate-reject.show {
  display: flex;
}

.age-gate-reject .reject-img {
  width: calc(400 * var(--rpx));
  height: calc(400 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
}

.age-gate-reject .reject-text {
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 500;
}

/* ==================== 活动弹窗广告（ss-activity-pop） ==================== */
.activity-pop-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.activity-pop-mask.show {
  display: flex;
}

.activity-pop-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.activity-img {
  width: calc(690 * var(--rpx));
  height: calc(855 * var(--rpx));
  cursor: pointer;
  object-fit: contain;
}

.activity-close {
  margin-top: calc(30 * var(--rpx));
  width: calc(129 * var(--rpx));
  height: calc(129 * var(--rpx));
  cursor: pointer;
}

/* ==================== 广播消息弹窗（ss-broadcast-pop） ==================== */
.broadcast-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  justify-content: center;
 
  height: calc(112 * var(--rpx));
}
.broadcast-popup.show {
  display: flex;
}

.broadcast-popup__card {
  position: relative;
  width: calc(690 * var(--rpx));
  height: calc(112 * var(--rpx));
  background: #FFFFFF;
  box-shadow: 0 calc(4 * var(--rpx)) 0px 0px #4FBDDE;
  border-radius: calc(24 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(16 * var(--rpx));
  box-sizing: border-box;
  margin-top: calc(110 * var(--rpx));
  display: flex;
  align-items: center;
  cursor: pointer;
}

.broadcast-popup__icon_box {
  width: calc(68 * var(--rpx));
  height: calc(68 * var(--rpx));
  background: #4FBDDE;
  box-shadow: 0 calc(4 * var(--rpx)) 0px 0px #B6DDFF;
  border-radius: calc(18 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.broadcast-popup__icon_box.msg-bg {
  background: #7C5CFF;
  box-shadow: 0 calc(4 * var(--rpx)) 0px 0px #D4C8FF;
}
.broadcast-popup__icon_box.notic-bg {
  background: #4F7CE5;
  box-shadow: 0 calc(4 * var(--rpx)) 0px 0px #C0CFF5;
}

.broadcast-popup__icon {
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
}

.broadcast-popup__content {
  display: flex;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}

.broadcast-popup__text {
  display: flex;
  align-items: center;
  font-size: calc(24 * var(--rpx));
  color: #5C6A85;
  font-weight: 400;
}

.broadcast-popup__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: calc(12 * var(--rpx));
}

.countdown-circle {
  position: relative;
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
}

.countdown-svg {
  width: 100%;
  height: 100%;
}

.countdown-bg {
  opacity: 0.3;
}

.countdown-progress {
  transition: stroke-dashoffset 1s linear;
}

.countdown-text {
  position: absolute;
  top: calc(50% - 1 * var(--rpx));
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(20 * var(--rpx));
  font-weight: 600;
  color: #7C5DFF;
}

.close-btn {
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  cursor: pointer;
}

.close-symbol {
  font-size: calc(28 * var(--rpx));
  color: #999;
  line-height: 1;
}

@media screen and (min-width: 768px) {
  .broadcast-popup {
    width: 600px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .broadcast-popup__card {
    width: 100%;
  }
}

/* ==================== 客服悬浮球（ss-float-service） ==================== */
.float-service {
  position: fixed;
  right: calc(30 * var(--rpx));
  bottom: calc(380 * var(--rpx));
  width: calc(104 * var(--rpx));
  height: calc(104 * var(--rpx));
  z-index: 99;
  cursor: pointer;
  display: none;
}
.float-service.show {
  display: block;
}

.float-service .service-icon {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .float-service {
    right: calc(50% - 300px + 30 * var(--rpx));
  }
}

/* ==================== 购买弹窗（ss-play-modal） ==================== */
.play-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
}
.play-modal-mask.show {
  display: flex;
}

.play-modal-panel {
  background: #FFFFFF;
  border-radius: calc(40 * var(--rpx)) calc(40 * var(--rpx)) 0 0;
  padding: calc(20 * var(--rpx)) calc(32 * var(--rpx)) calc(60 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.play-modal-handle {
  width: calc(80 * var(--rpx));
  height: calc(8 * var(--rpx));
  background: #E5E7EB;
  border-radius: calc(4 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}

.play-modal-title {
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #1F2937;
  margin-bottom: calc(32 * var(--rpx));
}

.play-modal-info {
  width: 100%;
  background: #F8F9FB;
  border-radius: calc(24 * var(--rpx));
  padding: calc(32 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(32 * var(--rpx));
  box-sizing: border-box;
}

.play-modal-icon {
  width: calc(120 * var(--rpx));
  height: calc(120 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
  object-fit: cover;
}

.play-modal-name {
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #7B61FF;
  margin-bottom: calc(20 * var(--rpx));
}

.play-modal-row {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  margin-bottom: calc(8 * var(--rpx));
}
.play-modal-row:last-child {
  margin-bottom: 0;
}

.play-modal-label {
  font-size: calc(26 * var(--rpx));
  color: #6B7280;
}

.play-modal-cost {
  font-size: calc(28 * var(--rpx));
  color: #F59E0B;
  font-weight: bold;
}

.play-modal-balance {
  font-size: calc(26 * var(--rpx));
  color: #6B7280;
}
.play-modal-balance.insufficient {
  color: #EF4444;
}

.play-modal-btns {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--rpx));
  width: 100%;
}

.play-modal-btn {
  flex: 1;
  height: calc(84 * var(--rpx));
  border-radius: calc(42 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.play-modal-btn.cancel {
  background: #FFFFFF;
  border: calc(2 * var(--rpx)) solid #E5E7EB;
  color: #1F2937;
}

.play-modal-btn.confirm {
  background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
  color: #FFFFFF;
}

.play-modal-btn.confirm.recharge {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #1F2937;
}

/* 金币不足充值弹窗 */
.recharge-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.recharge-modal-mask.show {
  display: flex;
}

.recharge-modal {
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx)) calc(32 * var(--rpx));
  width: calc(600 * var(--rpx));
  max-width: 90%;
  text-align: center;
}

.recharge-modal-title {
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #1F2937;
  margin-bottom: calc(16 * var(--rpx));
}

.recharge-modal-content {
  font-size: calc(26 * var(--rpx));
  color: #6B7280;
  margin-bottom: calc(32 * var(--rpx));
  line-height: 1.6;
}

.recharge-modal-btns {
  display: flex;
  gap: calc(20 * var(--rpx));
}

.recharge-modal-btn {
  flex: 1;
  height: calc(80 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.recharge-modal-btn.cancel {
  background: #F3F4F6;
  color: #6B7280;
}

.recharge-modal-btn.confirm {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #1F2937;
}

/* ==================== 底部 tabBar ==================== */
.tab-bar {
  position: fixed;
  bottom: calc(50 * var(--rpx));
  left: 4%;
  right: 4%;
  height: calc(110 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(52 * var(--rpx));
  box-shadow: 0 0 calc(15 * var(--rpx)) calc(-1 * var(--rpx)) rgba(99, 99, 99, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 990;
}

@media screen and (min-width: 750px) {
  .tab-bar {
    width: 750px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(20 * var(--rpx));
  }
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
}

.tab-bar-icon {
  width: calc(110 * var(--rpx));
  height: calc(110 * var(--rpx));
}

.tab-bar-text {
  font-size: calc(20 * var(--rpx));
  color: #999;
  margin-top: calc(4 * var(--rpx));
}

.tab-bar-item.active .tab-bar-text {
  color: #e4c57a;
}

/* ==================== 状态栏占位 ==================== */
.status-bar {
  height: env(safe-area-inset-top, 0);
  width: 100%;
}