/* 퀴즈나라 아바타(avatar.js의 renderAvatar). 도트 그림이라 정수 배율·가장 가까운 화소로만 보인다.
   아바타 위에는 그라데이션·그림자·흐림 효과를 얹지 않는다(2026-10-25 사용자 결정). */
.qp-av { display: inline-block; flex: none; vertical-align: bottom; background-repeat: no-repeat; image-rendering: pixelated;
  --row: 0; background-position: 0 calc(var(--row) * var(--fh) * -1); filter: none; }
/* 네 방향 시트(sheet)의 줄 순서는 LPC 그대로 뒤·왼쪽·앞·오른쪽. 맵은 data-dir만 바꾼다. */
.qp-av-sheet[data-dir="back"] { --row: 0; }
.qp-av-sheet[data-dir="left"] { --row: 1; }
.qp-av-sheet[data-dir="front"] { --row: 2; }
.qp-av-sheet[data-dir="right"] { --row: 3; }
/* 서기(idle) 숨 두 칸 */
.qp-av-anim { animation: qp-av-idle 1.4s steps(2) infinite; }
@keyframes qp-av-idle { from { background-position-x: 0; } to { background-position-x: calc(var(--fw) * -2); } }
/* 상점 칸 그림: 아이템이 있는 부분을 칸 가운데에 두고, 칸이 넘치는 부분을 자른다(줄이지 않는다). */
.qp-av-focus { position: absolute; left: 50%; top: 50%; translate: calc(var(--fx) * -1) calc(var(--fy) * -1); }
@media (prefers-reduced-motion: reduce) { .qp-av-anim { animation: none; } }
.sr-motion-paused .qp-av-anim { animation-play-state: paused; }
/* 순위·명단처럼 작은 칸: 칸 크기는 그대로 두고 아바타(1배)의 얼굴을 가운데에 두어 넘치는 부분을 자른다. */
.qp-av-box { position: relative; overflow: hidden; flex: none; }
/* 상점 아이템 그림(사람 없이 아이템만): 크기·자리는 avatar.js fitItems가 칸에 맞춰 정수 배율로 정한다. */
.qp-av-item { position: absolute; background-size: 100% 100%; }
/* 로비 내 캐릭터·상점 미리보기·라운드전 자리: 칸보다 넓어도 몸 가운데가 칸 가운데에 오게(창은 몸 가운데 기준 좌우 같음), 칸 장식 위에. */
.qq-me-pic > .qp-av, .qs-stage > .qp-av { position: relative; z-index: 1; margin-inline: calc((100% - var(--fw)) / 2); }
/* 라운드전 단상(무대 그림은 그대로): 아바타는 1배라 칸 높이를 아바타에 맞추고, 콘솔이 다리만 가리게 겹친다.
   예전 SVG처럼 머리부터 허리까지 보인다(겹침 22점 = 다리). 화면 크기가 바뀌어도 아바타 크기는 그대로(정수 배율). */
.rq-stage .qq-booth .qq-avatar:has(> .qp-av), .rq-stage.art-seat .qq-booth .qq-avatar:has(> .qp-av), .rq-stage .qq-booth[data-row] .qq-avatar:has(> .qp-av) { height: auto; margin-bottom: -22px; }
.qq-avatar > .qp-av { position: relative; z-index: 1; }
/* 정답 폴짝·오답 풀썩: 도트 아바타는 늘이거나 기울이지 않고 위아래로만 움직인다(정수 화소). */
.qq-booth[data-state="right"] .qq-avatar:has(> .qp-av), .rq-stage .qq-booth[data-state="right"] .qq-avatar:has(> .qp-av) { animation-name: qp-av-hop; }
.qq-booth[data-state="wrong"] .qq-avatar:has(> .qp-av), .rq-stage .qq-booth[data-state="wrong"] .qq-avatar:has(> .qp-av) { animation-name: qp-av-slump; }
@keyframes qp-av-hop { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-14px); } 75% { transform: translateY(-6px); } }
@keyframes qp-av-slump { 0% { transform: none; } 100% { transform: translateY(4px); filter: saturate(.75) brightness(.9); } }
/* focus 그림을 감싸는 잘라내기 상자(부모 크기). 부모는 position이 있는 칸(상점 칸·착용 칸·순위 칸·로비 머리)이다. */
.qp-av-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 걷기·달리기(퀴즈 맵): 한 방향의 칸을 가로로 이은 그림에서 --f번째 칸을 보인다(맵 코드가 시간에 맞춰 바꾼다). */
.qp-av-motion { background-position: calc(var(--f, 0) * var(--fw) * -1) 0; }