/* ====== Campaign Notice Modal ====== */
.campaign-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(.32rem, env(safe-area-inset-top))
    max(.24rem, env(safe-area-inset-right))
    max(.32rem, env(safe-area-inset-bottom))
    max(.24rem, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(8, 2, 10, .78);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  -webkit-overflow-scrolling: touch;
}

.campaign-notice-modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.campaign-notice-modal__panel {
  --campaign-notice-modal-head-offset: -.88rem;
  --campaign-notice-modal-tail-offset: -.06rem;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: min(6.4rem, calc(100vw - .48rem));
  max-width: 100%;
  /* min-height: 3.80rem; */
  max-height: min(8rem, calc(100vh - 1.08rem));
  margin: .24rem auto;
  color: #f7dfb3;
  filter: drop-shadow(0 .12rem .20rem rgba(0, 0, 0, .46));
  transform: translateY(.10rem) scale(.98);
  transition: transform .22s ease;
}

.campaign-notice-modal.is-visible .campaign-notice-modal__panel {
  transform: translateY(0) scale(1);
}

.campaign-notice-modal__panel::before,
.campaign-notice-modal__panel::after {
  position: absolute;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  content: '';
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  pointer-events: none;
}

.campaign-notice-modal__panel::before {
  top: -0.88rem;
  height: 1.03rem;
  background-image: url("../images/modal-header.png");
}

.campaign-notice-modal__panel::after {
  bottom: var(--campaign-notice-modal-tail-offset);
  height: .28rem;
  background-image: url("../images/modal-footer.png");
}

.campaign-notice-modal__middle {
  grid-area: 1 / 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: calc(0.03rem + .42rem) .48rem calc(.28rem + .18rem);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  background: url("../images/modal-middle.png") repeat-y center top / 100% auto;
  -webkit-overflow-scrolling: touch;
}

.campaign-notice-modal__middle::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.campaign-notice-modal__heading {
  position: absolute;
  top: calc(var(--campaign-notice-modal-head-offset) + 0.3rem);
  left: 50%;
  z-index: 2;
  width: 100%;
  padding: .04rem .18rem .16rem;
  margin: 0;
  color: #ffd36b;
  font-size: .32rem;
  font-weight: 700;
  line-height: .44rem;
  text-align: center;
  text-shadow: 0 .02rem .05rem rgba(0, 0, 0, .48);
  transform: translateX(-50%);
}

.campaign-notice-modal__content {
  flex: 0 0 auto;
  font-size: .24rem;
  line-height: 1.72;
  text-align: center;
  white-space: pre-line;
  word-break: break-word;
}

.campaign-notice-modal__content p {
  margin: 0 0 .24rem 0;
}

.campaign-wish-records {
  display: grid;
  gap: .02rem;
  width: 100%;
  text-align: left;
}

.campaign-wish-records__empty {
  padding: .42rem .10rem;
  color: #c99b70;
  text-align: center;
}

.campaign-rewards-table {
  width: 100%;
  margin: .02rem 0 .04rem;
  border-collapse: collapse;
  color: #e7c494;
  font-size: .20rem;
  line-height: 1.5;
  text-align: center;
}

.campaign-rewards-table th,
.campaign-rewards-table td {
  padding: .12rem .08rem;
  vertical-align: top;
  word-break: break-word;
}

.campaign-rewards-table th {
  color: #ffd36b;
  font-weight: 700;
  background: rgba(126, 43, 61, .34);
  border-bottom: 1px solid rgba(226, 186, 131, .36);
}

.campaign-rewards-table td {
  border-bottom: 1px solid rgba(226, 186, 131, .16);
}

.campaign-rewards-table td:first-child {
  color: #f1c878;
}

.campaign-rewards-table tbody tr:last-child td {
  border-bottom: 0;
}

.campaign-rules {
  text-align: left;
}

