/* =====================================================================
   06 · Personagens na praia — "escolha seu personagem" de fliperama,
   com gente de verdade. Uma cena fixada: seleção → 6 personagens em tela
   cheia (corte diagonal de raio entre eles) → mosaico das fotos reais.
   Tudo sob #personagens. Movimento reduzido: vira uma lista empilhada.
   ===================================================================== */
#personagens {
  --pg-bar-h: 132px;
  --pg-bev: 14px;
  --pg-top: calc(var(--hud-h) + 18px);
  --mx: 0; --my: 0;
}
#personagens .pg-stage { background: transparent; }
#personagens .pg-stage > * { position: absolute; }

/* ---------- 0 · Seleção ---------- */
#personagens .pg-select { inset: 0; z-index: 1; }
#personagens .pg-select::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 72% 58%, rgba(120, 0, 240, .28), transparent 70%),
    radial-gradient(40% 40% at 20% 30%, rgba(0, 216, 248, .08), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .55));
}
#personagens .pg-floor {
  position: absolute; left: -20%; right: -20%; bottom: 0; height: 52%; pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 0, 240, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 216, 248, .26) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(620px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 80%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .6) 35%, transparent 80%);
}
#personagens .pg-select__in {
  position: absolute; inset: 0; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding-top: calc(var(--hud-h) + 12px); padding-bottom: 28px;
}
#personagens .pg-select__copy { display: grid; justify-items: start; gap: clamp(14px, 1.6vh, 22px); }
#personagens .pg-title { font-size: clamp(48px, 6.4vw, 116px); line-height: 1.12; text-wrap: balance; }
#personagens .pg-lede { font-size: clamp(16px, .55vw + 11px, 20px); line-height: 1.55; color: #ddd8ef; max-width: 46ch; }
#personagens .pg-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
#personagens .pg-hint span { margin-right: 8px; }
#personagens .pg-hint i { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .25; animation: pg-chev 1.4s infinite; }
#personagens .pg-hint i:nth-of-type(2) { animation-delay: .18s; }
#personagens .pg-hint i:nth-of-type(3) { animation-delay: .36s; }
@keyframes pg-chev { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }

#personagens .pg-select__grid { display: grid; gap: 14px; align-content: center; }
#personagens .pg-select__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
#personagens .pg-select__head b { display: inline-flex; align-items: center; gap: 10px; color: var(--magenta); font-weight: 700; }
/* o que pisca é o "led" ao lado, não o texto (texto piscando fica ilegível a cada meio segundo) */
#personagens .pg-select__head b::before { content: ''; width: 8px; height: 8px; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pg-blink 1.1s steps(2, jump-none) infinite; }
@keyframes pg-blink { 50% { opacity: .45; } }
#personagens .pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); perspective: 900px; }
#personagens .pg-cards > li { position: relative; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
#personagens .pg-card {
  --oct: polygon(var(--pg-bev) 0, calc(100% - var(--pg-bev)) 0, 100% var(--pg-bev), 100% calc(100% - var(--pg-bev)), calc(100% - var(--pg-bev)) 100%, var(--pg-bev) 100%, 0 calc(100% - var(--pg-bev)), 0 var(--pg-bev));
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; max-height: calc((100svh - var(--hud-h) - 150px) / 2);
  padding: 2px; clip-path: var(--oct);
  background: linear-gradient(160deg, rgba(0, 216, 248, .7), rgba(120, 0, 240, .55) 50%, rgba(240, 0, 240, .7));
  transition: background .3s;
}
#personagens .pg-card__in { position: absolute; inset: 2px; overflow: hidden; background: #0a0618; clip-path: polygon(calc(var(--pg-bev) - 1px) 0, calc(100% - var(--pg-bev) + 1px) 0, 100% calc(var(--pg-bev) - 1px), 100% calc(100% - var(--pg-bev) + 1px), calc(100% - var(--pg-bev) + 1px) 100%, calc(var(--pg-bev) - 1px) 100%, 0 calc(100% - var(--pg-bev) + 1px), 0 calc(var(--pg-bev) - 1px)); }
#personagens .pg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cx, 80%) 50%; filter: saturate(1.05) brightness(.82); transition: transform .8s var(--ease-out), filter .4s; }
#personagens .pg-card__in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 1, 15, .95) 0%, rgba(5, 1, 15, .5) 30%, transparent 55%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); pointer-events: none; }
#personagens .pg-card__n { position: absolute; z-index: 2; left: 12px; top: 10px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: #fff; }
#personagens .pg-card__pick { position: absolute; z-index: 2; right: 10px; top: 9px; padding: 3px 7px; font-family: var(--f-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em; color: #000; background: var(--magenta); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .3s var(--ease-out); }
#personagens .pg-card__txt { position: absolute; z-index: 2; left: 12px; right: 10px; bottom: 10px; display: grid; gap: 3px; text-align: left; }
#personagens .pg-card__name { font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(15px, 1.25vw + 3px, 24px); line-height: 1.12; letter-spacing: .01em; color: #fff; overflow-wrap: anywhere; }
#personagens .pg-card__cat { font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
#personagens .pg-card.is-missing .pg-card__in { background: radial-gradient(90% 70% at 60% 30%, rgba(120, 0, 240, .45), #0a0618 70%); }
#personagens .pg-card.is-missing img { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  #personagens .pg-card:hover, #personagens .pg-card:focus-visible { background: linear-gradient(160deg, var(--cyan), var(--violet) 50%, var(--magenta)); }
  #personagens .pg-card:hover img, #personagens .pg-card:focus-visible img { transform: scale(1.08); filter: saturate(1.2) brightness(1); }
  #personagens .pg-card:hover .pg-card__pick, #personagens .pg-card:focus-visible .pg-card__pick { opacity: 1; transform: none; }
}
/* foco de teclado: o clip-path corta o outline, então o foco vira moldura interna */
#personagens .pg-card:focus-visible { outline: none; background: linear-gradient(160deg, #fff, var(--cyan)); }
#personagens .pg-card:focus-visible .pg-card__pick { opacity: 1; transform: none; }
#personagens .pg-pick:focus-visible { outline: none; }
#personagens .pg-pick:focus-visible::after { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 0 12px rgba(0, 216, 248, .6); }
#personagens .pg-card.is-picked { background: linear-gradient(160deg, #fff, var(--magenta)); }
#personagens .pg-card.is-picked .pg-card__pick { opacity: 1; transform: none; }
#personagens .pg-card.is-picked img { filter: saturate(1.2) brightness(1.08); }

