/* ============================================================
 *  10-farewell.css — Farewell, Gift box, 360° Watch reveal
 * ============================================================ */

/* Farewell Phase A uses the same .igor-dock structure as scene-igor —
 * no additional overrides needed; see css/02-igor.css. */

/* ============ Phase B: Gift box ============ */
.gift-stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: none;
}
.gift-stage.is-shown { display: block; }

.gift-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.42) 0%,
    rgba(201, 164, 97, 0.14) 44%, transparent 74%);
  pointer-events: none;
  will-change: transform, opacity;
}

.gift-rings,
.gift-burst {
  position: absolute;
  inset: -160px;
  pointer-events: none;
}

.gift-rings {
  z-index: 4;
}

.gift-burst {
  z-index: 7;
}

.gift-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border: 2px solid rgba(255, 229, 155, 0.85);
  border-radius: 50%;
  box-shadow:
    0 0 24px rgba(255, 210, 95, 0.35),
    inset 0 0 12px rgba(255, 245, 210, 0.14);
  opacity: 0;
}

.gift-burst-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 4px;
  margin-top: -2px;
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 228, 140, 0.55) 35%,
    rgba(255, 252, 235, 1) 68%,
    rgba(255, 255, 255, 0)
  );
  filter: blur(0.6px);
  opacity: 0;
}

/* ============================================================
 *  Gift Box — ornate Velvet chest with a 3D-hinged lid
 * ============================================================ */
.gift-box {
  --gift-seam-opacity: 0;
  --gift-frame-opacity: 1;
  position: relative;
  width: 240px;
  height: 220px;
  margin: 0 auto;
  cursor: pointer;
  perspective: 1200px;
  perspective-origin: 50% 35%;
}
.gift-box-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-6deg);
}

/* Interior glow — sits behind the lid, revealed as lid hinges back */
.gift-box-interior {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 34px;
  bottom: 14px;
  transform: translateZ(-30px);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 244, 200, 0.95) 0%, rgba(255, 200, 90, 0.65) 30%, rgba(160, 90, 10, 0.75) 70%, rgba(60, 25, 0, 0.9) 100%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.gift-box-interior-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 80%;
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 240, 1) 0%, rgba(255, 220, 140, 0.7) 40%, transparent 72%);
  filter: blur(4px);
}

/* ---- Body (front, ornate) ---- */
.gift-box-body {
  position: absolute;
  inset: 30px 0 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(108, 180, 255, 0.35) 0%, transparent 45%),
    linear-gradient(180deg, var(--vr-blue-light) 0%, var(--vr-blue-mid) 50%, var(--vr-blue-deep) 100%);
  border: 2px solid var(--vr-gold);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.7),
    inset 0 0 30px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 230, 160, 0.18),
    0 0 28px rgba(201, 164, 97, 0.35);
  overflow: hidden;
  z-index: 2;
}
.gift-box-body-inner {
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 230, 160, 0.35);
  display: grid;
  place-items: center;
}
.gift-box-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.gift-box-corner.tl { top: 3px;    left: 3px; }
.gift-box-corner.tr { top: 3px;    right: 3px; }
.gift-box-corner.bl { bottom: 3px; left: 3px; }
.gift-box-corner.br { bottom: 3px; right: 3px; }
.gift-box-emblem {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--vr-gold-bright);
  text-shadow:
    0 0 12px rgba(255, 216, 122, 0.75),
    0 0 28px rgba(255, 216, 122, 0.35);
}