.campaign-rules__title {
  margin: 0 0 .14rem;
  color: #ffd36b;
  font-size: .28rem;
  font-weight: 700;
  line-height: .40rem;
  text-align: center;
}

.campaign-rules__list {
  padding-left: .46rem;
  padding-right: .16rem;
  margin: 0;
}

.campaign-rules__list li {
  margin: 0 0 .10rem;
  line-height: 1.72;
}

.campaign-wish-records__item {
  position: relative;
  display: grid;
  grid-template-columns: .42rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .12rem;
  min-height: .72rem;
  padding: .12rem 0;
}

.campaign-wish-records__item + .campaign-wish-records__item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: .54rem;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, rgba(226, 186, 131, .20), rgba(226, 186, 131, 0));
}

.campaign-wish-records__icon {
  display: grid;
  place-items: center;
  width: .38rem;
  height: .38rem;
  color: #6c250f;
  font-size: .20rem;
  font-weight: 700;
  line-height: .38rem;
  background: linear-gradient(145deg, #ffe28a, #ca7c3d);
  border-radius: 50%;
  box-shadow: 0 .03rem .06rem rgba(0, 0, 0, .22);
}

.campaign-wish-records__copy {
  min-width: 0;
}

.campaign-wish-records__module {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f7dfb3;
  font-size: .23rem;
  font-weight: 700;
  line-height: .30rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-wish-records__summary {
  margin: .04rem 0 0;
  overflow: hidden;
  color: #c99b70;
  font-size: .18rem;
  line-height: .26rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-wish-records__time {
  display: block;
  color: #c99b70;
  font-size: .17rem;
  line-height: .25rem;
  text-align: right;
  white-space: nowrap;
}

.campaign-notice-modal__footer {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: .10rem .12rem .02rem;
}

.campaign-notice-modal__action {
  display: inline-grid;
  place-items: center;
  min-width: 1.72rem;
  min-height: var(--size-touch-target-min, 44px);
  padding: .08rem .22rem;
  color: #6c250f;
  font-size: .22rem;
  line-height: .44rem;
  text-decoration: none;
  background: linear-gradient(#ffe78e, #efb44b);
  border: 1px solid #fff0ae;
  border-radius: .24rem;
  box-shadow: inset 0 0 .08rem rgba(255, 255, 255, .56), 0 .04rem .06rem rgba(0, 0, 0, .28);
  touch-action: manipulation;
}

.campaign-notice-modal__action.is-busy {
  pointer-events: none;
  opacity: .58;
}

.campaign-notice-modal__action--acknowledge {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.90rem;
  min-width: 2.90rem;
  height: max(.60rem, var(--size-touch-target-min, 44px));
  min-height: var(--size-touch-target-min, 44px);
  padding: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.campaign-notice-modal__action--acknowledge::before {
  display: block;
  width: 100%;
  aspect-ratio: 290 / 60;
  content: "";
  background: url("../images/acknowledge-button.png") no-repeat center / 100% 100%;
  pointer-events: none;
}

.campaign-notice-modal__close:focus-visible,
.campaign-notice-modal__action:focus-visible {
  outline: 2px solid #ffd36b;
  outline-offset: .04rem;
}

.campaign-notice-modal__close {
  position: absolute;
  top: -.58rem;
  right: -.12rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: .58rem;
  height: .58rem;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  background: url("../images/close.png") no-repeat center / .58rem .58rem;
  -webkit-tap-highlight-color: transparent;
}

body.is-campaign-notice-modal-locked {
  overflow: hidden;
}

/* ====== Bind Role Modal（twpop pop_bind 皮肤：对齐活动弹窗风格） ====== */
.twpop-from .twpop-mask {
  background: rgba(8, 2, 10, .78);
}

.twpop-main.pop_bind {
  width: min(6.4rem, calc(100vw - .48rem));
  padding: 0 .44rem calc(.26rem + .16rem);
  color: #f7dfb3;
  background: url("../images/modal-middle.png") repeat-y center top / 100% auto;
  filter: drop-shadow(0 .12rem .20rem rgba(0, 0, 0, .46));
}

.twpop-main.pop_bind::before,
.twpop-main.pop_bind::after {
  position: absolute;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  content: '';
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  pointer-events: none;
}

.twpop-main.pop_bind::before {
  top: -0.88rem;
  height: 1.03rem;
  background-image: url("../images/modal-header.png");
}

.twpop-main.pop_bind::after {
  bottom: -0.06rem;
  height: .28rem;
  background-image: url("../images/modal-footer.png");
}

.twpop-main.pop_bind .twpop-title {
  position: absolute;
  top: -0.58rem;
  left: 50%;
  width: 100%;
  padding: .04rem .18rem .16rem;
  margin: 0;
  color: #ffd36b;
  font-size: .32rem;
  font-weight: 700;
  line-height: .44rem;
  text-align: center;
  text-shadow: 0 .02rem .05rem rgba(0, 0, 0, .48);
  border-bottom: 0;
  transform: translateX(-50%);
}

.twpop-main.pop_bind .twpop-close {
  top: -.50rem;
  right: -.12rem;
  z-index: 3;
  width: .58rem;
  height: .58rem;
  background: url("../images/close.png") no-repeat center / .58rem .58rem;
}

.twpop-main.pop_bind .twpop-cont {
  padding: .34rem .04rem .06rem;
}

.twpop-main.pop_bind .twpop-from-item {
  margin-bottom: .22rem;
}

.twpop-main.pop_bind .twpop-from-label {
  flex: 0 0 auto;
  margin-right: .16rem;
  color: #ffd36b;
  font-size: .24rem;
  font-weight: 700;
  line-height: .64rem;
  text-align: right;
}

.twpop-main.pop_bind .twpop-from-bd {
  background: rgba(63, 21, 27, .55);
  border: 1px solid rgba(226, 186, 131, .45);
  border-radius: .08rem;
}

.twpop-main.pop_bind .twpop-select {
  height: .64rem;
  color: #f7dfb3;
  font-size: .24rem;
}

.twpop-main.pop_bind .twpop-select-bd::after {
  border-top-color: #e2ba83;
}

/* select2 控件同款暗色皮肤（选择器带全 select2 类名前缀，
   确保优先级高于 select2.min.css 的 #444/#999 默认色） */
.twpop-main.pop_bind .select2-container--default .select2-selection--single {
  height: .64rem;
  background: transparent;
  border: 0;
}

.twpop-main.pop_bind .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 .40rem 0 .20rem;
  color: #f7dfb3;
  font-size: .24rem;
  line-height: .64rem;
}

.twpop-main.pop_bind .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #c99b70;
}

.twpop-main.pop_bind .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: .60rem;
}

.twpop-main.pop_bind .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-top-color: #e2ba83;
}

.twpop-main.pop_bind .select2-dropdown {
  background: #3a1420;
  border: 1px solid rgba(226, 186, 131, .5);
  border-radius: .08rem;
}

.twpop-main.pop_bind .select2-results__option {
  color: #f7dfb3;
  font-size: .24rem;
}

.twpop-main.pop_bind .select2-results__option--highlighted {
  background: rgba(226, 186, 131, .25);
  color: #ffd36b;
}

.twpop-main.pop_bind .twpop-foot {
  margin-top: .26rem;
}

.twpop-main.pop_bind .twpop-btn {
  min-width: 2.60rem;
  padding: .10rem .30rem;
  color: #6c250f;
  font-size: .24rem;
  font-weight: 700;
  background: linear-gradient(#ffe78e, #efb44b);
  border: 1px solid #fff0ae;
  border-radius: .24rem;
  box-shadow: inset 0 0 .08rem rgba(255, 255, 255, .56), 0 .04rem .06rem rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: reduce) {
  .campaign-notice-modal,
  .campaign-notice-modal__panel {
    transition: none;
  }
}