/* ---------- 1…6 · Elenco ---------- */
#personagens .pg-cast { inset: 0; z-index: 2; }
#personagens .pg-char { position: absolute; inset: 0; overflow: hidden; background: #000; }
#personagens .pg-char__media { position: absolute; inset: -3%; translate: calc(var(--mx) * -16px) calc(var(--my) * -10px); will-change: transform; }
#personagens .pg-char__img, #personagens .pg-char__film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 62% 50%); }
/* a imagem de base é o pôster (= 1º quadro do loop): a troca imagem → filme é curta e não dobra a figura */
#personagens .pg-char__film { opacity: 0; transition: opacity .4s ease; background: transparent; }
#personagens .pg-char.is-live .pg-char__film { opacity: 1; }
#personagens .pg-char.is-missing .pg-char__media { background: radial-gradient(60% 70% at 72% 45%, rgba(120, 0, 240, .55), transparent 70%), radial-gradient(40% 40% at 80% 80%, rgba(240, 0, 240, .35), transparent 70%), #05010f; }
#personagens .pg-char.is-missing .pg-char__img { visibility: hidden; }
/* separação cromática da troca: duas cópias tingidas (sem ciano no vermelho, sem verde no magenta), somadas por tela */
#personagens .pg-ghost { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: var(--pos, 62% 50%); background-blend-mode: multiply; mix-blend-mode: screen; pointer-events: none; }
#personagens .pg-ghost--c { background-color: #00d8f8; }
#personagens .pg-ghost--m { background-color: #f000f0; }
#personagens .pg-char__veil { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 26%, rgba(0, 0, 0, .28) 46%, transparent 62%),
    linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .3) 18%, transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 20%);
}
#personagens .pg-char__copy {
  position: absolute; inset: 0; margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.6vh, 20px);
  padding-top: calc(var(--hud-h) + 30px); padding-bottom: calc(var(--pg-bar-h) + 10px);
  translate: calc(var(--mx) * 8px) calc(var(--my) * 5px);
}
#personagens .pg-char__copy > * { max-width: min(47vw, 660px); }
#personagens .pg-char__meta { display: flex; align-items: center; gap: 16px; }
#personagens .pg-char__idx { font-family: var(--f-mono); font-size: 14px; letter-spacing: .14em; color: var(--mute); }
#personagens .pg-char__idx b { font-size: 24px; color: #fff; font-weight: 700; letter-spacing: .06em; }
#personagens .pg-char__name {
  --ca: 2px;
  font-size: calc(clamp(58px, 8.6vw, 150px) * var(--k, 1)); line-height: 1.12; white-space: nowrap;
  filter: drop-shadow(calc(var(--ca) * -1) 0 0 rgba(0, 216, 248, .8)) drop-shadow(var(--ca) 0 0 rgba(240, 0, 240, .75)) drop-shadow(0 6px 18px rgba(0, 0, 0, .85));
}
/* SplitText: quem pinta o cromado é o caractere (a palavra não pinta, senão sobra fantasma parado) */
#personagens .pg-char__name .sw { background: none; white-space: nowrap; }
#personagens .pg-char__name .pg-l { display: block; }
#personagens .pg-nw { white-space: nowrap; }
/* o cartão crescendo até a tela cheia ganha contorno de neon (o filtro no pai segue o recorte do filho) */
#personagens .pg-cast.is-expanding { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 10px rgba(240, 0, 240, .85)) drop-shadow(0 0 28px rgba(120, 0, 240, .6)); }
#personagens .pg-char__line { font-size: clamp(17px, .8vw + 9px, 23px); line-height: 1.45; color: #eeeaf9; max-width: min(34ch, 47vw); text-wrap: pretty; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .9)); }

