/* ==========================================================================
   注册欢迎页 + 新手礼包弹窗
   --------------------------------------------------------------------------
   两个弹层共用一套「奶油卡 + 橘色胖按钮 + 星星徽章」的视觉，
   底色用生成好的游戏世界插画，避免一上来就是一张白纸。

   只在注册成功时出现一次，所以可以做得比日常弹窗更热闹一点：
   彩纸屑、星星、狐狸吉祥物都在这儿，游戏里别处不再复用。
   ========================================================================== */

.uw-mask, .uw-mask * { box-sizing: border-box; }

.uw-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow: auto;
  background: #8FCB63 url("welcome-bg.jpg") center / cover no-repeat;
  animation: uwFade .22s ease-out;
}
.uw-mask::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 30%, rgba(255, 255, 255, .10), rgba(22, 46, 18, .28));
  pointer-events: none;
}
.uw-mask.is-out { animation: uwFadeOut .26s ease-in forwards; }
body.uw-open { overflow: hidden; }

@keyframes uwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uwFadeOut { from { opacity: 1; } to { opacity: 0; } }

.uw-scene {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  place-items: center;
}

/* ---- 卡片 ---- */

.uw-card {
  position: relative;
  width: min(760px, 94vw);
  padding: 34px 40px 34px 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  border: 3px solid #FFE2A8;
  border-radius: 34px;
  background: #FFF8E8;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, .9) inset,
    0 26px 60px rgba(48, 34, 8, .30);
  animation: uwPop .32s cubic-bezier(.2, 1.28, .42, 1);
}

@keyframes uwPop {
  from { transform: scale(.92) translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 顶部星星徽章：骑在卡片边框上 */
.uw-badge {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(70% 70% at 38% 30%, #FFE896, #F6B72E 72%, #E89A14);
  box-shadow:
    0 0 0 6px #FFF7E2,
    0 0 0 9px rgba(255, 226, 168, .75),
    0 10px 20px rgba(180, 120, 20, .28);
  color: #fff;
}
.uw-badge svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(160, 96, 0, .25)); }
.uw-badge::before,
.uw-badge::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #FFD34D;
  transform: rotate(24deg);
}
.uw-badge::before { left: -18px; top: 8px; }
.uw-badge::after { right: -16px; top: 20px; width: 7px; height: 7px; background: #FF9AA8; }

/* ---- 狐狸 ---- */

.uw-fig {
  flex: 0 0 auto;
  width: 252px;
  display: grid;
  place-items: end center;
  align-self: stretch;
}
.uw-fig img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  object-position: bottom center;
}

/* ---- 文案 ---- */

.uw-body { position: relative; flex: 1 1 auto; min-width: 0; text-align: center; }

