/* Rover cards + the "new rover found" reveal. Sizes are stage px (1920x1080). */
:root {
  --legend: #ffc83a;       /* legendary text + achievements trophy */
  --legend-deep: #9a6a12;
  --unreal-a: #ff7af5;     /* unreal: iridescent pink -> cyan -> violet */
  --unreal-b: #8fe9ff;
  --unreal-c: #c59bff;
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- the card: a holographic data slate ---------- */
/* --rk: rank colour as "r,g,b" (for rgba), --tint: planet colour for the hologram bay */
.card { --rk: 255, 200, 58; --tint: 150, 200, 255;
  --cut: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
  position: relative; width: 560px; height: 800px; clip-path: var(--cut);
  animation: holoFlicker 5s steps(1) infinite; }
/* the rim: an outline ring only (the inside stays see-through), a band of light sweeps around it */
.card::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; clip-path: path(evenodd, 'M40 0 H560 V760 L520 800 H0 V40 Z M42 4 H556 V758 L518 796 H4 V42 Z');
  background: conic-gradient(from var(--spin), rgba(255,200,58,.3), rgba(255,214,110,.95) 12%, #fff6d0 18%, rgba(255,214,110,.95) 24%,
    rgba(255,200,58,.25) 40%, rgba(255,200,58,.18) 60%, rgba(255,214,110,.85) 78%, rgba(255,200,58,.3));
  animation: spin 6s linear infinite; }
/* hologram flicker + a rare glitch jolt */
@keyframes holoFlicker { 0%, 100% { opacity: 1; } 31% { opacity: .82; } 32% { opacity: 1; } 63% { opacity: .9; } 64% { opacity: 1; }
  86% { opacity: .7; translate: 3px 0; } 87% { opacity: 1; translate: -2px 0; } 88% { translate: 0 0; } }
.card-unreal { --rk: 143, 233, 255;
 }
.card-unreal::before { background: conic-gradient(from var(--spin), rgba(255,122,245,.95), rgba(143,233,255,.35), rgba(197,155,255,.95), rgba(255,243,166,.35), rgba(255,122,245,.95));
  animation-duration: 4s; }
.card[data-planet="mars"] { --tint: 255, 122, 70; }
.card[data-planet="space"] { --tint: 197, 155, 255; }
@keyframes spin { to { --spin: 360deg; } }

.card-frame { position: absolute; inset: 4px;
  clip-path: polygon(38px 0, 100% 0, 100% calc(100% - 38px), calc(100% - 38px) 100%, 0 100%, 0 38px);
  display: flex; flex-direction: column; padding: 26px 28px 20px; color: var(--ink); font-family: var(--font-text);
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(var(--rk), .14), transparent 70%),
    linear-gradient(165deg, rgba(var(--rk), .07) 0%, rgba(20, 40, 90, .10) 45%, rgba(var(--rk), .06) 100%);
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  box-shadow: inset 0 0 50px rgba(var(--rk), .16), inset 0 0 6px rgba(var(--rk), .35); }
/* drifting scanlines over the whole hologram */
.card-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(var(--rk), .07) 0 1px, transparent 1px 4px);
  animation: scanDrift 1.2s linear infinite; }