/* ---- Ribbon wraps on the body ---- */
.gift-box-ribbon-h {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 28px;
  margin-top: -14px;
  background: linear-gradient(180deg, var(--vr-gold-bright) 0%, var(--vr-gold) 55%, #8a5e18 100%);
  border-top: 1px solid rgba(255, 245, 220, 0.45);
  border-bottom: 1px solid rgba(255, 245, 220, 0.45);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  z-index: 3;
  transform-origin: 50% 50%;
}
.gift-box-ribbon-v {
  position: absolute;
  top: 30px; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  background: linear-gradient(90deg, #8a5e18 0%, var(--vr-gold) 45%, var(--vr-gold-bright) 100%);
  border-left: 1px solid rgba(255, 245, 220, 0.45);
  border-right: 1px solid rgba(255, 245, 220, 0.45);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
  z-index: 4;
  transform-origin: 50% 100%;
}

/* ---- 3D Hinged Lid ---- */
.gift-box-lid {
  --lid-rotate: 0deg;
  position: absolute;
  top: 0; left: -10px; right: -10px; height: 54px;
  transform-style: preserve-3d;
  /* Hinge on the back/top edge (the line where the lid meets the top of the
   * box body at the back). 50% 50% -20px pushes the pivot 20px behind the
   * lid's center so it rotates realistically like a real hinged lid. */
  transform-origin: 50% 100% -20px;
  transform: rotateX(var(--lid-rotate));
  z-index: 5;
}

.gift-box-lid-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border: 2px solid var(--vr-gold);
  overflow: hidden;
}

/* Lid outer (top) face */
.gift-box-lid-top {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 190, 255, 0.4) 0%, transparent 55%),
    linear-gradient(180deg, var(--vr-blue-pale) 0%, var(--vr-blue-mid) 100%);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.7),
    inset 0 0 18px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 230, 160, 0.18);
}
.gift-box-lid-emblem {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--vr-gold-bright);
  text-shadow: 0 0 10px rgba(255, 216, 122, 0.75);
  z-index: 2;
}

/* Lid inner (underside) face — revealed when lid tilts back */
.gift-box-lid-bottom {
  transform: rotateX(180deg);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 240, 190, 0.95) 0%, rgba(255, 200, 100, 0.7) 40%, rgba(140, 80, 10, 0.9) 100%);
  display: grid;
  place-items: center;
}
.gift-box-lid-inner-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 230, 0.85) 0%, transparent 70%);
  pointer-events: none;
}
.gift-box-lid-inner-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 216, 122, 0.4) 0deg,
    rgba(255, 240, 190, 0.1) 18deg,
    rgba(255, 216, 122, 0.4) 30deg,
    rgba(255, 240, 190, 0.1) 48deg,
    rgba(255, 216, 122, 0.4) 60deg,
    rgba(255, 240, 190, 0.1) 78deg,
    rgba(255, 216, 122, 0.4) 90deg,
    rgba(255, 240, 190, 0.1) 108deg,
    rgba(255, 216, 122, 0.4) 120deg,
    rgba(255, 240, 190, 0.1) 138deg,
    rgba(255, 216, 122, 0.4) 150deg,
    rgba(255, 240, 190, 0.1) 168deg,
    rgba(255, 216, 122, 0.4) 180deg,
    rgba(255, 240, 190, 0.1) 198deg,
    rgba(255, 216, 122, 0.4) 210deg,
    rgba(255, 240, 190, 0.1) 228deg,
    rgba(255, 216, 122, 0.4) 240deg,
    rgba(255, 240, 190, 0.1) 258deg,
    rgba(255, 216, 122, 0.4) 270deg,
    rgba(255, 240, 190, 0.1) 288deg,
    rgba(255, 216, 122, 0.4) 300deg,
    rgba(255, 240, 190, 0.1) 318deg,
    rgba(255, 216, 122, 0.4) 330deg,
    rgba(255, 240, 190, 0.1) 348deg,
    rgba(255, 216, 122, 0.4) 360deg);
  opacity: 0.7;
  pointer-events: none;
}
.gift-box-lid-inner-mark {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: #5a2e00;
  text-shadow:
    0 0 10px rgba(255, 216, 122, 0.9),
    0 0 18px rgba(255, 216, 122, 0.5);
  z-index: 2;
}