/* ---------- Interface do elenco ---------- */
#personagens .pg-flash { inset: 0; z-index: 9; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(70% 60% at 50% 50%, rgba(255, 255, 255, .55), rgba(120, 0, 240, .35) 45%, transparent 75%); }
#personagens .pg-seam { inset: 0; z-index: 10; width: 100%; height: 100%; max-width: none; pointer-events: none; opacity: 0; overflow: visible; }
#personagens .pg-seam path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
#personagens .pg-seam__glow { stroke: #f000f0; stroke-width: 12; opacity: .45; filter: blur(6px); }
#personagens .pg-seam__core { stroke: #eafcff; stroke-width: 3; filter: drop-shadow(0 0 4px #00d8f8) drop-shadow(0 0 12px rgba(120, 0, 240, .9)); }

#personagens .pg-hud { inset: 0; z-index: 11; pointer-events: none; opacity: 0; }
#personagens .pg-tag { position: absolute; left: var(--gutter); top: var(--pg-top); display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #d9d3f0; }
#personagens .pg-tag i { width: 8px; height: 8px; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); animation: pg-blink 1.1s steps(2, jump-none) infinite; }
#personagens .pg-note { position: absolute; right: var(--gutter); top: calc(var(--pg-top) - 6px); padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 236, 252, .82); background: rgba(5, 1, 15, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#personagens .pg-corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 255, 255, .5); }
#personagens .pg-corner--tl { left: calc(var(--gutter) * .45); top: calc(var(--hud-h) + 8px); border-left-width: 1px; border-top-width: 1px; }
#personagens .pg-corner--tr { right: calc(var(--gutter) * .45); top: calc(var(--hud-h) + 8px); border-right-width: 1px; border-top-width: 1px; }
#personagens .pg-corner--bl { left: calc(var(--gutter) * .45); bottom: 14px; border-left-width: 1px; border-bottom-width: 1px; }
#personagens .pg-corner--br { right: calc(var(--gutter) * .45); bottom: 14px; border-right-width: 1px; border-bottom-width: 1px; }

