/* ============ VoidFall character showcase ============ */
.fcard-voidfall .fcard-media { background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--vf, #da752a) 38%, transparent) 0%, #0f0b08 68%); transition: background .6s; }
.vf-stage { --vf: #9aa6c4; position: absolute; inset: 0; outline: none; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--vf) 34%, transparent) 0%, transparent 62%); transition: background .6s; }
.vf-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--honey); }
.vf-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.vf-stage canvas:active { cursor: grabbing; }
.vf-top { position: absolute; top: 16px; left: 18px; right: 18px; display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); pointer-events: none; font-variant-numeric: tabular-nums; }
.vf-top [data-vf-count] { color: var(--ink); font-weight: 600; }
.vf-bar { position: absolute; left: 14px; right: 14px; bottom: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.vf-arrow { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,10,.72); border: 1px solid var(--line-2); color: var(--ink); transition: background .25s, color .25s, transform .25s; }
.vf-arrow:hover { background: var(--vf); color: #000; border-color: var(--vf); }
.vf-arrow:active { transform: scale(.92); }
.vf-info { text-align: center; display: grid; gap: 2px; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.vf-info b { font-family: var(--f-display); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.vf-info span { font-size: 13.5px; color: var(--ink-2); max-width: 340px; margin: 0 auto; }
.vf-info em { font-style: normal; font-size: 12px; color: var(--vf); font-weight: 600; margin-top: 2px; }
.vf-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; }
.vf-dots button { width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.25); transition: width .35s var(--ease), background .35s; padding: 0; }
.vf-dots button.on { width: 26px; background: var(--c); }
.vf-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.vf-load .bee { font-size: 42px; color: var(--vf); animation: vfspin 1s linear infinite; }
@keyframes vfspin { to { transform: rotate(360deg); } }
.vf-stage.is-loading .vf-load { opacity: 1; }
@media (max-width: 860px) {
  .fcard-voidfall .fcard-media { aspect-ratio: 4 / 5; }
  .vf-bar { left: 10px; right: 10px; bottom: 34px; gap: 8px; }
  .vf-arrow { width: 44px; height: 44px; }
  .vf-info span { font-size: 12.5px; }
}

/* ============ phone carousels ============ */
.swipe-bar { display: none; }
@media (max-width: 960px) {
  .rnd-stack, .featured {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    gap: 12px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
    scroll-padding: 0 var(--pad);
  }
  .rnd-stack::-webkit-scrollbar, .featured::-webkit-scrollbar { display: none; }
  .rnd-stack > .rnd-panel { flex: 0 0 min(86vw, 560px); scroll-snap-align: center; transform: none !important; opacity: 1 !important; }
  .featured > .fcard { flex: 0 0 min(86vw, 520px); scroll-snap-align: center; min-width: 0; }
  .featured > .fcard-voidfall { flex-direction: column; }
  .rnd-panel { padding: 18px; }
  .rnd-text h3 { font-size: 27px; }
  .rnd-text p { font-size: 14.5px; }

  .swipe-bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 0 var(--pad); }
  .rnd .swipe-bar { max-width: var(--max); margin-left: auto; margin-right: auto; }
  .swipe-dots { display: flex; gap: 6px; flex: 1; }
  .swipe-dots button { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); padding: 0; transition: width .35s var(--ease), background .35s; }
  .swipe-dots button.on { width: 24px; background: var(--honey); }
  .swipe-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .swipe-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: opacity .2s, background .2s; }
  .swipe-btn:disabled { opacity: .3; }
  .swipe-btn:not(:disabled):active { background: var(--honey); color: #000; }
  .light .swipe-bar { padding: 0; }
  .light .swipe-dots button { background: rgba(10,10,10,.18); }
  .light .swipe-dots button.on { background: var(--dark); }
  .light .swipe-count { color: rgba(10,10,10,.5); }
  .light .swipe-btn { border-color: rgba(10,10,10,.2); }
  .light .swipe-btn:not(:disabled):active { background: var(--dark); color: var(--ink); }
  /* let the work carousel bleed to the screen edges */
  .light .featured { margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); }
}
@media (max-width: 960px) {
  .rnd-stack { align-items: flex-start; }
  .rnd-panel .facts { margin-top: 0; padding-top: 22px; }
  .viz-hud { flex-wrap: nowrap; }
}
@media (max-width: 960px) { .rnd-stack, .featured { overflow-y: hidden; transition: height .45s var(--ease); } }