@keyframes scanDrift { to { background-position: 0 8px; } }
.card-unreal .card-frame { box-shadow: inset 0 0 50px rgba(197,155,255,.2), inset 0 0 6px rgba(143,233,255,.4); }
/* thin inner hairline that follows the cut */
.card-frame::before { content: ''; position: absolute; inset: 10px; pointer-events: none; padding: 1px;
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
  background: linear-gradient(rgba(var(--rk), .55), rgba(var(--rk), .15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

.card header { position: relative; margin: 0 0 16px 18px; }
.card-tag { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.card-rank { font-family: var(--font-hud); font-size: 17px; line-height: 1; padding: 6px 18px 6px 12px; color: #120c02;
  background: rgba(var(--rk), .85); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.card-unreal .card-rank { color: #140a2a; background: linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c)); }
.card-code { font-family: var(--font-hud); font-size: 16px; color: rgba(var(--rk), .85); text-shadow: 0 0 10px rgba(var(--rk), .6); letter-spacing: .08em; }
.card h3 { margin: 0; font-family: var(--font-hud); font-weight: 400; font-size: 46px; line-height: 1.02; color: #fff;
  text-shadow: -2px 0 rgba(255, 60, 120, .55), 2px 0 rgba(60, 220, 255, .55), 0 0 24px rgba(var(--rk), .8); }

/* ---- hologram bay ---- */
.card-art { position: relative; height: 360px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    radial-gradient(1.5px 1.5px at 14% 18%, rgba(255,255,255,.9) 99%, transparent), radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.7) 99%, transparent),
    radial-gradient(1.5px 1.5px at 40% 30%, rgba(255,255,255,.6) 99%, transparent), radial-gradient(1.5px 1.5px at 90% 36%, rgba(255,255,255,.8) 99%, transparent),
    radial-gradient(70% 55% at 50% 100%, rgba(var(--tint), .26), transparent 72%),
    linear-gradient(rgba(var(--tint), .02), rgba(var(--tint), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--tint), .55), inset 0 0 30px rgba(var(--tint), .2); }
/* perspective grid floor, slowly running toward the viewer */
.card-grid { position: absolute; left: -60%; right: -60%; bottom: -10px; height: 62%; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(var(--tint), .5) 2px, transparent 2px), linear-gradient(90deg, rgba(var(--tint), .5) 2px, transparent 2px);
  background-size: 44px 44px; background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: gridRun 2.4s linear infinite; }
@keyframes gridRun { to { background-position: center calc(100% + 44px); } }
/* light cone from the projector */
.card-beam { position: absolute; left: 50%; bottom: 34px; width: 92%; height: 86%; translate: -50% 0; mix-blend-mode: screen;
  background: linear-gradient(to top, rgba(var(--tint), .45), rgba(var(--tint), .04) 85%);
  clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); }
.card-pad { position: absolute; left: 50%; bottom: 22px; width: 300px; height: 34px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(var(--tint), .7) 45%, rgba(var(--tint), .15) 80%, transparent);
  box-shadow: 0 0 0 2px rgba(var(--tint), .9), 0 0 26px 4px rgba(var(--tint), .7); }
.card-art img { position: absolute; left: 5%; bottom: 40px; width: 90%; height: 74%; object-fit: contain; object-position: 50% 100%;
  image-rendering: pixelated; opacity: .9; filter: drop-shadow(0 0 12px rgba(var(--tint), .75)) brightness(1.08) saturate(.85);
  animation: holoImg 4s steps(1) infinite; }
@keyframes holoImg { 0%, 100% { translate: 0 0; opacity: .9; } 47% { translate: -4px 0; opacity: .6; } 48% { translate: 3px 0; opacity: .95; } 49% { translate: 0 0; opacity: .9; } }
/* scan sweep */
.card-scan { position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom, transparent, rgba(var(--tint), .16) 80%, rgba(255,255,255,.75) 98%, transparent);
  animation: scan 3.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes scan { 0% { translate: 0 -80px; } 70%, 100% { translate: 0 380px; } }
/* HUD corner brackets */
.card-hud { position: absolute; inset: 14px; pointer-events: none; --c: rgba(255,255,255,.75);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 24px 3px, linear-gradient(var(--c), var(--c)) 0 0 / 3px 24px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 24px 3px, linear-gradient(var(--c), var(--c)) 100% 100% / 3px 24px,
    linear-gradient(rgba(var(--tint), .9), rgba(var(--tint), .9)) 100% 0 / 10px 3px, linear-gradient(rgba(var(--tint), .9), rgba(var(--tint), .9)) 0 100% / 10px 3px;
  background-repeat: no-repeat; }
.card-missing { display: none; position: absolute; inset: 0; place-items: center; font-family: var(--font-hud); font-size: 22px; color: rgba(245,247,252,.6); }
.card-art.is-missing img { display: none; }
.card-art.is-missing .card-missing { display: grid; }

.card-id { display: flex; justify-content: space-between; gap: 12px; margin: 16px 4px 18px; font-size: 25px; color: #c3d2f0; text-shadow: 0 0 10px rgba(var(--rk), .35); }
.card-id span:first-child { color: rgb(var(--rk)); }
.card-unreal .card-id span:first-child { color: var(--unreal-b); }

/* ---- stats: slanted energy cells ---- */
.card-stats { list-style: none; margin: 0 4px; padding: 0; display: grid; gap: 14px; }
.card-stats li { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 16px; font-size: 24px; color: #e3ebff; text-shadow: 0 0 10px rgba(var(--rk), .35); }
.card-stats b { position: relative; height: 18px; transform: skewX(-24deg); background: rgba(var(--rk), .16);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 4px), transparent calc(10% - 4px) 10%); }
.card-stats b::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%);
  background: linear-gradient(90deg, rgba(var(--rk), .45), rgb(var(--rk)) 70%, #fff);
  box-shadow: 0 0 14px rgba(var(--rk), .75); }