#personagens .pg-bar { z-index: 12; left: 50%; bottom: 22px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; opacity: 0; visibility: hidden; }
#personagens .pg-bar__now { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 16px; letter-spacing: .08em; color: #fff; white-space: nowrap; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .9)); }
#personagens .pg-bar__now b { font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .12em; padding: 2px 6px; color: #000; background: var(--magenta); }
#personagens .pg-bar__list {
  display: flex; gap: 10px; padding: 10px 12px;
  background: rgba(5, 1, 15, .58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
#personagens .pg-pick {
  --s: 62px; --z: 2.1; --w: calc(var(--z) * 177.78%);
  position: relative; display: block; width: var(--s); height: var(--s); overflow: hidden;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  background: #120b26; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: transform .35s var(--ease-out), box-shadow .3s;
}
#personagens .pg-pick img {
  position: absolute; max-width: none; width: var(--w); height: calc(var(--z) * 100%);
  left: clamp(calc(100% - var(--w)), calc(50% - var(--fx) * var(--w)), 0%);
  top: clamp(calc(100% - var(--z) * 100%), calc(50% - var(--fy) * var(--z) * 100%), 0%);
  filter: grayscale(.75) brightness(.55); transition: filter .3s;
}
#personagens .pg-pick.is-missing img { visibility: hidden; }
#personagens .pg-pick__n { position: absolute; left: 5px; bottom: 3px; font-family: var(--f-mono); font-weight: 700; font-size: 10px; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px #000; }
#personagens .pg-pick__p { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--neon); transform-origin: 0 50%; transform: scaleX(0); }
#personagens .pg-pick::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .3s; }
#personagens .pg-pick.is-on { transform: translateY(-6px) scale(1.1); }
#personagens .pg-pick.is-on img { filter: none; }
#personagens .pg-pick.is-on::after { box-shadow: inset 0 0 0 2px var(--magenta), inset 0 0 14px rgba(240, 0, 240, .6); }
#personagens .pg-pick:hover img, #personagens .pg-pick:focus-visible img { filter: none; }

/* ---------- 7 · Isso já acontece ---------- */
#personagens .pg-real { inset: 0; z-index: 8; overflow: hidden; visibility: hidden;
  background:
    linear-gradient(180deg, transparent 72%, #000 100%),
    radial-gradient(55% 60% at 70% 50%, rgba(120, 0, 240, .32), transparent 70%),
    radial-gradient(35% 40% at 12% 70%, rgba(0, 216, 248, .12), transparent 70%),
    #05010f;
}
#personagens .pg-real__in {
  position: absolute; inset: 0; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(24px, 3.4vw, 64px);
  padding-top: calc(var(--hud-h) + 16px); padding-bottom: 24px;
}
#personagens .pg-real__copy { display: grid; justify-items: start; gap: 18px; }
#personagens .pg-real__title { font-size: clamp(48px, 5.6vw, 100px); text-wrap: balance; }
#personagens .pg-real__body { font-size: clamp(16px, .5vw + 11px, 19px); }
#personagens .pg-mosaic { position: relative; width: 100%; max-width: calc((100svh - var(--hud-h) - 90px) * 1.52); justify-self: center; }
#personagens .pg-mosaic__frame {
  --fb: clamp(26px, 3.4vw, 54px); --bw: 3px;
  position: relative; width: 100%; aspect-ratio: 1000 / 660;
  clip-path: polygon(var(--fb) 0, calc(100% - var(--fb)) 0, 100% var(--fb), 100% calc(100% - var(--fb)), calc(100% - var(--fb)) 100%, var(--fb) 100%, 0 calc(100% - var(--fb)), 0 var(--fb));
  background: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--magenta));
}
/* chapa metálica por dentro do filete neon (mesmo chanfro, recuada pela espessura) */
#personagens .pg-mosaic__frame::before {
  --fi: calc(var(--fb) - var(--bw) * .42);
  content: ''; position: absolute; inset: var(--bw);
  clip-path: polygon(var(--fi) 0, calc(100% - var(--fi)) 0, 100% var(--fi), 100% calc(100% - var(--fi)), calc(100% - var(--fi)) 100%, var(--fi) 100%, 0 calc(100% - var(--fi)), 0 var(--fi));
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 7px), linear-gradient(160deg, #2c2842 0%, #0c0919 55%, #1a152e 100%);
}
#personagens .pg-cell { position: absolute; overflow: hidden; background: #0a0618; }
#personagens .pg-cell img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.12); transition: transform .9s var(--ease-out), filter .4s; filter: saturate(1.05); }
#personagens .pg-cell::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5, 1, 15, .8), transparent 34%); transition: opacity .4s; }
#personagens .pg-cell__cap { position: absolute; z-index: 2; left: 14%; bottom: 9px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #e9e4fa; white-space: nowrap; }
/* geometria: linha de cima com divisória inclinada; linha de baixo com duas (como na p16) */
#personagens .pg-cell--1 { left: 1.2%; top: 1.8%; width: 50.2%; height: 45.6%; clip-path: polygon(calc(var(--fb) - 5px) 0, 100% 0, 90.2% 100%, 0 100%, 0 calc(var(--fb) - 5px)); }
#personagens .pg-cell--1 img { object-position: 60% 45%; }
#personagens .pg-cell--1 .pg-cell__cap { left: 9%; }
#personagens .pg-cell--2 { left: 46.4%; top: 1.8%; width: 52.4%; height: 45.6%; clip-path: polygon(9.5% 0, calc(100% - var(--fb) + 5px) 0, 100% calc(var(--fb) - 5px), 100% 100%, 0 100%); }
#personagens .pg-cell--2 img { object-position: 45% 40%; }
#personagens .pg-cell--3 { left: 1.2%; top: 49.6%; width: 32.2%; height: 48.6%; clip-path: polygon(0 0, 100% 0, 91% 100%, calc(var(--fb) - 5px) 100%, 0 calc(100% - var(--fb) + 5px)); }
#personagens .pg-cell--3 img { object-position: 50% 30%; }
#personagens .pg-cell--3 .pg-cell__cap { left: calc(var(--fb) + 2px); }
#personagens .pg-cell--4 { left: 30.4%; top: 49.6%; width: 37.6%; height: 48.6%; clip-path: polygon(8.4% 0, 100% 0, 91.6% 100%, 0 100%); }
#personagens .pg-cell--4 img { object-position: 60% 30%; }
#personagens .pg-cell--5 { left: 65.4%; top: 49.6%; width: 33.4%; height: 48.6%; clip-path: polygon(8.7% 0, 100% 0, 100% calc(100% - var(--fb) + 5px), calc(100% - var(--fb) + 5px) 100%, 0 100%); }
#personagens .pg-cell--5 img { object-position: 45% 25%; }
#personagens .pg-rivet { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #eef0f5 0 18%, #6b6f82 40%, #262436 70%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); pointer-events: none; }
#personagens .pg-mosaic__bolts { position: absolute; inset: -2% -1.5%; width: 103%; height: 104%; max-width: none; pointer-events: none; overflow: visible; }
#personagens .pg-bolt--m { stroke: #f000f0; filter: drop-shadow(0 0 4px rgba(240, 0, 240, .9)) drop-shadow(0 0 12px rgba(240, 0, 240, .5)); }
#personagens .pg-bolt--c { stroke: #00d8f8; filter: drop-shadow(0 0 4px rgba(0, 216, 248, .9)) drop-shadow(0 0 12px rgba(0, 216, 248, .5)); }
#personagens .pg-mosaic__cap { margin-top: 12px; text-align: right; text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  #personagens .pg-cell:hover img { transform: scale(1.22); filter: saturate(1.25) brightness(1.08); }
  #personagens .pg-cell:hover::after { opacity: .5; }
}

