/* Card versions (Silver, Gold, Ultimate) and the Fuse screen (js/fuse.js). */

/* ---------- card versions ---------- */
/* A fused card keeps its tier's gem and name. Its metal takes over the rim, a mat in the same
   metal sits inside the frame, and a plate in the corner names the version. */
.card.v-silver   { --vc: #e6eef7; --vc-lo: #8793a3; --frame: linear-gradient(135deg, #f6f9fc, #7d8896 26%, #ffffff 48%, #6b7684 72%, #e6ecf3); }
.card.v-gold     { --vc: #ffd24a; --vc-lo: #a87a18; --frame: linear-gradient(135deg, #ffe58a, #9a6f14 26%, #fff6c9 48%, #a87a18 72%, #f6cf55); }
.card.v-ultimate { --vc: #ffffff; --vc-lo: #cdb8ff; --frame: linear-gradient(135deg, #ffd1f0, #b8f1ff, #fff2a8, #c9ffcf, #d9c8ff, #ffd1f0); }
.card[class*=" v-"] { --rim: .28em; }
.card[class*=" v-"] .card-front { box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .55), 0 0 1.4em color-mix(in srgb, var(--vc) 30%, transparent); }
/* Light runs round the rim of a Gold and an Ultimate. */
.card.v-silver .card-front::before { content: none; }
.card.v-gold .card-front::before, .card.v-ultimate .card-front::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; margin: -120% 0 0 -120%;
  background: conic-gradient(#ffe58a, #a87a18 12%, #fff6c9 24%, #9a6f14 38%, #ffe58a 50%, #a87a18 62%, #fff6c9 74%, #9a6f14 88%, #ffe58a);
}
.card.v-ultimate .card-front::before {
  background: conic-gradient(#ffb3e6, #9fe8ff, #fff2a8, #b6ffbf, #cdb8ff, #ffb3e6, #9fe8ff, #fff2a8, #b6ffbf, #cdb8ff, #ffb3e6);
}
/* The rim only turns on a card that is on screen (`live`, see css/style.css). */
.card.live.v-gold .card-front::before { animation-duration: 8s; }
.card.live.v-ultimate .card-front::before { animation-duration: 3.5s; }
.card-finish {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 .15em var(--vc), inset 0 0 0 .23em rgba(0, 0, 0, .6), inset 0 0 1.5em color-mix(in srgb, var(--vc) 50%, transparent);
}
.card-finish::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.v-silver .card-finish::before { background: linear-gradient(125deg, rgba(255, 255, 255, .5), transparent 28%, transparent 58%, rgba(214, 228, 245, .42)); mix-blend-mode: soft-light; }
.v-gold .card-finish::before { background: linear-gradient(150deg, rgba(255, 221, 110, .55), transparent 40%, rgba(255, 176, 46, .4)); mix-blend-mode: soft-light; }
.v-ultimate .card-finish::before { /* the whole painting under rainbow foil: a wide sheet that slides, so nothing is repainted */
  inset: auto; left: -220%; top: 0; width: 330%; aspect-ratio: 1; border-radius: 0;
  background: repeating-linear-gradient(115deg, #ff7ab8 0%, #ffd86b 9%, #7dffb0 18%, #6bd0ff 27%, #b98cff 36%, #ff7ab8 45%);
  mix-blend-mode: color-dodge; opacity: .3;
}
.card.live.v-ultimate .card-finish::before { animation: holo 1.7s linear infinite; }
@keyframes holo { to { transform: translateX(65.98%); } } /* exactly one band of the gradient along, so the loop has no seam */
.card-ver {
  position: absolute; z-index: 3; left: .7em; top: .7em; font-size: max(.98em, 8.5px); line-height: 1; padding: .38em .6em .3em;
  border-radius: .3em; font-weight: 700; color: var(--ink); text-shadow: none;
  background: linear-gradient(180deg, #fff, var(--vc) 50%, var(--vc-lo)); box-shadow: 0 .1em .4em rgba(0, 0, 0, .55), inset 0 0 0 .05em rgba(0, 0, 0, .35);
}
.v-ultimate .card-ver { background: linear-gradient(90deg, #ffb3e6, #9fe8ff, #fff2a8, #b6ffbf, #cdb8ff, #ffb3e6) 0 0 / 200% 100%; }
#fuse-show .card.live.v-ultimate .card-ver { animation: slide 3s linear infinite; } /* repaints, so only on the fusing stage (see css/style.css) */

/* ---------- the dot on a nav button ---------- */
.nav button { position: relative; }
.nav-dot { flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--gilt-hi); box-shadow: 0 0 0 2px var(--panel), 0 0 10px rgba(245, 223, 157, .7); }
@media (max-width: 899px) { .nav-dot { position: absolute; left: calc(50% + 8px); top: 5px; margin: 0; } }

/* ---------- the Fuse screen ---------- */
.fuse-ladder {
  --cw: clamp(50px, 14.5vw, 112px); display: flex; align-items: flex-start; justify-content: center; gap: clamp(4px, 1.4vw, 18px);
  margin: 26px 0 0; padding: 20px 12px 16px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
}
.fuse-step { width: var(--cw); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; line-height: 1.15; }
.fuse-step .card { cursor: default; margin-bottom: 6px; }
.fuse-step-name { font-weight: 700; font-size: clamp(.8rem, 2.8vw, 1rem); }
.fuse-step-pay { color: var(--muted); font-size: clamp(.7rem, 2.4vw, .86rem); }
.fuse-arrow { flex: none; width: clamp(14px, 3.4vw, 26px); color: var(--gilt); align-self: center; }
.fuse-ladder > .fuse-arrow { margin-top: calc(var(--cw) * .7 - 12px); align-self: flex-start; }
.fuse-arrow svg { display: block; width: 100%; }
@media (max-width: 620px) { /* the cards are too small for all their print */
  .fuse-ladder .card-tier { display: none; }
  .fuse-ladder .card-price { font-size: max(2.1em, 10.5px); }
  .fuse-ladder .card-ver { font-size: max(.9em, 7px); left: .5em; top: .5em; }
}

.fuse-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 40px 0 0; }
.fuse-head h2 { margin: 0; }
.fuse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; margin-top: 16px; }
.fuse-item {
  --cw: clamp(88px, 25vw, 104px); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 14px 18px;
  border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
}
.fuse-item .card { cursor: default; }
.fuse-item .label { text-shadow: none; }
.fuse-item .label-sub { color: var(--gilt-hi); }
.fuse-item .btn { margin-top: auto; }
.fuse-pair { display: flex; align-items: center; gap: 14px; }
/* the copies about to be fused sit in a small stack */
.fuse-from { position: relative; }
.fuse-from::before, .fuse-from::after {
  content: ''; position: absolute; inset: 0; border-radius: calc(var(--cw) / 16 * .9); background: #2a0d10;
  box-shadow: inset 0 0 0 1px rgba(217, 180, 90, .5), 0 4px 10px rgba(0, 0, 0, .5);
}
.fuse-from::before { transform: rotate(-7deg) translate(-6%, 1%); }
.fuse-from::after { transform: rotate(6deg) translate(6%, 2%); }
.fuse-from .card { z-index: 1; }
.fuse-to .card { filter: saturate(.8) brightness(.78); }
.fuse-empty {
  margin-top: 16px; padding: 22px 20px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; color: #e6d7c2; line-height: 1.45;
}
.fuse-empty p { flex: 1 1 300px; max-width: 60ch; }

/* ---------- the moment it happens ---------- */
#fuse-show { --vc: #fff; padding: 20px 16px max(26px, env(safe-area-inset-bottom)); gap: 14px; overflow-y: auto; }
.fuse-stage { position: relative; flex: 1 0 auto; width: 100%; min-height: 0; display: grid; place-items: center; --cw: min(46vw, 250px, 36vh); }
.fuse-trio { position: relative; width: var(--cw); aspect-ratio: 5 / 7; cursor: pointer; }
.fuse-trio .card {
  position: absolute; inset: 0; transform: translateX(calc(var(--i) * 62%)) rotate(calc(var(--i) * 7deg)) scale(.8);
  transition: transform .56s cubic-bezier(.6, 0, .9, .4), filter .56s ease-in; animation: fuse-in .34s var(--ease) both;
}
@keyframes fuse-in { from { opacity: 0; transform: translateX(calc(var(--i) * 150%)) rotate(calc(var(--i) * 16deg)) scale(.6); } }
.fuse-trio.merge .card { transform: scale(.9); filter: brightness(2.2) saturate(.4); }
.fuse-one { display: grid; place-items: center; }
.fuse-many {
  --cw: clamp(84px, 24vw, 132px); width: min(100%, 900px); display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; padding: 12px 0;
}
.fuse-many .card { animation: fuse-pop .42s var(--ease) both; animation-delay: calc(var(--k) * 45ms); }
@keyframes fuse-pop { from { opacity: 0; transform: translateY(18px) scale(.7); } }
.fuse-glow {
  position: absolute; left: 50%; top: 42%; width: 130vmin; height: 130vmin; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vc) 38%, transparent), transparent);
}
.fuse-glow.on { opacity: .75; }
.fuse-stamp {
  position: absolute; left: 0; right: 0; top: 3%; text-align: center; white-space: nowrap; pointer-events: none; opacity: 0;
  font-size: clamp(3rem, 15vw, 10rem); font-weight: 700; line-height: 1; color: var(--vc);
}
.fuse-stamp.go { animation: stamp 2.4s cubic-bezier(.15, .9, .2, 1) both; }
#fuse-show.rainbow .fuse-stamp.go { animation: stamp 2.4s cubic-bezier(.15, .9, .2, 1) both, hue 1.1s linear infinite; color: #ff9fd6; }
#fuse-show.rainbow .fuse-glow { animation: hue 1.1s linear infinite; --vc: #ff9fd6; }
.fuse-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; background: radial-gradient(circle, #fff, color-mix(in srgb, var(--vc) 60%, transparent) 40%, transparent 78%); }
.fuse-flash.go { animation: flash .7s ease-out; --flash: .7; }
.fuse-foot { position: relative; z-index: 2; flex: none; min-height: 138px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fuse-text h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
.fuse-text p { color: #e6d7c2; max-width: 46ch; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .fuse-trio .card, .fuse-many .card { animation: none; }
}