.rv.is-hit .card-stats b::before { animation: statFill .9s .1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes statFill { from { width: 0; } }
.card-unreal .card-stats b::before { background: linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c)); box-shadow: 0 0 14px rgba(197,155,255,.7); }

.card-stats em { font-style: normal; font-family: var(--font-hud); font-size: 24px; text-align: right; color: rgb(var(--rk));
  text-shadow: 0 0 12px rgba(var(--rk), .6); }

.card footer { margin: auto 4px 0; padding-top: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  border-top: 1px solid rgba(var(--rk), .4); font-size: 20px; line-height: 1.3; color: #aebfe0; }
.card-bars { flex: none; width: 96px; height: 24px; opacity: .8; filter: drop-shadow(0 0 4px rgba(var(--rk), .7));
  background: repeating-linear-gradient(90deg, rgb(var(--rk)) 0 2px, transparent 2px 5px, rgb(var(--rk)) 5px 9px, transparent 9px 11px,
    rgb(var(--rk)) 11px 12px, transparent 12px 15px, rgb(var(--rk)) 15px 18px, transparent 18px 22px); }

.card-shine { position: absolute; inset: 0; clip-path: var(--cut); pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.26) 45%, rgba(var(--rk), .14) 52%, transparent 64%) 0 0 / 260% 100%; }

/* ---------- the reveal ---------- */
.rv { position: absolute; inset: 0; z-index: 35; overflow: hidden; }
.rv-dim { position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at 50% 50%, rgba(28,20,52,.55), rgba(0,0,0,.9) 70%); }
/* anime focus lines, jittering */
.rv-lines { position: absolute; inset: -40%; opacity: 0; transition: opacity .2s;
  background: repeating-conic-gradient(from 0deg, transparent 0 2.6deg, rgba(255,255,255,.16) 2.6deg 3.1deg, transparent 3.1deg 5.3deg, rgba(255,255,255,.08) 5.3deg 5.6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 16%, #000 42%); mask-image: radial-gradient(circle, transparent 16%, #000 42%);
  animation: jitter .24s steps(3) infinite; }
@keyframes jitter { 33% { rotate: 1.4deg; scale: 1.02; } 66% { rotate: -1deg; scale: .99; } }

/* ---- the name: one span per letter on an arch (sizes/offsets set per letter in cards.js) ---- */
.rv-name { position: absolute; left: 50%; top: 50%; display: flex; align-items: baseline; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, -50%) translate(-400px, -60px); }
.rv-name .l { display: inline-block; font-family: 'Bungee', var(--font-hud); font-size: var(--s); line-height: 1;
  translate: 0 var(--y); rotate: var(--r); margin: 0 -.01em; }
