/* Favorites · Ring browse (preview branch theme/ring-browse). Loaded only on /favorites.
   Everything that changes existing chrome is scoped to html[data-preview="favorites-stream"] body.fav-ring-mode,
   one full selector per comma branch. Colours come from the active theme vars (folio-lilac). Do not edit focus.js. */

html[data-preview="favorites-stream"] body.fav-ring-mode #wg-vp,
html[data-preview="favorites-stream"] body.fav-ring-mode .wg-hud,
html[data-preview="watch-grid"][data-home-3d] body.fav-ring-mode #wg-vp,
html[data-preview="watch-grid"][data-home-3d] body.fav-ring-mode .wg-hud{display: none !important}

.rg-stage{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 50% 36%;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
  background:
    radial-gradient(ellipse 46% 54% at 50% 48%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--card) 55%, transparent), transparent 75%),
    var(--bg);
}
.rg-stage[hidden]{display: none}
.rg-stage.rg-drag{cursor: grabbing}
/* parallax wrapper: ring.js eases its transform toward the pointer (Helix's .hx-tilt role);
   the ringbox inside keeps its own static backs-peek tilt. Like Helix's tilt this is a 0x0
   centre point, NOT a full-size wrapper: a full-size preserve-3d tilt makes Chrome resolve
   hit testing on the rotated cards to the wrapper itself, so side cards render but swallow
   no clicks (measured: +/-1 neighbour ~2% hittable vs ~93% as a centre point; the front
   card sits in the wrapper's own plane, which is why only it stayed clickable). The pivot
   is the stage centre either way, so the rendered scene is unchanged. */
.rg-tilt{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.rg-ringbox{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* The ring plane leans back a few degrees (with the raised perspective origin above) so
     the scene reads as seen slightly from above: far-side card backs rise and peek over the
     front arc instead of hiding behind it. The front card sits almost in the ringbox plane,
     so it stays upright and effectively unmoved. */
  transform: rotateX(-6deg);
  transform-style: preserve-3d;
}

/* static floor ellipses grounding the carousel (transform set by ring.js geo) */
.rg-floor{
  position: absolute;
  left: calc(var(--rg-r, 480px) * -1);
  top: calc(var(--rg-r, 480px) * -1);
  width: calc(var(--rg-r, 480px) * 2);
  height: calc(var(--rg-r, 480px) * 2);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  pointer-events: none;
  opacity: .55;
}
.rg-floor2{
  left: calc(var(--rg-r2, 336px) * -1);
  top: calc(var(--rg-r2, 336px) * -1);
  width: calc(var(--rg-r2, 336px) * 2);
  height: calc(var(--rg-r2, 336px) * 2);
  opacity: .35;
}

.rg-card{
  will-change: transform;
  position: absolute;
  left: calc(var(--rg-cw) / -2);
  top: calc(var(--rg-ch) / -2);
  width: var(--rg-cw);
  height: var(--rg-ch);
  transform-style: preserve-3d;
  cursor: pointer;
}
.rg-face{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.rg-front{
  display: grid;
  grid-template-rows: var(--rg-ph) 1fr;
  gap: 7px;
  padding: 0;
  background: transparent;
}
.rg-pv{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.rg-ph{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--c, var(--accent)) 34%, var(--card)), transparent 64%),
    radial-gradient(circle at 78% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--stage) 70%, var(--card));
}
/* Poster still of the real demo (assets/posters/<id>.webp, shot on the same 480×300 stage). Always under the iframe. */
.rg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  pointer-events: none;
  -webkit-user-drag: none;
}
.rg-img[hidden]{display: none}
/* Live demo: rendered at 1.6× and scaled down, so the demo composes as on a real stage.
   Transparent until loaded, then fades in over the poster, so going live / freezing never blanks the tile. */
