html,body{margin:0;padding:0;overflow:hidden;height:100%;background:#0d1a12;}
.clickable{cursor:pointer;}
/* ---------- 抽乌龟（姆塔牌）小游戏 ---------- */
.tg { position: absolute; inset: 0; z-index: 30; }
.tg-table {
  position: absolute; inset: 0;
  background-image: radial-gradient(ellipse at 50% 40%, rgba(53,117,78,.86) 0%, rgba(34,79,53,.9) 52%, rgba(18,43,28,.95) 100%),
    url('../assets/bg/0.webp');
  background-size: cover; background-position: center;
}
.tg-table::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0,0,0,.4) 100%);
}
.tg-spine { position: absolute; inset: 0; transition: opacity .4s ease; z-index: 2; }
.tg-npchand, .tg-hand { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tg-npcinfo { position: absolute; left: 60px; top: 60px; z-index: 8; text-align: center; }
.tg-avatar {
  width: 130px; height: 130px; margin: 0 auto;
  background: center/cover no-repeat #e9ebef;
  clip-path: polygon(50% 0, 100% 26%, 100% 74%, 50% 100%, 0 74%, 0 26%);
  border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.4);
}
.tg-npcname { margin-top: 14px; font-size: 32px; color: #fff; letter-spacing: 4px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.tg-bubble {
  position: absolute; left: 240px; top: 84px; z-index: 8;
  padding: 14px 34px; background: #fffef7; border-radius: 999px;
  color: #2f333c; font-size: 32px; letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.tg-bubble::before {
  content: '';
  position: absolute; left: -16px; top: 50%; margin-top: -12px;
  border: 12px solid transparent; border-right-color: #fffef7;
}
.tg-card {
  position: absolute; width: 170px; height: 254px;
  background: center/cover no-repeat;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: left .45s ease, top .45s ease, transform .45s ease, opacity .4s ease;
  pointer-events: auto;
}
.tg-card i { border-radius: 12px; }
.tg-card.canpick { cursor: pointer; }
.tg-card.canpick:hover { box-shadow: 0 0 0 3px #f0c75e, 0 10px 26px rgba(0,0,0,.5); }
.tg-mid {
  position: absolute; left: 0; right: 0; top: 45.5%; z-index: 96;
  text-align: center; pointer-events: none;
}
.tg-msg {
  display: inline-block; padding: 12px 44px;
  background: rgba(10,12,16,.8); border-radius: 999px;
  color: #fff; font-size: 34px; letter-spacing: 3px;
  transition: opacity .3s;
}
.tg-close {
  position: absolute; right: 36px; top: 24px; z-index: 99;
  width: 72px; height: 72px; border: none; cursor: pointer;
  background: rgba(12,13,18,.66); border-radius: 50%;
  color: #fff; font-size: 38px; line-height: 70px;
}
.tg-end {
  position: absolute; inset: 0; z-index: 98;
  background: rgba(8,10,14,.72);
  display: flex; align-items: center; justify-content: center;
}
.tg-end.off { display: none; }
.tg-end-inner {
  width: 900px; text-align: center; color: #fff;
  background: rgba(15,17,23,.96);
  border: 1px solid #d8b56a; border-radius: 16px;
  padding: 54px 60px 50px;
}
.tg-end-inner i {
  display: block; width: 260px; height: 136px; margin: 0 auto 18px;
  background: center/contain no-repeat;
}
.tg-end-inner.w .tg-end-big { color: #f0c75e; }
.tg-end-inner.l .tg-end-big { color: #9aa5b8; }
.tg-end-big { font-size: 84px; letter-spacing: 22px; font-family: 'NameFont', 'GameFont'; }
.tg-end-sub { margin: 20px 0 40px; font-size: 32px; color: #cfd4dd; }
.tg-end-gem { margin: -18px 0 34px; font-size: 36px; color: #ffe9a8; letter-spacing: 3px; }
.tg-end-btns { display: flex; gap: 30px; justify-content: center; }
.tg-end-btn {
  padding: 16px 52px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #4a3d20, #241d0f);
  border: 1px solid #d8b56a; color: #f5ead2; font-size: 34px; letter-spacing: 6px;
}
.tg-end-btn:hover { filter: brightness(1.2); }