/* RKM Vault · "Open the three doors" referral card.
   Drop-in: load after app-styles-current.css (uses its tokens and .info-card/.label/.field/.link-btn/.fine-print). */
rkm-three-doors { display: block; container: td / inline-size; }
.td-card { position: relative; }
.td-card .td-ic { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.td-card .link-btn .td-ic { width: 15px; height: 15px; fill: none; }
.td-card .td-ic-brass { width: 17px; height: 17px; stroke: none; filter: drop-shadow(0 1px .5px rgba(42,32,24,.25)); }
.td-dial-n .td-ic-brass { width: 26px; height: 26px; }
.td-door.is-open .td-cap-state .td-ic-brass { color: inherit; }
.td-card :is(button, a, input):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.td-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.td-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.td-head .label { color: var(--gold); }
.td-round { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-brown); font-variant-numeric: lining-nums tabular-nums; }
.td-urgent .td-round { color: var(--error); }

/* ---------- Doors ---------- */
.td-doors { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 28px; padding: 0; overflow-x: clip; overflow-clip-margin: 24px; }
.td-door { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.td-vault { position: relative; width: 82%; aspect-ratio: 1; container-type: inline-size; }
.td-frame {
  position: absolute; inset: 0; border-radius: 50%; perspective: 420px;
  background: radial-gradient(circle at 50% 32%, #6B5744 0%, #4A3B2D 45%, #2A2018 100%);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 0 0 3px var(--beige), 0 0 0 4px rgba(154,122,88,.5), 0 16px 22px -14px rgba(42,32,24,.75);
}
.td-studs, .td-art, .td-wheel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.td-recess { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #2E241B 0%, #1E1711 70%, #140F0B 100%); box-shadow: inset 0 3px 8px rgba(0,0,0,.6); }
.td-glow { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 50% 46%, #FFF6E4 0%, #F1DDB8 24%, #D4B286 50%, #9A7A58 76%, #5C4A3A 100%); box-shadow: inset 0 4px 10px rgba(42,32,24,.55); }
.td-prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; color: var(--espresso-deep); text-align: center; }
.td-prize b { font-family: var(--serif); font-weight: 500; font-size: 30cqi; line-height: .9; font-variant-numeric: lining-nums tabular-nums; }
.td-prize span { font-size: clamp(7px, 7.5cqi, 10px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: 3cqi; }
.td-leaf { position: absolute; inset: 8%; border-radius: 50%; transform-origin: 0 50%; transform-style: preserve-3d; }
.td-face, .td-back { position: absolute; inset: 0; border-radius: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.td-face {
  background: radial-gradient(circle at 36% 30%, #F0DDBA 0%, #D6B88D 22%, #BE9A70 48%, #A3815C 72%, #7E6247 100%);
  box-shadow: inset 0 1px 1px rgba(255,248,232,.7), inset 0 -2px 4px rgba(61,48,36,.45), 0 2px 4px rgba(20,15,11,.5);
}
.td-back { transform: rotateY(180deg); background: repeating-radial-gradient(circle at 50% 50%, transparent 0 9%, rgba(61,48,36,.25) 9% 9.8%), radial-gradient(circle at 60% 40%, #A88762, #7E6247 60%, #5C4A3A); box-shadow: inset 0 0 0 3px rgba(61,48,36,.4); }
.td-wheel { transform-origin: 50% 50%; }
.td-hub {
  position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 30%, #F6E7CB, #D2B287 45%, #A3815C 100%);
  box-shadow: 0 1px 2px rgba(42,32,24,.55), inset 0 -1px 1px rgba(61,48,36,.4), inset 0 1px 0 rgba(255,250,236,.8);
}
.td-num { font-family: var(--serif); font-weight: 600; font-size: 19cqi; line-height: 1; color: #6E5640; letter-spacing: .02em; transform: translateY(-.04em); text-shadow: 0 1px 0 rgba(255,246,226,.75), 0 -1px 0 rgba(61,48,36,.35); }
.td-dust { position: absolute; inset: 0; pointer-events: none; }
.td-dust i { position: absolute; left: 50%; top: 52%; width: 3px; height: 3px; border-radius: 50%; background: #F6E7CB; opacity: 0; box-shadow: 0 0 5px rgba(241,221,184,.9); }

/* the next door to open wears a slow-turning dial ring */
.td-door.is-next .td-vault::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed var(--gold); animation: td-turn 80s linear infinite; transition: opacity .6s; }
.td-door.is-next.td-wait .td-vault::after { opacity: 0; }

/* once open, the leaf is gone: a swung leaf would be clipped at the column edge and look half-drawn */
.td-door.is-open .td-leaf { transform: translateZ(6px) rotateY(-104deg); opacity: 0; }
.td-door.is-open .td-wheel { transform: rotate(240deg); }
.td-door.is-open .td-glow, .td-door.is-open .td-prize { opacity: 1; }

/* opening: wheel spins, bolts give, door swings, light comes up */
.td-door.is-animating .td-wheel { animation: td-spin .9s cubic-bezier(.45,0,.25,1) both; }
.td-door.is-animating .td-hub { animation: td-click .3s .85s both; }
.td-door.is-animating .td-leaf { animation: td-swing 1.3s .95s cubic-bezier(.55,0,.2,1) both; }
.td-door.is-animating .td-glow { animation: td-fade .9s 1.15s ease-out both; }
.td-door.is-animating .td-prize { animation: td-rise .7s 1.6s ease-out both; }
.td-door.is-animating .td-dust i, .td-door.is-dusting .td-dust i { animation: td-dust 1.9s calc(1.5s + var(--d)) ease-out both; }
.td-door.is-dusting .td-dust i { animation-delay: var(--d); }
.td-door.is-closing .td-leaf { animation: td-swing 1.1s cubic-bezier(.55,0,.2,1) reverse both; }
.td-door.is-closing .td-glow, .td-door.is-closing .td-prize { animation: td-fade .6s reverse both; }
.td-door.is-closing .td-wheel { animation: td-spin .8s 1.1s cubic-bezier(.45,0,.25,1) reverse both; }

@keyframes td-spin { from { transform: rotate(0); } to { transform: rotate(240deg); } }
@keyframes td-click { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 45% { transform: translate(-50%,-50%) scale(.94); } }
@keyframes td-swing {
  0% { transform: translateZ(0) rotateY(0); opacity: 1; }
  14% { transform: translateZ(6px) rotateY(0); opacity: 1; }
  62% { transform: translateZ(6px) rotateY(-80deg); opacity: 1; }
  100% { transform: translateZ(6px) rotateY(-104deg); opacity: 0; }
}
@keyframes td-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes td-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes td-dust { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }
@keyframes td-turn { to { transform: rotate(360deg); } }
@keyframes td-glint { 0%, 100% { filter: none; } 50% { filter: brightness(1.16); } }

/* captions */
.td-cap { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; width: 100%; }
.td-cap-door { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--warm-brown); }
.td-cap-prize { font-family: var(--serif); font-size: 21px; line-height: 1.15; color: var(--espresso-deep); font-variant-numeric: lining-nums tabular-nums; }
.td-cap-state { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 18px; font-size: 12px; color: var(--warm-brown); overflow-wrap: anywhere; transition: opacity .3s; }
.td-door.is-open .td-cap-state { color: var(--espresso-deep); font-weight: 500; }
.td-door.is-open .td-cap-state .td-ic { color: var(--gold-dark); }
.td-door.is-next .td-cap-state { color: var(--gold-dark); }

/* ---------- Status ---------- */
.td-status { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.td-dial { position: relative; width: 96px; height: 96px; margin-bottom: 18px; }
.td-dial svg { display: block; width: 100%; height: 100%; }
.td-dial svg { filter: drop-shadow(0 6px 8px rgba(42,32,24,.28)); }
.td-dial.is-live .td-arc { stroke-dashoffset: var(--o); transition: stroke-dashoffset 1.4s cubic-bezier(.3,.7,.3,1) .2s; }
.td-urgent .td-arc { stroke: var(--error); }
.td-dial-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.td-dial-n { font-family: var(--serif); font-size: 30px; line-height: .9; color: var(--espresso-deep); font-variant-numeric: lining-nums tabular-nums; display: flex; }
.td-dial-n .td-ic { width: 22px; height: 22px; color: var(--gold-dark); stroke-width: 1.3; }
.td-urgent .td-dial-n { color: var(--error); }
/* label sits under the dial so a larger browser minimum font size can't push it into the ticks */
.td-dial-l { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-brown); }
.td-kicker { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 6px; }
.td-urgent .td-kicker { color: var(--error); }
.td-status-text { font-size: 14px; line-height: 1.6; color: var(--espresso); text-wrap: pretty; }

/* celebration */
.td-celebrate { position: relative; overflow: hidden; text-align: center; padding: 28px 22px 26px; border: 1px solid var(--gold); border-radius: 2px; background: linear-gradient(180deg, rgba(184,147,109,.12), rgba(184,147,109,0) 80%); }
.td-celebrate::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none; }
.td-celebrate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,250,236,.75) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.td-celebrate.is-reveal { animation: td-rise .8s cubic-bezier(.2,.7,.3,1) both; }
.td-celebrate.is-reveal::after { animation: td-sheen 1.6s .5s ease-in-out both; }
.td-cel-k { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-dark); }
.td-cel-h { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--espresso-deep); margin: 10px 0 8px; }
.td-cel-p { font-size: 14px; line-height: 1.6; color: var(--warm-brown); max-width: 380px; margin: 0 auto; text-wrap: pretty; }
.td-cel-p strong { color: var(--espresso-deep); }
@keyframes td-sheen { to { transform: translateX(120%); } }
.td-completed .td-celebrate { margin-bottom: 4px; }

/* trials */
.td-trials { padding: 4px 0 22px; }
.td-trials .label { margin-bottom: 8px; }
.td-pending { list-style: none; margin: 0; padding: 0; }
.td-pending li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.td-p-name { font-size: 13.5px; font-weight: 500; color: var(--espresso-deep); }
.td-p-when { grid-row: 2; font-size: 12.5px; color: var(--warm-brown); }
.td-p-door { grid-column: 2; grid-row: 1 / span 2; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); border: 1px solid var(--line); border-radius: 2px; padding: 5px 9px; white-space: nowrap; }

/* invite */
.td-invite { padding-top: 22px; border-top: 1px solid var(--line); }
.td-invite > .label { display: block; }
.td-row { margin-top: 10px; }
.td-row .field { min-width: 0; text-overflow: ellipsis; }
.td-copy { min-width: 140px; }
.td-copy.is-copied { background: var(--gold-dark); border-color: var(--gold-dark); }
.td-code-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--warm-brown); }
.td-code { font-family: var(--serif); font-size: 18px; line-height: 1.2; letter-spacing: .14em; color: var(--espresso-deep); border: 1px solid var(--gold); border-radius: 2px; padding: 1px 8px 2px 10px; font-variant-numeric: lining-nums tabular-nums; }

/* credits */
.td-credits { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.td-credits > .label { color: var(--gold); }
.td-balance { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 8px 0 20px; font-size: 14px; color: var(--espresso); }
.td-balance b { font-family: var(--serif); font-weight: 500; font-size: 42px; line-height: 1; color: var(--espresso-deep); font-variant-numeric: lining-nums tabular-nums; }
.td-balance-empty { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--warm-brown); }
.td-group + .td-group { margin-top: 18px; }
.td-group-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-brown); }
.td-group-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.td-tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.td-ticket {
  --stub: 34px; position: relative; display: grid; grid-template-columns: var(--stub) minmax(0, 1fr); min-height: 64px;
  background: #EFE5D3; color: var(--espresso-deep);
  -webkit-mask: radial-gradient(circle 6px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 6px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.td-ticket::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(154,122,88,.4); pointer-events: none; }
.td-ticket::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,250,236,.85) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.td-t-stub { display: flex; align-items: center; justify-content: center; border-right: 1px dashed rgba(154,122,88,.6); margin: 9px 0; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--gold-dark); }
.td-t-main { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 12px 10px 11px; min-width: 0; }
.td-t-main b { font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.td-t-main span { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-brown); font-variant-numeric: lining-nums tabular-nums; }
.td-ticket.is-grand { background: linear-gradient(135deg, #EAD6B2 0%, #D6B88D 55%, #C8A57E 100%); }
.td-ticket.is-grand::before { border-color: rgba(92,74,58,.45); }
.td-ticket.is-grand .td-t-stub { color: var(--espresso); border-right-color: rgba(92,74,58,.55); }
.td-ticket.is-grand .td-t-main span { color: var(--espresso); }
.td-ticket.is-used { opacity: .5; }
.td-ticket.is-used b { text-decoration: line-through; }
rkm-three-doors[hidden] { display: none; }
.td-ticket.is-hold, .td-celebrate.is-hold { opacity: 0; }
.td-ticket.is-new { animation: td-print .8s cubic-bezier(.2,.7,.3,1) both; }
.td-ticket.is-new::after { animation: td-sheen 1.2s .55s ease-in-out both; }
@keyframes td-print { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }

.td-lifetime { margin-top: 20px; font-size: 13px; color: var(--warm-brown); font-variant-numeric: lining-nums; }

/* ---------- Narrow column (phone) ---------- */
@container td (max-width: 440px) {
  .td-card.info-card { padding: 26px 20px; }
  .td-doors { gap: 8px; margin-bottom: 24px; }
  .td-vault { width: 86%; }
  .td-door { gap: 14px; }
  .td-cap-door { font-size: 9px; letter-spacing: .18em; }
  .td-cap-prize { font-size: 17px; }
  .td-cap-state { font-size: 11px; gap: 4px; }
  .td-cap-state .td-ic { width: 12px; height: 12px; }
  .td-door.is-next .td-vault::after { inset: -6px; }
  .td-status { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
  .td-dial { width: 80px; height: 80px; }
  .td-dial-n { font-size: 24px; }
  .td-dial-l { font-size: 8.5px; letter-spacing: .1em; }
  .td-status-text { font-size: 13.5px; }
  .td-tickets { grid-template-columns: minmax(0, 1fr); }
  .td-ticket { --stub: 30px; }
  .td-t-main b { font-size: 18px; }
  .td-balance b { font-size: 36px; }
  .td-cel-h { font-size: 29px; }
  .td-row { flex-direction: column; }
  .td-row .field, .td-copy { width: 100%; flex: none; }
}

/* ---------- Reduced motion: no spin or swing, light simply comes up ---------- */
.td-card[data-motion="reduced"] .td-door.is-open .td-leaf { transform: none; opacity: 0; }
.td-card[data-motion="reduced"] .td-door.is-open .td-wheel { transform: none; }
.td-card[data-motion="reduced"] .td-door .td-wheel,
.td-card[data-motion="reduced"] .td-door .td-hub,
.td-card[data-motion="reduced"] .td-door .td-dust i,
.td-card[data-motion="reduced"] .td-door .td-vault::after,
.td-card[data-motion="reduced"] .td-ticket::after,
.td-card[data-motion="reduced"] .td-celebrate::after { animation: none !important; }
.td-card[data-motion="reduced"] .td-door.is-animating .td-leaf { animation: td-fade .45s reverse both; }
.td-card[data-motion="reduced"] .td-door.is-animating .td-glow,
.td-card[data-motion="reduced"] .td-door.is-animating .td-prize { animation: td-fade .45s .1s both; }
.td-card[data-motion="reduced"] .td-door.is-closing .td-leaf { animation: td-fade .45s both; }
.td-card[data-motion="reduced"] .td-door.is-closing .td-glow,
.td-card[data-motion="reduced"] .td-door.is-closing .td-prize { animation: td-fade .45s reverse both; }
.td-card[data-motion="reduced"] .td-ticket.is-new,
.td-card[data-motion="reduced"] .td-celebrate.is-reveal { animation: td-fade .4s both; }
.td-card[data-motion="reduced"] .td-dial .td-arc { transition: none !important; }