/* 아바타 = 이 시스템의 기본 단위. 사람이 곧 UI 요소다. (기획안 §5) */

.av {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
  --size: 72px;
  --ring: var(--fg);
  vertical-align: top;
}
.av__ring {
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--ring) 0turn, var(--ring) 1turn);
  padding: 3px;
  display: grid; place-items: center;
  transition: background .4s linear, transform .25s var(--ease-pop), filter .3s;
  animation: bob 2s ease-in-out infinite;
}
.av__face {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: calc(var(--size) * .42);
  color: #2B2F3A;
  background: var(--face-bg, #888);
  transition: filter .4s;
}
.av__face img { width: 100%; height: 100%; object-fit: cover; }
.av__name {
  font-size: calc(var(--size) * .21);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: calc(var(--size) * 1.5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  line-height: 1.2;
}
.av--noname .av__name { display: none; }

@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

/* 등장 */
.av--enter .av__ring { animation: avPop .5s var(--ease-pop) both, bob 2s ease-in-out 0.5s infinite; }
@keyframes avPop {
  0%   { transform: scale(0) rotate(-12deg); }
  60%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 강조 */
.av--hi { --ring: var(--team); }
.av--hi .av__ring { box-shadow: var(--glow); transform: scale(1.06); padding: 5px; }

/* 탈락 */
.av--dead .av__face { filter: grayscale(1) brightness(.55); }
.av--dead { --ring: var(--dead); }
.av--dead .av__ring { animation: sink .5s ease both; }
.av--dead .av__ring::after {
  content: ''; position: absolute; inset: -2px;
  background:
    linear-gradient(45deg, transparent 44%, var(--x) 44%, var(--x) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--x) 44%, var(--x) 56%, transparent 56%);
  border-radius: 50%;
  animation: xStamp .35s var(--ease-pop) both;
}
@keyframes sink { to { transform: translateY(6px); } }
@keyframes xStamp { 0% { opacity:0; transform: scale(2.2) } 100% { opacity:1; transform: scale(1) } }

/* 대기(미접속) */
.av--ghost { opacity: .28; filter: grayscale(1); }

/* 승리 */
.av--win .av__ring { animation: jump .6s ease-in-out infinite; box-shadow: 0 0 40px var(--accent); }
@keyframes jump { 0%,100% { transform: translateY(0) scale(1) } 40% { transform: translateY(-14px) scale(1.05) } }

/* 왕관 / 뱃지 */
.av__crown {
  position: absolute; top: -28%; left: 50%; transform: translateX(-50%) rotate(-14deg);
  font-size: calc(var(--size) * .42); filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
  animation: crownPop .45s var(--ease-pop) both;
  pointer-events: none;
}
/* avPop 을 그대로 쓰면 끝 프레임(scale(1) rotate(0))이 위의 transform 을 덮어써, 왕관이 제 너비의 반만큼 오른쪽으로 밀리고 기울기도 풀린다 */
@keyframes crownPop {
  0%   { transform: translateX(-50%) scale(0) rotate(-26deg); }
  60%  { transform: translateX(-50%) scale(1.12) rotate(-10deg); }
  100% { transform: translateX(-50%) scale(1) rotate(-14deg); }
}
.av__badge {
  position: absolute; top: -6%; right: -14%;
  background: var(--accent); color: #241E00;
  font-size: calc(var(--size) * .24); font-weight: 900;
  padding: .18em .5em; border-radius: var(--r-full);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  animation: badgePop .5s var(--ease-pop) both;
  white-space: nowrap;
}
@keyframes badgePop { 0% { opacity:0; transform: translateY(14px) scale(.4) } 100% { opacity:1; transform: none } }
.av__mark {
  position: absolute; bottom: 18%; right: -8%;
  font-size: calc(var(--size) * .32);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* 진행 게이지 테두리 */
/* 진행도 게이지. 하드코딩 hex 대신 토큰을 쓰고, 승리 점프(.av--win)를 죽이지 않는다
   — 게이지를 단 아바타가 우승하는 경우(빙고왕 시상 등)가 실제로 있다. */
.av--gauge .av__ring { background: conic-gradient(var(--accent) var(--p, 0turn), var(--bg-3) 0); animation: none; }
.av--gauge.av--win .av__ring { animation: jump .6s ease-in-out infinite; }

/* 팀 컬러 */
.t-a { --team: var(--team-a); }
.t-b { --team: var(--team-b); }
.av--a { --ring: var(--team-a); }
.av--b { --ring: var(--team-b); }

/* ── 공통 컴포넌트 ── */
.btn {
  background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .8em 1.2em; font-size: 1rem; font-weight: 700;
  transition: transform .12s var(--ease-pop), background .18s, border-color .18s;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn--primary { background: var(--team); color: #10131A; border-color: transparent; }
.btn--accent  { background: var(--accent); color: #241E00; border-color: transparent; }
.btn--danger  { background: color-mix(in srgb, var(--x) 22%, var(--bg-3)); border-color: var(--x); }
.btn--ghost   { background: transparent; }
.btn--big     { padding: 1.1em 1.6em; font-size: 1.15rem; border-radius: var(--r-lg); width: 100%; }

.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; }
.chip { display:inline-flex; align-items:center; gap:.35em; background: var(--bg-3); border:1px solid var(--line);
        border-radius: var(--r-full); padding: .3em .8em; font-size: .85rem; font-weight: 700; }
.muted { color: var(--fg-dim); }
.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }

/* 콘페티 / 플래시 레이어 */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.confetti { position: absolute; width: 10px; height: 16px; border-radius: 2px; will-change: transform, opacity; }
.fx-flash { position: fixed; inset: 0; background: var(--flash, #fff); z-index: 8999; pointer-events: none;
            animation: flashOut .5s ease-out forwards; }
@keyframes flashOut { from { opacity: .85 } to { opacity: 0 } }
.fx-float { position: fixed; font-size: 2.5rem; pointer-events: none; z-index: 9001;
            animation: floatUp 3s ease-out forwards; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  12%  { opacity: 1; transform: translateY(-30px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-70vh) scale(.9); }
}

/* 토스트 */
#toasts { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 9500;
          display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
         padding: .7em 1.1em; border-radius: var(--r-full); font-weight: 700; box-shadow: var(--shadow);
         animation: avPop .3s var(--ease-pop) both; max-width: 90vw; }
.toast--bad { background: color-mix(in srgb, var(--x) 30%, var(--bg-3)); border-color: var(--x); }
.toast--good { background: color-mix(in srgb, var(--ok) 26%, var(--bg-3)); border-color: var(--ok); }