.gift-box-lid-ribbon {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  background: linear-gradient(180deg, var(--vr-gold-bright), var(--vr-gold));
  border-left: 1px solid rgba(255, 245, 220, 0.45);
  border-right: 1px solid rgba(255, 245, 220, 0.45);
  z-index: 1;
}

.gift-box-bow {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  z-index: 6;
}
.gift-box-bow-l, .gift-box-bow-r {
  position: absolute;
  top: 6px;
  width: 36px; height: 38px;
  background: linear-gradient(135deg, var(--vr-gold-bright), var(--vr-gold));
  border: 1px solid var(--vr-cream);
}
.gift-box-bow-l {
  left: 0;
  border-radius: 50% 60% 30% 50%;
  transform: rotate(-12deg);
}
.gift-box-bow-r {
  right: 0;
  border-radius: 60% 50% 50% 30%;
  transform: rotate(12deg);
}
.gift-box-bow-knot {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 22px; height: 26px;
  margin-left: -11px;
  background: linear-gradient(180deg, var(--vr-gold-bright), var(--vr-gold));
  border: 1px solid var(--vr-cream);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
}

.gift-light-beam {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px;
  height: 820px;
  margin-left: -60px;
  margin-top: -410px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 230, 160, 0.25) 18%,
    rgba(255, 216, 122, 0.75) 42%,
    rgba(255, 240, 190, 0.95) 50%,
    rgba(255, 216, 122, 0.75) 58%,
    rgba(255, 230, 160, 0.25) 82%,
    transparent 100%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity;
}

@media (max-width: 820px) {
  .gift-light-beam { display: none !important; }
}

/* Camera-flash overlay, injected by playPhaseC at the burst moment */
#gift-flash-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1300px;
  height: 1300px;
  margin: -650px 0 0 -650px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1.0) 0%,
    rgba(255, 245, 210, 0.85) 18%,
    rgba(255, 216, 122, 0.4) 40%,
    transparent 66%);
  pointer-events: none;
  opacity: 0;
  z-index: 9;
  will-change: opacity;
}

.gift-caption {
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  color: var(--vr-gold);
  font-size: 0.95rem;
  letter-spacing: 4px;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(201, 164, 97, 0.7);
}
.gift-caption::before,
.gift-caption::after {
  content: '✦';
  color: var(--vr-gold-bright);
}
.gift-caption::before { margin-right: 10px; }
.gift-caption::after { margin-left: 10px; }

/* ============ Gift confetti burst (fires when lid pops) ============ */
.gift-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 8;
}
.gift-confetti span {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform, opacity;
}
.gift-confetti span.square {
  border-radius: 1px;
}

/* ============ Phase D: Watch reveal ============ */
.watch-stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: none;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 40px);
}
.watch-stage.is-shown { display: block; }

.watch-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.42) 0%,
    rgba(201, 164, 97, 0.16) 42%, transparent 72%);
  pointer-events: none;
  will-change: transform, opacity;
}

.watch-spinner {
  position: relative;
  width: 460px;
  height: 460px;
  margin: 0 auto;
  cursor: default;
  user-select: none;
}
.watch-spinner:active { cursor: default; }
.watch-spinner::after {
  content: '';
  position: absolute;
  inset: 12% 20%;
  background: linear-gradient(115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 250, 235, 0.10) 38%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 250, 235, 0.10) 62%,
    rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: watchSheen 5.2s ease-in-out infinite;
}
@keyframes watchSheen {
  0%, 15% { transform: translateX(-20%) rotate(-10deg); opacity: 0; }
  32%     { opacity: 0.85; }
  56%     { transform: translateX(28%) rotate(-10deg); opacity: 0.9; }
  100%    { transform: translateX(28%) rotate(-10deg); opacity: 0; }
}