.uw-title {
  position: relative;
  margin: 0;
  font-size: clamp(28px, 4.2vw, 42px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .02em;
  color: #E8663D;
  text-shadow: 0 2px 0 #FFE7C6;
}

.uw-sub {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  color: #5A4630;
}
.uw-sub2 {
  margin-top: 6px;
  font-size: 14px;
  color: #8B7A60;
}

/* 彩纸屑：围着标题撒一圈，纯装饰 */
.uw-confetti { position: absolute; inset: -16px -8px auto; height: 74px; pointer-events: none; }
.uw-confetti i {
  position: absolute;
  display: block;
  width: 9px;
  height: 15px;
  border-radius: 3px;
  opacity: .9;
  transform: rotate(var(--r, 20deg));
  animation: uwFloat 3.6s ease-in-out infinite;
}
.uw-confetti i:nth-child(1) { left: 2%;  top: 6px;  background: #FFC24B; --r: -24deg; }
.uw-confetti i:nth-child(2) { left: 9%;  top: 40px; background: #FF9AA8; --r: 18deg; animation-delay: .4s; }
.uw-confetti i:nth-child(3) { left: 17%; top: 2px;  background: #7FD1AE; --r: 42deg; animation-delay: .9s; }
.uw-confetti i:nth-child(4) { right: 3%; top: 10px; background: #FF9AA8; --r: 30deg; animation-delay: .2s; }
.uw-confetti i:nth-child(5) { right: 11%; top: 44px; background: #7FB6FF; --r: -16deg; animation-delay: .7s; }
.uw-confetti i:nth-child(6) { right: 19%; top: 0;   background: #FFC24B; --r: 12deg; animation-delay: 1.2s; }

@keyframes uwFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, 20deg)); }
  50% { transform: translateY(-5px) rotate(calc(var(--r, 20deg) + 12deg)); }
}

/* ---- 按钮 ---- */

.uw-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  height: 62px;
  padding: 0 46px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFC94F 0%, #F7A222 100%);
  color: #fff;
  font: inherit;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(176, 96, 0, .35);
  box-shadow:
    0 6px 0 #D97F0C,
    0 16px 26px rgba(217, 127, 12, .32),
    inset 0 2px 0 rgba(255, 255, 255, .55);
  transition: transform .1s ease, box-shadow .1s ease, filter .16s;
}
.uw-btn:hover { filter: brightness(1.04); }
.uw-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #D97F0C, 0 8px 14px rgba(217, 127, 12, .30), inset 0 2px 0 rgba(255, 255, 255, .5);
}
.uw-btn:disabled { cursor: default; filter: saturate(.5) brightness(.95); }
.uw-btn svg { width: 22px; height: 22px; }

.uw-btn.ghost {
  background: #FFF1D6;
  color: #B4761A;
  box-shadow: 0 5px 0 #F3D9AE, inset 0 2px 0 #fff;
  text-shadow: none;
}

/* ---- 礼包卡 ---- */

.uw-card.uw-gift {
  width: min(480px, 92vw);
  padding: 40px 30px 30px;
  display: block;
  text-align: center;
}
.uw-gift .uw-badge { top: -36px; }
.uw-gift-title {
  margin: 4px 0 0;
  font-size: clamp(24px, 3.6vw, 30px);
  font-weight: 900;
  color: #E8663D;
  text-shadow: 0 2px 0 #FFE7C6;
}
.uw-gift-sub { margin-top: 7px; font-size: 13.5px; color: #8B7A60; }

.uw-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}
.uw-reward {
  position: relative;
  padding: 14px 8px 12px;
  border-radius: 18px;
  border: 2px solid #FFE7BE;
  background: linear-gradient(180deg, #FFFDF6, #FFF3DC);
  display: grid;
  justify-items: center;
  gap: 2px;
}
.uw-reward i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  border-radius: 12px;
  color: #fff;
}
.uw-reward i svg { width: 24px; height: 24px; }
.uw-reward.is-coin i { background: linear-gradient(160deg, #FFD35E, #E89A14); box-shadow: 0 3px 0 #C9800C; }
.uw-reward.is-ball i { background: linear-gradient(160deg, #FF8F72, #D9482E); box-shadow: 0 3px 0 #A93320; }
.uw-reward b { font-size: 22px; line-height: 1.1; color: #5A4630; font-variant-numeric: tabular-nums; }
.uw-reward span { font-size: 11.5px; color: #9A8768; }

.uw-note { margin-top: 14px; font-size: 11.5px; color: #A2927A; line-height: 1.5; }

.uw-card.uw-gift .uw-btn { margin-top: 18px; width: 100%; height: 56px; font-size: 19px; }

/* 领完之后的成功态 */
.uw-done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}
.uw-done .uw-done-ico {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, #8FD46B, #4EA632);
  color: #fff;
  box-shadow: 0 0 0 6px #EAF7E2;
  animation: uwPop .3s cubic-bezier(.2, 1.3, .4, 1);
}
.uw-done .uw-done-ico svg { width: 30px; height: 30px; }
.uw-done p { font-size: 13px; color: #7E6D54; }

/* ---- 窄屏 ---- */

@media (max-width: 760px) {
  .uw-mask { padding: 16px 12px; }
  .uw-card {
    width: min(440px, 100%);
    flex-direction: column;
    gap: 6px;
    padding: 34px 20px 24px;
    border-radius: 28px;
  }
  .uw-fig { margin-top: 6px; }
  .uw-badge { top: -30px; width: 62px; height: 62px; margin-left: -31px; }
  .uw-badge svg { width: 32px; height: 32px; }
  .uw-fig { width: 138px; align-self: center; }
  .uw-fig img { max-height: 156px; }
  .uw-sub { font-size: 14.5px; }
  .uw-sub2 { font-size: 12.5px; }
  .uw-btn { height: 54px; padding: 0 34px; font-size: 18px; }
  .uw-card.uw-gift { padding: 34px 20px 24px; }
  .uw-reward b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce), (max-height: 620px) {
  .uw-mask, .uw-card, .uw-done .uw-done-ico { animation: none; }
  .uw-confetti { display: none; }
}
html[data-motion="reduced"] .uw-mask,
html[data-motion="reduced"] .uw-card,
html[data-motion="reduced"] .uw-done .uw-done-ico { animation: none; }
html[data-motion="reduced"] .uw-confetti { display: none; }