/* ---------- Projetor baixo (1280×720 e afins) ---------- */
@media (max-height: 760px) and (min-width: 821px) {
  #personagens { --pg-bar-h: 118px; }
  #personagens .pg-pick { --s: 54px; }
  #personagens .pg-select__grid { gap: 10px; }
  #personagens .pg-lede { font-size: 16px; line-height: 1.5; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  #personagens { --pg-bar-h: 104px; --pg-bev: 10px; --pg-top: calc(var(--hud-h) + 12px); }
  #personagens .pg-select__in { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 22px; padding-top: calc(var(--hud-h) + 14px); padding-bottom: 20px; }
  #personagens .pg-select__copy { gap: 12px; }
  #personagens .pg-title { font-size: clamp(44px, 12.4vw, 64px); }
  #personagens .pg-lede { font-size: 15px; line-height: 1.5; }
  #personagens .pg-hint { display: none; }
  #personagens .pg-select__grid { gap: 10px; }
  #personagens .pg-select__head { font-size: 10px; letter-spacing: .14em; }
  #personagens .pg-cards { gap: 8px; }
  #personagens .pg-card { aspect-ratio: 4 / 5; max-height: none; }
  #personagens .pg-card__n { left: 8px; top: 7px; font-size: 10px; }
  #personagens .pg-card__pick { display: none; }
  #personagens .pg-card__txt { left: 8px; right: 6px; bottom: 7px; }
  #personagens .pg-card__name { font-size: 13px; }
  #personagens .pg-card__cat { font-size: 8px; letter-spacing: .12em; }

  #personagens .pg-char__img, #personagens .pg-char__film, #personagens .pg-ghost { object-position: var(--pos-m, 72% 50%); background-position: var(--pos-m, 72% 50%); }
  /* retrato: a imagem desce para baixo do HUD (o rosto não fica atrás da interface) e o zoom lento ancora no rosto */
  #personagens .pg-char__media { inset: calc(var(--hud-h) + 34px) 0 0 0; translate: none; transform-origin: 70% 22%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  #personagens .pg-tag { display: none; }
  #personagens .pg-note { top: calc(var(--hud-h) + 8px); }
  #personagens .pg-char__veil { background: linear-gradient(0deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .86) 30%, rgba(0, 0, 0, .35) 52%, transparent 66%), linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, transparent 18%); }
  #personagens .pg-char__copy { justify-content: flex-end; padding-bottom: calc(var(--pg-bar-h) + 14px); gap: 8px; translate: none; }
  #personagens .pg-char__copy > * { max-width: 100%; }
  #personagens .pg-char__name { font-size: calc(clamp(44px, 16.5vw, 84px) * var(--k, 1)); }
  #personagens .pg-char__line { font-size: 16px; max-width: 32ch; }
  #personagens .pg-char__idx b { font-size: 20px; }
  #personagens .pg-note { left: var(--gutter); right: auto; font-size: 10px; letter-spacing: .12em; }
  #personagens .pg-tag { font-size: 10px; letter-spacing: .14em; }
  #personagens .pg-corner { display: none; }
  #personagens .pg-bar { bottom: max(10px, env(safe-area-inset-bottom)); gap: 6px; }
  #personagens .pg-bar__now { font-size: 13px; }
  #personagens .pg-bar__list { gap: 6px; padding: 7px 8px; }
  #personagens .pg-pick { --s: 46px; }
  #personagens .pg-pick.is-on { transform: translateY(-3px) scale(1.06); }

  #personagens .pg-real__in { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding-top: calc(var(--hud-h) + 14px); }
  #personagens .pg-real__copy { gap: 10px; }
  #personagens .pg-real__title { font-size: clamp(42px, 12vw, 60px); }
  #personagens .pg-real__body { font-size: 15px; }
  #personagens .pg-mosaic { max-width: none; }
  #personagens .pg-mosaic__frame { aspect-ratio: 1000 / 900; --fb: 22px; }
  #personagens .pg-cell__cap { display: none; }
  #personagens .pg-rivet { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}

/* ---------- Movimento reduzido: lista empilhada, tudo legível ---------- */
.reduced #personagens .pg-stage { height: auto; overflow: visible; overflow-x: clip; }
.reduced #personagens .pg-select { overflow: hidden; }
.reduced #personagens .pg-stage > * { position: relative; }
.reduced #personagens .pg-select { min-height: 100svh; }
.reduced #personagens .pg-select__in { position: relative; min-height: 100svh; }
.reduced #personagens .pg-cast { display: grid; }
.reduced #personagens .pg-char { position: relative; inset: auto; height: 100svh; min-height: 560px; }
.reduced #personagens .pg-char__media, .reduced #personagens .pg-char__copy { translate: none; }
.reduced #personagens .pg-ghost, .reduced #personagens .pg-seam, .reduced #personagens .pg-flash, .reduced #personagens .pg-bar, .reduced #personagens .pg-hint, .reduced #personagens .pg-corner, .reduced #personagens .pg-tag { display: none; }
.reduced #personagens .pg-hud { display: none; }
.reduced #personagens .pg-cast { position: relative; }
.reduced #personagens .pg-cast::before { content: 'Imagens ilustrativas · performers fantasiados'; position: absolute; z-index: 3; top: calc(var(--hud-h) + 14px); right: var(--gutter); padding: 6px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(240, 236, 252, .82); background: rgba(5, 1, 15, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 820px) { .reduced #personagens .pg-cast::before { left: var(--gutter); right: auto; letter-spacing: .12em; } }
.reduced #personagens .pg-real { visibility: visible; min-height: 100svh; }
.reduced #personagens .pg-real__in { position: relative; min-height: 100svh; }
.reduced #personagens .pg-char__copy { padding-bottom: 60px; }
@media (max-width: 820px) { .reduced #personagens .pg-char__copy { padding-bottom: 48px; } }
.reduced #personagens .pg-hint i, .reduced #personagens .pg-select__head b::before, .reduced #personagens .pg-tag i { animation: none; }
/* fora da tela, os pisca-piscas param */
#personagens:not(.pg-on) .pg-hint i, #personagens:not(.pg-on) .pg-select__head b::before, #personagens:not(.pg-on) .pg-tag i { animation-play-state: paused; }