.watch-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.watch-reflection {
  position: absolute;
  bottom: -50px;
  left: 0; right: 0;
  height: 80px;
  background: radial-gradient(ellipse at center top,
    rgba(212, 175, 55, 0.38) 0%,
    rgba(212, 175, 55, 0.12) 42%,
    transparent 76%);
  pointer-events: none;
}

.watch-info {
  grid-area: info;
  margin-top: 6px;
  max-width: 420px;
  justify-self: center;
}
.watch-instruction {
  display: none;
  font-family: var(--font-p5-mono);
  font-size: 0.7rem;
  letter-spacing: 4px;
  color: var(--p3-cyan);
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.55);
  margin-bottom: 14px;
  opacity: 0;
}
.watch-product-name {
  font-family: var(--font-display);
  color: var(--vr-cream);
  font-size: 1.6rem;
  letter-spacing: 8px;
  text-shadow: 0 0 14px rgba(201, 164, 97, 0.6);
  opacity: 0;
}
.watch-product-subtitle {
  font-family: var(--font-display);
  color: var(--vr-gold);
  font-size: 1rem;
  letter-spacing: 6px;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  opacity: 0;
}
.watch-caption {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--vr-cream);
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-top: 14px;
  opacity: 0;
}
.watch-finish {
  margin-top: 22px;
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--vr-gold);
  background: linear-gradient(
    180deg,
    rgba(201, 164, 97, 0.2),
    rgba(10, 20, 56, 0.82)
  );
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.24),
    inset 0 0 0 1px rgba(245, 230, 200, 0.08);
  color: var(--vr-cream);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}
.watch-finish:hover {
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.34),
    rgba(18, 34, 86, 0.92)
  );
  border-color: var(--vr-gold-bright);
  box-shadow:
    0 0 24px rgba(212, 175, 55, 0.42),
    inset 0 0 0 1px rgba(245, 230, 200, 0.14);
}
.watch-finish:disabled {
  opacity: 0.55 !important;
  cursor: default;
  pointer-events: none;
}

.watch-sparkles {
  position: absolute;
  inset: -200px;
  pointer-events: none;
}
.watch-sparkles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--vr-gold-bright);
  box-shadow: 0 0 10px var(--vr-gold-bright);
  animation: sparkleDrift 4s linear infinite;
  will-change: transform, opacity;
}
/* Blue flame variant — Tartarus vibe — applied by JS to some spans */
.watch-sparkles span.flame {
  background: #6cd8ff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.7);
  animation: flameDrift 5.5s linear infinite;
}

html.perf-lite .gift-halo,
html.perf-lite .gift-light-beam,
html.perf-lite .watch-glow {
  opacity: 0.65 !important;
}
@keyframes sparkleDrift {
  0%   { transform: translate(0, 0) scale(0); opacity: 0; }
  20%  { transform: translate(20px, -30px) scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(120px, -300px) scale(0); opacity: 0; }
}
@keyframes flameDrift {
  0%   { transform: translate(0, 20px) scale(0); opacity: 0; }
  15%  { transform: translate(-10px, 0) scale(1.2); opacity: 1; }
  50%  { transform: translate(-30px, -160px) scale(0.9); opacity: 1; }
  100% { transform: translate(-60px, -360px) scale(0); opacity: 0; }
}

/* ============================================================
 *  Watch layout: 2-column grid (spinner + item card) on desktop
 * ============================================================ */
.watch-layout {
  display: grid;
  grid-template-columns: 460px 280px;
  grid-template-areas:
    'spinner card'
    'info card';
  gap: 16px 40px;
  align-items: center;
  margin: 0 auto;
}
.watch-spinner { grid-area: spinner; }

/* ============================================================
 *  NEW ITEM ACQUIRED banner
 * ============================================================ */