.rg-pv iframe{
  position: absolute;
  left: 0;
  top: 0;
  width: 160%;
  height: 160%;
  border: 0;
  transform: scale(.625);
  transform-origin: 0 0;
  pointer-events: none;
  background: var(--card);
  opacity: 0;
  transition: opacity .35s ease;
}
.rg-pv iframe.rg-in{opacity: 1}
.rg-cap{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
  font: 600 12px/18px var(--font);
  color: var(--fg);
  min-width: 0;
}
.rg-cap .rg-no{
  font: 700 10px/18px var(--font);
  letter-spacing: .08em;
  color: var(--mu);
}
.rg-cap b{
  font: 700 13px/18px var(--font-d, var(--font));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rg-cap em{
  font: 600 10px/16px var(--font);
  font-style: normal;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--on-accent, #fff);
  background: var(--c, var(--accent));
  white-space: nowrap;
}
/* only cards past the front arc (edge-on / around the back) wash toward the room colour; the front arc stays crisp */
.rg-wash{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
.rg-back{
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  background:
    conic-gradient(from 210deg, rgba(255, 64, 110, .13), rgba(255, 176, 0, .13), rgba(32, 201, 120, .13), rgba(32, 132, 255, .13), rgba(150, 64, 255, .13), rgba(255, 64, 110, .13)),
    color-mix(in srgb, var(--card) 45%, var(--bg));
}
.rg-back span{
  font: 800 clamp(48px, calc(var(--rg-cw) * .32), 96px)/1 var(--font-d, var(--font));
  letter-spacing: -.04em;
  color: color-mix(in srgb, var(--fg) 13%, transparent);
}
.rg-card.rg-front-on .rg-pv{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--fg) 10%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 28px 60px -22px color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, .5));
}
.rg-card.rg-has-poster .rg-ph{opacity: 0}
.rg-remix .rg-ph::after{
  content: "今日拼接";
  position: absolute;
  left: 12px;
  bottom: 10px;
  font: 700 11px/1 var(--font);
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}

/* info + spine */
.rg-hud{
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  top: 18px;
  z-index: 3000;
  display: grid;
  gap: 4px;
  max-width: min(320px, 42vw);
  pointer-events: none;
  color: var(--fg);
}
.rg-hud .rg-hno{font: 700 11px/1 var(--font); letter-spacing: .12em; color: var(--mu)}
.rg-hud .rg-ht{font: 700 clamp(17px, 2vw, 22px)/1.2 var(--font-d, var(--font))}
.rg-hud .rg-hk{justify-self: start; font: 600 10px/18px var(--font); padding: 0 8px; border-radius: 999px; color: var(--on-accent, #fff); background: var(--c, var(--accent))}
.rg-hud .rg-hk:empty{display: none}
.rg-hud small{font: 500 11px/1.4 var(--font); color: var(--mu); margin-top: 4px}
.rg-spine{
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  top: 14%;
  bottom: 14%;
  z-index: 3000;
  width: 18px;
  cursor: ns-resize;
  touch-action: none;
}
.rg-spine::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
}
.rg-knob{
  position: absolute;
  left: 3px;
  top: 0;
  width: 12px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 70%, transparent);
}
.rg-sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}

/* flat host for the real card while focus.js has it open (no transform here: position:fixed must reach the viewport) */
.rg-host{position: fixed; z-index: 44; left: 0; top: 0}
.rg-host[hidden]{display: none}
.rg-host > .card:not(.dd-focused){width: 100%; height: 100%; margin: 0; overflow: hidden}

@media (max-width: 719px){
  .rg-hud{top: 12px; max-width: 70vw}
  .rg-hud small{display: none}
  /* Narrow strip, hard to the edge: at phone widths the right neighbour's visible
     face reaches the stage edge, and the spine's 18px box (plus touch adjustment
     around it) sits on that face -- taps meant for the card scrubbed the ring
     instead of rotating the card to the front. */
  .rg-spine{right: 2px; width: 12px}
  .rg-knob{left: 0}
}
@media (prefers-reduced-motion: reduce){
  .rg-pv iframe{transition: none}
}

/* giant faint watermark behind the ring: the front card's rank, theme-tinted */
.rg-mark{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%);
  z-index: 0;
  font: 800 min(66vh, 580px)/1 var(--font-d, var(--font));
  letter-spacing: -.05em;
  color: color-mix(in srgb, var(--accent) 6%, transparent);
  pointer-events: none;
  user-select: none;
}
.rg-ringbox{z-index: 1}