.rv-name .l-gap { width: 40px; }
.rv-name .l-in { position: relative; display: inline-block; transform-origin: 50% 100%; opacity: 0; }
/* back layer: thick ink outline + stacked 3D extrusion */
.rv-name .l-back { color: #0a0f22; -webkit-text-stroke: .16em #0a0f22;
  text-shadow: .03em .03em 0 #0a0f22, .06em .06em 0 #0a0f22, .09em .09em 0 #0a0f22, .12em .12em 0 #0a0f22, .14em .2em 0 rgba(0,0,0,.55); }
/* face layer: metal gradient on top */
.rv-name .l-face { position: absolute; left: 0; top: 0; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #fffbe6 0%, #ffe07a 30%, var(--legend) 52%, #e8901a 78%, #b8620c 100%); }
.rv-unreal .rv-name .l-face { background-image: linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c), var(--unreal-a));
  background-size: 400% 100%; background-position: calc(var(--u) * 100%) 0; }

/* letters slam in from the left one after another, stretched by speed, overshoot on landing */
.rv.is-in .rv-name .l-in { animation: letterIn .34s cubic-bezier(.2,.9,.25,1.25) calc(var(--i) * 28ms) both; }
@keyframes letterIn {
  0% { opacity: 0; transform: translateX(-1500px) skewX(28deg) scaleX(2.2); filter: blur(6px); }
  70% { opacity: 1; transform: translateX(26px) skewX(-8deg) scaleX(.9); filter: none; }
  100% { opacity: 1; transform: none; } }
/* clash: chromatic split on the letters for a moment */
.rv.is-hit .rv-name { animation: chroma .36s steps(4); }
@keyframes chroma { 0%, 60% { filter: drop-shadow(-10px 0 0 rgba(255,40,90,.85)) drop-shadow(10px 0 0 rgba(40,220,255,.85)); } 100% { filter: none; } }
/* hop wave: each letter jumps, grows and lands with a squash */
.rv.is-hop .rv-name .l-in { opacity: 1; animation: hop .5s cubic-bezier(.3,.7,.4,1) calc(var(--i) * 75ms) both; }
@keyframes hop {
  0% { transform: none; }
  30% { transform: translateY(-80px) scale(1.42) rotate(-4deg); }
  58% { transform: translateY(6px) scale(1.18, .82); }
  78% { transform: translateY(-8px) scale(.96, 1.06); }
  100% { transform: none; } }
.rv.is-hop .rv-name .l-face { animation: flashFace .5s ease-out calc(var(--i) * 75ms); }
@keyframes flashFace { 25% { filter: brightness(1.7) drop-shadow(0 0 18px rgba(255,255,255,.9)); } }
/* exit: the whole name blasts toward the camera */
.rv.is-center .rv-name { opacity: 0; transform: translate(-50%, -50%) translate(-300px, -140px) scale(2.2); filter: blur(4px);
  transition: transform .45s cubic-bezier(.5,0,.85,.35), opacity .4s, filter .4s; }

/* ---- the card rushes in from the right ---- */
.rv-card { position: absolute; left: 50%; top: 50%; perspective: 1400px; opacity: 0;
  transform: translate(-50%, -50%) translate(1500px, 0) skewX(-18deg); filter: blur(12px); }
.rv.is-card .rv-card { opacity: 1; filter: none; transform: translate(-50%, -50%) translate(400px, 30px) rotate(6deg);
  transition: transform .26s cubic-bezier(.2,.9,.3,1.3), opacity .1s, filter .26s; }