.item-acquired {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 10px 28px 12px;
  background: linear-gradient(135deg, var(--p3-blue-mid), var(--vr-blue-deep));
  border: 2px solid var(--vr-gold-bright);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.55),
    inset 0 0 0 1px rgba(245, 230, 200, 0.25);
  text-align: center;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 40px));
}
.item-acquired-label {
  font-family: var(--font-p5-mono);
  font-size: 0.62rem;
  letter-spacing: 5px;
  color: var(--vr-gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.85);
}
.item-acquired-name {
  font-family: var(--font-impact);
  font-size: 1.5rem;
  letter-spacing: 4px;
  line-height: 1.15;
  color: var(--vr-cream);
  text-shadow:
    0 0 12px rgba(212, 175, 55, 0.7),
    3px 3px 0 rgba(0, 0, 0, 0.55);
  margin-top: 2px;
  white-space: normal;
  word-break: keep-all;
  line-break: strict;
}
.item-acquired-rarity {
  font-size: 0.85rem;
  letter-spacing: 6px;
  color: var(--vr-gold-bright);
  margin-top: 3px;
  text-shadow: 0 0 10px rgba(245, 195, 0, 0.85);
}

/* ============================================================
 *  ITEM CARD — P3R-style data panel beside the watch
 * ============================================================ */
.item-card {
  grid-area: card;
  position: relative;
  padding: 20px 18px 16px;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 56, 0.88),
    rgba(5, 10, 32, 0.94)
  );
  border: 1px solid var(--vr-gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  box-shadow:
    0 0 32px rgba(212, 175, 55, 0.3),
    inset 0 0 0 1px rgba(245, 230, 200, 0.18);
  font-family: var(--font-body);
  color: var(--vr-cream);
  text-align: left;
  max-width: 320px;
}
.item-card::before {
  /* Gold top accent bar */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent, var(--vr-gold-bright), transparent);
  box-shadow: 0 0 10px var(--vr-gold-bright);
}
.item-card-header {
  font-family: var(--font-p5-mono);
  font-size: 0.58rem;
  letter-spacing: 5px;
  color: var(--p3-cyan);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
  margin-bottom: 6px;
}
.item-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 3px;
  color: var(--vr-gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(201, 164, 97, 0.3);
}
.item-card-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-p5-mono);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.item-card-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.item-card-row-label {
  color: rgba(245, 230, 200, 0.45);
}
.item-card-row-value {
  color: var(--vr-cream);
}
.item-card-section-title {
  font-family: var(--font-p5-mono);
  font-size: 0.52rem;
  letter-spacing: 3px;
  color: var(--p3-cyan);
  margin: 10px 0 6px;
  text-align: center;
}
.item-card-effect {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-p5-mono);
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: #b6f5c6;
  padding-left: 8px;
  border-left: 2px solid #44dd77;
  margin-bottom: 4px;
}
.item-card-flavor {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(245, 230, 200, 0.85);
  padding: 2px 4px 6px 10px;
  border-left: 2px solid var(--vr-gold);
}
.item-card-footnote {
  font-family: var(--font-p5-mono);
  font-size: 0.54rem;
  letter-spacing: 1.5px;
  color: rgba(245, 230, 200, 0.45);
  text-align: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 164, 97, 0.25);
}

/* ============ Phase E: Closing ============ */
.farewell-closing {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0.16), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(26, 42, 95, 0.42), transparent 56%),
    linear-gradient(180deg, #07112e 0%, #050a20 58%, #030718 100%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  overflow: hidden;
}
.farewell-closing::before,
.farewell-closing::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.farewell-closing::before {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 246, 214, 0.18) 0%, rgba(212, 175, 55, 0.08) 22%, transparent 52%);
}
.farewell-closing::after {
  background-image:
    radial-gradient(circle, rgba(212,175,55,0.55) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(212,175,55,0.35) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(108,180,255,0.22) 1px, transparent 1.5px);
  background-size: 96px 96px, 148px 148px, 220px 220px;
  background-position: 0 0, 48px 32px, 96px 96px;
  opacity: 0.46;
}
.farewell-closing.is-shown { display: flex; }
.farewell-closing-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  color: var(--vr-cream);
  font-size: 2.4rem;
  letter-spacing: 6px;
  line-height: 1.35;
  max-width: min(78vw, 760px);
  padding: 0 28px;
  text-shadow: 0 0 20px rgba(201, 164, 97, 0.7);
  text-align: center;
}

