/* ==========================================================================
   Red-packet open + reveal overlay (js/redpacket.js)
   Works for BOTH room types — the 红包 (virtual) and TNG tables share this
   ceremony, only the copy differs.
   ========================================================================== */

.packet-reveal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.packet-reveal.is-in { opacity: 1; }

.packet-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(90, 12, 12, .58), rgba(0, 0, 0, .82) 70%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.packet-stage {
  position: relative;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Gives the flap's rotateX real depth instead of a flat squash. */
  perspective: 1100px;
}

/* --- envelope ------------------------------------------------------------ */

@keyframes packet-drop {
  0%   { transform: translate3d(0, -50px, 0) scale(.85) rotate(-4deg); opacity: 0; }
  60%  { transform: translate3d(0, 6px, 0) scale(1.02) rotate(1deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.packet-envelope {
  position: relative;
  width: 244px;
  height: 330px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(165deg, #e0453a 0%, #c62828 45%, #a01d18 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: packet-drop 620ms var(--ease-spring) both;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

/* Specular sheen across the card — sweeps once on open. */
.packet-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 235, 190, .34) 48%, transparent 62%);
  transform: translateX(-120%);
  z-index: 4;
  pointer-events: none;
}
.packet-envelope.is-open .packet-shine { animation: packet-shine 900ms var(--ease-out) 180ms both; }
@keyframes packet-shine {
  to { transform: translateX(120%); }
}

/* Upper flap — carries the greeting and hinges open at the top on reveal,
   uncovering the result printed on the card beneath it. */
.packet-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f2564a, #cf3128);
  border-radius: 18px 18px 46% 46% / 18px 18px 22% 22%;
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 520ms var(--ease-in-out);
  z-index: 3;
}
.packet-greeting {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  letter-spacing: .08em;
  color: rgba(255, 232, 180, .95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  margin-bottom: 14px;
}

/* Gold seal — the tap target. */
@keyframes seal-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 6px 20px rgba(0,0,0,.45), 0 0 0 0 rgba(245,196,83,.55); }
  50%      { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 6px 26px rgba(0,0,0,.5), 0 0 0 14px rgba(245,196,83,0); }
}
.packet-seal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 88px; height: 88px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 30%, #ffe9a8, #e6b23f 55%, #b8801f);
  border: 2px solid rgba(255, 240, 200, .65);
  animation: seal-breathe 1.9s var(--ease-in-out) infinite;
  transition: transform 420ms var(--ease-in-out), opacity 300ms linear;
}
.packet-seal-char {
  font-size: 34px;
  font-weight: 900;
  color: #7c2d12;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

/* Open state: seal spins out and the flap hinges back on its top edge,
   revealing the result already printed on the card. The card itself STAYS. */
.packet-envelope.is-open .packet-seal {
  animation: none;
  transform: translate(-50%, -50%) scale(0) rotate(220deg);
  opacity: 0;
}
.packet-envelope.is-open .packet-flap { transform: rotateX(-172deg); }

/* Card lifts slightly as it opens, so it reads as "handed to you". */
.packet-reveal.is-open .packet-envelope {
  transform: translateY(-8px);
  transition: transform 520ms var(--ease-spring);
}

/* --- result -------------------------------------------------------------- */

.packet-result {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 20px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
}
.packet-result.show { opacity: 1; transform: none; }

.packet-result-label { font-size: 14px; color: rgba(255, 228, 170, .82); letter-spacing: .14em; }
.packet-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff3cf, #e8b64a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 14px rgba(230, 178, 63, .4));
}
.packet-cur { font-size: 20px; }
#pk-amount { font-size: 52px; line-height: 1.1; }

@keyframes hand-stamp {
  0%   { transform: scale(1.9) rotate(-11deg); opacity: 0; }
  60%  { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.packet-hand {
  margin-top: 4px;
  padding: 5px 18px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(245, 196, 83, .6);
  background: rgba(120, 30, 20, .5);
  color: #ffd98a;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .06em;
  animation: hand-stamp 460ms var(--ease-spring) 240ms both;
}
.packet-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; color: rgba(255, 228, 170, .78); }
.packet-meta b { color: #ffd98a; font-variant-numeric: tabular-nums; }

/* Sits BELOW the card, and only appears once the card is open. */
.packet-close {
  width: auto;
  margin-top: 26px;
  padding: 0 44px;
  height: 46px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out) 260ms,
              transform var(--t-base) var(--ease-spring) 260ms;
}
.packet-reveal.is-open .packet-close { opacity: 1; transform: none; pointer-events: auto; }

/* --- falling coins ------------------------------------------------------- */

.packet-coins {
  position: absolute;
  inset: -40px -20px 0;
  pointer-events: none;
  overflow: hidden;
}
@keyframes coin-fall {
  0%   { transform: translate3d(0, -60px, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(var(--drift), 340px, 0) rotate(var(--spin)); opacity: 0; }
}
.packet-coin {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff0c2, #e0a83c 60%, #9c6c15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  animation: coin-fall 1.5s var(--ease-in-out) var(--delay) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .packet-envelope, .packet-seal, .packet-hand { animation: none !important; }
  .packet-coins { display: none; }
}

/* --- in-chat "someone grabbed" line -------------------------------------- */

.grab-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  max-width: 92%;
  /* One line — "@name 抢到 RM 45.43" wrapping mid-amount looked broken. */
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(231, 76, 60, .14);
  border: 1px solid rgba(231, 76, 60, .26);
  font-size: 13px;
  color: #f2a99f;
}
.grab-line b { color: #ffd0c7; font-variant-numeric: tabular-nums; }