/* ---- the clash ---- */
/* shockwave ring from where name and card meet */
.rv-ring { position: absolute; left: calc(50% + 70px); top: calc(50% - 30px); width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 18px solid #fff; opacity: 0; box-shadow: 0 0 40px var(--legend), inset 0 0 30px var(--legend); }
.rv-unreal .rv-ring { box-shadow: 0 0 40px var(--unreal-a), inset 0 0 30px var(--unreal-b); }
.rv-slash { position: absolute; left: -10%; top: 50%; width: 120%; height: 38px; margin-top: -19px; opacity: 0;
  background: linear-gradient(#fff, #fff) center / 100% 40% no-repeat, var(--legend);
  clip-path: polygon(0 50%, 4% 20%, 100% 0, 97% 60%, 100% 100%, 6% 80%);
  transform: rotate(-22deg) scaleX(0); transform-origin: 0 50%; }
.rv-unreal .rv-slash { background: linear-gradient(#fff, #fff) center / 100% 40% no-repeat, linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c)); }
.rv-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

.rv-collect { position: absolute; right: 150px; top: 50%; opacity: 0; transform: translate(260px, -50%);
  font-size: 36px; padding: 22px 46px; background: var(--legend); color: #141d35; box-shadow: 0 var(--px) 0 var(--legend-deep); }
.rv-unreal .rv-collect { background: linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c)); box-shadow: 0 var(--px) 0 #6a4aa8; }
.rv-collect:active { transform: translate(0, calc(-50% + var(--px))); box-shadow: none; }

.rv.is-in .rv-dim, .rv.is-in .rv-lines { opacity: 1; }
/* impact: heavy shake with a little rotation, manga impact frame, shockwave, slash, speed-line burst */
.rv.is-hit { animation: rvShake .5s steps(7); }
.rv.is-hit .rv-flash { animation: impactFrame .38s steps(1, end); }
.rv.is-hit .rv-ring { animation: ring .55s cubic-bezier(.1,.8,.3,1); }
.rv.is-hit .rv-slash { animation: rvSlash .55s cubic-bezier(.2,.9,.3,1) forwards; }
.rv.is-hit .rv-lines { animation: jitter .2s steps(3) infinite, burst .5s ease-out; }
@keyframes rvShake { 14% { translate: -34px 14px; rotate: -.8deg; } 28% { translate: 28px -20px; rotate: .7deg; } 42% { translate: -22px 12px; rotate: -.5deg; }
  57% { translate: 16px -10px; rotate: .3deg; } 71% { translate: -10px 6px; rotate: 0deg; } 85% { translate: 5px -3px; } 100% { translate: 0 0; } }
@keyframes impactFrame { 0% { opacity: .95; background: #fff; } 20% { opacity: .85; background: #000; } 40% { opacity: .6; background: #fff; } 60%, 100% { opacity: 0; } }
@keyframes ring { 0% { opacity: 1; transform: scale(.2); border-width: 40px; } 100% { opacity: 0; transform: scale(9); border-width: 2px; } }
@keyframes burst { 0% { scale: 1.25; } 100% { scale: 1; } }
@keyframes rvSlash { 0% { opacity: 1; transform: rotate(-22deg) scaleX(0); } 40% { opacity: 1; transform: rotate(-22deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(-22deg) scaleX(1) scaleY(.1); } }
.rv:not(.is-hit) .card-stats b::before { width: 0; }
/* name blasts away, card takes the centre */
.rv.is-center .rv-card { transform: translate(-50%, -50%) scale(1.06); transition: transform .65s cubic-bezier(.3,.9,.3,1); }
.rv.is-center .rv-lines { opacity: .3; transition: opacity .8s; }
/* 4. idle: float, glow, sheen, collect button */
/* glow from the rim only (a drop-shadow would shine through the see-through hologram) */
.rv-card::before { content: ''; position: absolute; left: -40px; top: -40px; width: 640px; height: 880px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='880'%3E%3Cpath d='M80 40 H600 V800 L560 840 H40 V80 Z' fill='none' stroke='%23ffc83a' stroke-width='10'/%3E%3C/svg%3E") no-repeat; filter: blur(16px); opacity: 0; transition: opacity .6s; }
.rv-unreal .rv-card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='880'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7af5'/%3E%3Cstop offset='.5' stop-color='%238fe9ff'/%3E%3Cstop offset='1' stop-color='%23c59bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M80 40 H600 V800 L560 840 H40 V80 Z' fill='none' stroke='url(%23g)' stroke-width='10'/%3E%3C/svg%3E"); }
.rv.is-idle .rv-card::before { opacity: 1; animation: rimGlow 2.4s ease-in-out infinite alternate; }
@keyframes rimGlow { from { opacity: .55; filter: blur(14px); } to { opacity: 1; filter: blur(22px); } }
.rv.is-idle .card { animation: cardFloat 3.4s ease-in-out infinite alternate, holoFlicker 5s steps(1) infinite; }
.rv-unreal.is-idle .card { animation: cardFloat 3.4s ease-in-out infinite alternate, holoFlicker 5s steps(1) infinite; }
.rv.is-idle .card-shine { opacity: 1; animation: sheen 3.6s ease-in-out infinite; }
.rv.is-idle .rv-collect { opacity: 1; transform: translate(0, -50%); transition: transform .45s cubic-bezier(.2,.9,.3,1.2), opacity .2s; }
@keyframes cardFloat { from { transform: translateY(-12px) rotateY(-6deg) rotateZ(-.8deg); } to { transform: translateY(14px) rotateY(6deg) rotateZ(.8deg); } }
@keyframes sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: -60% 0; } }
@keyframes glowLegend {
  from { filter: drop-shadow(0 0 14px rgba(255,200,58,.75)) drop-shadow(0 0 50px rgba(255,170,30,.35)); }
  to { filter: drop-shadow(0 0 26px rgba(255,214,90,.95)) drop-shadow(0 0 90px rgba(255,170,30,.55)); } }
@keyframes glowUnreal {
  0% { filter: drop-shadow(0 0 24px var(--unreal-a)) drop-shadow(0 0 80px rgba(197,155,255,.6)); }
  33% { filter: drop-shadow(0 0 24px var(--unreal-b)) drop-shadow(0 0 80px rgba(143,233,255,.6)); }
  66% { filter: drop-shadow(0 0 24px var(--unreal-c)) drop-shadow(0 0 80px rgba(255,122,245,.6)); }
  100% { filter: drop-shadow(0 0 24px var(--unreal-a)) drop-shadow(0 0 80px rgba(197,155,255,.6)); } }
/* 5. collected: card shrinks off toward the top right */
.rv.is-out .rv-dim, .rv.is-out .rv-lines, .rv.is-out .rv-collect { opacity: 0; transition: opacity .4s; }
.rv.is-out .rv-card { opacity: 0; transform: translate(-50%, -50%) translate(720px, -440px) scale(.18);
  transition: transform .55s cubic-bezier(.5,0,.75,0), opacity .55s; }

/* ---- step 0: "New machine found" + Collect, over the scene ---- */
.rv-prompt { position: absolute; right: 150px; top: 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; transform: translate(80px, -50%); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.rv-prompt small { font-size: 28px; color: #cfd6e8; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.rv-prompt b { font-family: var(--font-hud); font-weight: 400; font-size: 52px; color: var(--ink); text-shadow: 0 var(--px) 0 rgba(0,0,0,.6); margin-bottom: 14px; }
.rv-get { font-size: 40px; padding: 24px 56px; background: var(--legend); color: #141d35; box-shadow: 0 var(--px) 0 var(--legend-deep);
  animation: getPulse 1.4s ease-in-out infinite; }
.rv-unreal .rv-get { background: linear-gradient(90deg, var(--unreal-a), var(--unreal-b), var(--unreal-c)); box-shadow: 0 var(--px) 0 #6a4aa8; }
@keyframes getPulse { 50% { filter: drop-shadow(0 0 22px rgba(255,200,58,.9)); scale: 1.04; } }
.rv.is-prompt .rv-prompt { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
/* a light dim from the right so the prompt reads, the scene stays visible */
.rv.is-prompt .rv-dim { opacity: 1; background: linear-gradient(270deg, rgba(5,7,15,.75) 0%, rgba(5,7,15,.35) 45%, rgba(5,7,15,0) 75%); }

/* ---- extra item (Voyager's Golden Record): pops out like a flipped coin, then floats on the card's corner ---- */
.rv-extra { position: absolute; right: -78px; top: -70px; z-index: 5; width: 156px; height: 156px; padding: 0;
  background: none; box-shadow: none; cursor: help; opacity: 0; pointer-events: none; }
.rv-extra:hover, .rv-extra:active { filter: none; transform: none; box-shadow: none; }
.rv-extra img { display: block; width: 100%; height: 100%; image-rendering: pixelated; border-radius: 50%;
  filter: drop-shadow(0 0 14px rgba(255, 200, 58, .75)) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.rv.is-extra .rv-extra { opacity: 1; pointer-events: auto;
  animation: coinPop 1.15s cubic-bezier(.25, .8, .35, 1) both, coinFloat 3s ease-in-out 1.15s infinite alternate; }
.rv.is-extra .rv-extra img { animation: coinSpin 1.15s cubic-bezier(.2, .7, .3, 1) both, coinShine 4s ease-in-out 1.15s infinite; }
@keyframes coinPop {
  0% { translate: -300px 420px; scale: .15; }
  45% { translate: -150px -190px; scale: 1.3; }
  72% { translate: 0 18px; scale: .92; }
  86% { translate: 0 -10px; scale: 1.04; }
  100% { translate: 0 0; scale: 1; } }
@keyframes coinSpin { from { transform: perspective(600px) rotateY(0); } to { transform: perspective(600px) rotateY(1800deg); } }
@keyframes coinFloat { from { translate: 0 -8px; rotate: -6deg; } to { translate: 0 10px; rotate: 5deg; } }
/* a slow half-turn now and then, like light catching the gold */
@keyframes coinShine { 0%, 70% { transform: perspective(600px) rotateY(0); } 85% { transform: perspective(600px) rotateY(180deg); } 100% { transform: perspective(600px) rotateY(360deg); } }
.rv.is-extra .rv-extra:hover img, .rv.is-extra .rv-extra:focus-visible img { filter: drop-shadow(0 0 22px rgba(255, 214, 90, 1)) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.rv-extra:focus-visible { outline: none; }
/* tiny hologram caption on hover / keyboard focus */
.rv-extra-tip { position: absolute; left: 50%; top: calc(100% + 14px); width: 320px; translate: -50% 6px; padding: 12px 16px 14px;
  font-family: var(--font-text); font-size: 19px; line-height: 1.35; text-align: left; color: #f3f6ff;
  background: rgba(10, 16, 36, .82); box-shadow: inset 0 0 0 1px rgba(255, 200, 58, .55), 0 0 18px rgba(255, 200, 58, .25);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .18s, translate .18s; }
.rv-extra-tip b { display: block; margin-bottom: 4px; font-family: var(--font-hud); font-weight: 400; font-size: 18px; color: var(--legend); }
.rv-extra-tip small { display: block; margin-top: 6px; font-size: 16px; color: #9fb0d6; }
.rv-extra:hover .rv-extra-tip, .rv-extra:focus-visible .rv-extra-tip { opacity: 1; translate: -50% 0; }

#stage.paused .rv, #stage.paused .rv *, #stage.paused .rv *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .rv, .rv *, .rv *::before { animation: none !important; transition-duration: .15s !important; }
  .rv-card { transform: translate(-50%, -50%) !important; filter: none; }
  .rv-name, .rv-ring, .rv-slash, .rv-flash { display: none; }
  .rv.is-extra .rv-extra { opacity: 1; }
}