html[lang='ja'] .farewell-closing-text {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* ============================================================
 *  Velvet Room contract (Persona 3 Reload reference)
 *  An aged parchment slides up; the recipient signs with mouse
 *  or finger, then the contract seals itself and dissolves into
 *  the watch reveal.
 * ============================================================ */

.contract-stage {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 18;
  perspective: 1400px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 212, 255, 0.12), transparent 34%),
    linear-gradient(115deg, rgba(0, 0, 0, 0.18) 0 48%, rgba(0, 212, 255, 0.08) 48% 50%, transparent 50%),
    rgba(1, 6, 22, 0.16);
  overflow: hidden;
}
.contract-stage.is-shown { display: flex; }
.contract-stage.is-sealing .contract-parchment { pointer-events: none; }

.contract-stage::before,
.contract-stage::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}
.contract-stage::before {
  background:
    repeating-linear-gradient(
      112deg,
      transparent 0 26px,
      rgba(0, 212, 255, 0.045) 26px 28px,
      transparent 28px 54px
    );
  opacity: 0.8;
  animation: contract-scan-drift 12s linear infinite;
}
.contract-stage::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(0, 212, 255, 0.08) 36.2% 36.8%, transparent 37%),
    radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(212, 175, 55, 0.09) 52.2% 52.8%, transparent 53%);
  opacity: 0.85;
  animation: contract-orbit-turn 46s linear infinite;
}
@keyframes contract-scan-drift {
  to { transform: translate3d(-54px, 0, 0); }
}
@keyframes contract-orbit-turn {
  to { transform: rotate(360deg); }
}

.contract-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmin;
  height: 120vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(0, 212, 255, 0.30) 0%,
    rgba(48, 80, 168, 0.18) 34%,
    rgba(212, 175, 55, 0.08) 48%,
    transparent 72%);
  filter: blur(30px);
  animation: contract-aura-pulse 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes contract-aura-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
}

.contract-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96vmin;
  height: 96vmin;
  transform: translate(-50%, -50%);
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(0, 212, 255, 0.06) 0deg 5deg,
      transparent 5deg 17deg),
    repeating-radial-gradient(circle,
      transparent 0 44px,
      rgba(212, 175, 55, 0.055) 45px 46px,
      transparent 47px 92px);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: contract-rays-spin 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes contract-rays-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.contract-parchment {
  --contract-cyan: #00d4ff;
  --contract-cyan-soft: rgba(0, 212, 255, 0.42);
  --contract-cream: #e8fbff;
  position: relative;
  z-index: 1;
  width: min(720px, 90vw);
  max-height: 88vh;
  padding: 38px 46px 34px;
  background:
    linear-gradient(135deg, rgba(0, 212, 255, 0.16) 0 12%, transparent 12.2%),
    radial-gradient(circle at 18% 10%, rgba(108, 216, 255, 0.26), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(212, 175, 55, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(10, 32, 86, 0.96), rgba(3, 10, 34, 0.98));
  color: var(--contract-cream);
  border: 1px solid rgba(0, 212, 255, 0.72);
  border-radius: 0;
  clip-path: polygon(0 18px, 18px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 34px 100%, 0 calc(100% - 34px));
  box-shadow:
    0 0 0 1px rgba(232, 251, 255, 0.16) inset,
    0 0 0 4px rgba(0, 212, 255, 0.10),
    0 28px 88px rgba(0, 0, 0, 0.78),
    0 0 72px rgba(0, 212, 255, 0.24),
    0 0 26px rgba(212, 175, 55, 0.18);
  transform-origin: 50% 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contract-parchment::before,
.contract-parchment::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.78), rgba(255, 226, 132, 0.75), transparent);
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.55);
  opacity: 0.95;
  pointer-events: none;
}
.contract-parchment::before { top: 12px; }
.contract-parchment::after  { bottom: 12px; }

.contract-parchment-grain {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.045) 1px, transparent 1px),
    repeating-linear-gradient(115deg, transparent 0 18px, rgba(232, 251, 255, 0.035) 18px 19px),
    radial-gradient(ellipse at 76% 24%, rgba(212, 175, 55, 0.09) 0%, transparent 48%);
  background-size: 24px 24px, 24px 24px, auto, auto;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.92;
}

.contract-parchment-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background:
    linear-gradient(90deg, rgba(0, 212, 255, 0), rgba(0, 212, 255, 0.22), rgba(212, 175, 55, 0.18), rgba(0, 212, 255, 0)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(232, 251, 255, 0.12) 22px 24px);
  pointer-events: none;
  filter: blur(0.1px);
  opacity: 0.76;
}
.contract-parchment-edge--top    { top: 0; }
.contract-parchment-edge--bottom { bottom: 0; transform: scaleY(-1); }

.contract-seal {
  position: absolute;
  right: 24px;
  top: 20px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  color: #e8fbff;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.18), transparent 58%),
    radial-gradient(circle, rgba(2, 12, 42, 0.88), rgba(2, 8, 28, 0.16) 68%);
  border: 1px solid rgba(0, 212, 255, 0.54);
  border-radius: 50%;
  box-shadow:
    0 0 22px rgba(0, 212, 255, 0.35),
    inset 0 0 18px rgba(0, 212, 255, 0.16);
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  opacity: 0.96;
  z-index: 1;
}
.contract-seal::before,
.contract-seal::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.56);
  animation: contract-seal-spin 26s linear infinite;
}
.contract-seal::after {
  inset: 14px;
  border-style: solid;
  border-color: rgba(0, 212, 255, 0.38);
  animation-duration: 18s;
  animation-direction: reverse;
}
.contract-seal svg {
  width: 74%;
  height: 74%;
  filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.38));
}
.contract-seal text { fill: #071635; }
@keyframes contract-seal-spin {
  to { transform: rotate(360deg); }
}

.contract-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contract-kicker {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: rgba(0, 212, 255, 0.88);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.48);
  max-width: calc(100% - 96px);
}

.contract-title {
  margin: 0;
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: 0.16em;
  color: #f7fbff;
  text-shadow:
    0 0 18px rgba(0, 212, 255, 0.34),
    0 2px 0 rgba(0, 0, 0, 0.5);
  max-width: calc(100% - 98px);
}

.contract-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(0, 212, 255, 0.52);
  font-size: 14px;
}
.contract-rule > span:not(.contract-rule-mark) {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  box-shadow: 0 0 8px currentColor;
}
.contract-rule-mark { color: #d4af37; opacity: 0.92; }

.contract-body {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.65;
  color: rgba(232, 251, 255, 0.92);
  padding: 16px 18px;
  background:
    linear-gradient(90deg, rgba(0, 212, 255, 0.12), transparent 18%, transparent 82%, rgba(212, 175, 55, 0.08)),
    rgba(0, 8, 30, 0.36);
  border-left: 2px solid rgba(0, 212, 255, 0.56);
  box-shadow:
    inset 0 0 0 1px rgba(232, 251, 255, 0.06),
    0 0 20px rgba(0, 212, 255, 0.08);
}
.contract-body p {
  margin: 0 0 8px;
}
.contract-body p:last-child { margin-bottom: 0; }
.contract-body em {
  font-style: italic;
  color: #ffe28a;
}

.contract-signature-block {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contract-signature-label {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(212, 175, 55, 0.82);
  text-transform: uppercase;
}

.contract-signature-pad-wrap {
  position: relative;
  background:
    linear-gradient(rgba(0, 212, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.08) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.15), transparent 62%),
    rgba(0, 9, 34, 0.62);
  background-size: 18px 18px, 18px 18px, auto, auto;
  border: 1px solid rgba(0, 212, 255, 0.58);
  border-radius: 2px;
  height: 118px;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(0, 212, 255, 0.16);
}
.contract-signature-pad-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 48%, rgba(232, 251, 255, 0.10) 50%, transparent 52% 100%);
  background-size: 100% 18px;
  opacity: 0.34;
  pointer-events: none;
  animation: contract-pad-scan 3.2s linear infinite;
}
@keyframes contract-pad-scan {
  to { transform: translateY(18px); }
}

.contract-signature-pad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.contract-signature-line {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 251, 255, 0.76), rgba(0, 212, 255, 0.72), transparent);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.5);
  pointer-events: none;
}

.contract-signature-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;
  text-align: center;
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(232, 251, 255, 0.58);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.45);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.contract-signature-pad-wrap.is-signed .contract-signature-hint { opacity: 0; }

.contract-signature-name {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(212, 175, 55, 0.78);
  text-align: right;
  padding-right: 4px;
}

.contract-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.contract-btn {
  font-family: 'Cinzel', 'Noto Serif JP', serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 10px 22px;
  border: 1px solid rgba(0, 212, 255, 0.56);
  background: linear-gradient(180deg, rgba(13, 45, 108, 0.86), rgba(3, 12, 42, 0.92));
  color: #e8fbff;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
  box-shadow: inset 0 0 0 1px rgba(232, 251, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.contract-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.contract-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(0, 212, 255, 0.34),
    inset 0 0 0 1px rgba(232, 251, 255, 0.16);
  background: linear-gradient(180deg, rgba(18, 72, 154, 0.96), rgba(5, 24, 72, 0.96));
}
.contract-btn--sign {
  border-color: rgba(212, 175, 55, 0.88);
  color: #ffe28a;
  background: linear-gradient(180deg, rgba(82, 68, 30, 0.92), rgba(8, 28, 72, 0.94));
}
.contract-btn--sign:not(:disabled):hover {
  background: linear-gradient(180deg, rgba(120, 96, 32, 0.98), rgba(10, 42, 98, 0.98));
  color: #fff0ad;
  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.42),
    inset 0 0 0 1px rgba(255, 238, 168, 0.16);
}

.contract-stage.is-sealing .contract-seal {
  animation: contract-seal-lock 0.72s ease-out both;
}
.contract-stage.is-sealing .contract-parchment {
  box-shadow:
    0 0 0 1px rgba(232, 251, 255, 0.28) inset,
    0 28px 88px rgba(0, 0, 0, 0.78),
    0 0 110px rgba(0, 212, 255, 0.54),
    0 0 48px rgba(212, 175, 55, 0.42);
}
@keyframes contract-seal-lock {
  0%   { transform: scale(1) rotate(0deg); filter: brightness(1); }
  35%  { transform: scale(1.24) rotate(-8deg); filter: brightness(1.7); }
  100% { transform: scale(1.02) rotate(0deg); filter: brightness(1.16); }
}

@media (max-width: 640px) {
  .contract-parchment {
    padding: 30px 22px 24px;
    width: 92vw;
    max-height: 86vh;
  }
  .contract-seal {
    width: 42px;
    height: 42px;
    right: 14px;
    top: 14px;
  }
  .contract-title { letter-spacing: 0.14em; }
  .contract-body { font-size: 14px; line-height: 1.55; }
  .contract-signature-pad-wrap { height: 92px; }
  .contract-actions { justify-content: space-between; }
  .contract-btn { padding: 9px 16px; font-size: 11px; letter-spacing: 0.18em; }
}