/* ======================================================================
   보드-판 16비트 디자인 토큰
   아바타 스프라이트(public/avatar-idle.svg)의 팔레트를 사이트 전체로 넓힌 것.
   같은 7색만 쓰기 때문에 캐릭터와 화면이 한 세계처럼 보인다.

   쓰는 법
     <link rel="stylesheet" href="/pixel.css">  를 lobby.css 보다 먼저 건다.
     게임별 색은 각 게임 HTML 의 :root 에서 --accent 만 재정의한다.

   규칙 (이것만 지키면 도트 느낌이 무너지지 않는다)
     · 곡선 금지 — border-radius 는 0, 모서리는 계단으로 만든다
     · 그림자 대신 단색 오프셋 (2px 0 0 / 0 2px 0)
     · 전환은 계단식 — transition 대신 steps() 애니메이션
     · 이미지는 image-rendering: pixelated
   ====================================================================== */

:root {
  /* 아바타에서 그대로 가져온 7색 */
  --px-ink:    #1C1E32;   /* 외곽선 · 가장 어두운 곳 */
  --px-rim:    #C79A5E;   /* 림라이트 · 강조 */
  --px-shade:  #D5BF9D;   /* 가장자리 그늘 */
  --px-mid:    #EDE2CE;   /* 옅은 그늘 */
  --px-cream:  #FAF4E6;   /* 기본 크림 */
  --px-white:  #FFFFFF;   /* 하이라이트 */
  --px-blush:  #F0A8A8;   /* 볼터치 · 경고 */

  /* 어두운 쪽 계열 — 배경 단계 */
  --px-bg0:    #12131F;
  --px-bg1:    #1C1E32;
  --px-bg2:    #262941;
  --px-bg3:    #343854;

  /* 의미색 (강조색과 별개로 둔다) */
  --px-good:   #8FBF7A;
  --px-warn:   #E0C56A;
  --px-bad:    #E08A7A;

  --px-unit:   4px;                 /* 도트 한 칸. 모든 간격은 이 배수 */
  --px-edge:   var(--px-ink);
  --px-font:   "DungGeunMo", "Galmuri11", "NeoDunggeunmo", ui-monospace,
               "Cascadia Code", Consolas, monospace;
}

/* 밝은 테마 — 크림 계열이 바탕이 된다 */
@media (prefers-color-scheme: light) {
  :root {
    --px-bg0: #FAF4E6; --px-bg1: #EDE2CE; --px-bg2: #E0D2B8; --px-bg3: #D5BF9D;
  }
}
:root[data-theme="light"] {
  --px-bg0: #FAF4E6; --px-bg1: #EDE2CE; --px-bg2: #E0D2B8; --px-bg3: #D5BF9D;
}
:root[data-theme="dark"] {
  --px-bg0: #12131F; --px-bg1: #1C1E32; --px-bg2: #262941; --px-bg3: #343854;
}

/* ---- 기본 ---- */
.px img, img.px, .px-sprite { image-rendering: pixelated; }

/* 도트 바탕 — 4px 격자에 1px 점. 배경이 비어 보이지 않게 아주 옅게 깐다 */
.px-dots {
  background-image: radial-gradient(var(--px-bg3) 1px, transparent 1px);
  background-size: calc(var(--px-unit) * 2) calc(var(--px-unit) * 2);
}

/* ---- 픽셀 테두리 ----
   border-radius 로 둥글게 하는 대신, 모서리 한 칸을 잘라 계단을 만든다.
   clip-path 라 배경·테두리 모두 같은 모양으로 잘린다. */
.px-panel {
  background: var(--px-bg1);
  border: 2px solid var(--px-edge);
  border-radius: 0;
  padding: calc(var(--px-unit) * 4);
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}
.px-panel--raised { box-shadow: var(--px-unit) var(--px-unit) 0 0 var(--px-ink); }

/* ---- 버튼 ----
   눌리는 느낌은 그림자를 없애고 같은 만큼 내리는 것으로 낸다. 곡선도 흐림도 없다. */
.px-btn {
  font: 700 14px/1 var(--px-font);
  letter-spacing: .04em;
  color: var(--px-ink);
  background: var(--px-rim);
  border: 2px solid var(--px-ink);
  border-radius: 0;
  padding: calc(var(--px-unit) * 3) calc(var(--px-unit) * 4);
  cursor: pointer;
  box-shadow: 0 var(--px-unit) 0 0 var(--px-ink);
  transform: translateY(0);
}
.px-btn:hover { background: var(--px-cream); }
.px-btn:active {
  transform: translateY(var(--px-unit));
  box-shadow: 0 0 0 0 var(--px-ink);
}
.px-btn:focus-visible { outline: 3px solid var(--px-blush); outline-offset: 2px; }
.px-btn[disabled] { opacity: .5; cursor: default; box-shadow: 0 var(--px-unit) 0 0 var(--px-ink); }
.px-btn--ghost { background: transparent; color: var(--px-cream); }
.px-btn--ghost:hover { background: var(--px-bg2); }

/* ---- 글자 ----
   웹폰트를 못 받는 환경(광고 차단·오프라인)에서도 픽셀 느낌이 유지되게
   등폭 폰트를 마지막 대비책으로 둔다. */
.px-title {
  font: 700 clamp(20px, 4vw, 34px)/1.25 var(--px-font);
  letter-spacing: .02em;
  color: var(--px-cream);
  text-shadow: 2px 2px 0 var(--px-ink);
  text-wrap: balance;
}
.px-label {
  font: 700 11px/1 var(--px-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--px-rim);
}

/* ---- 체력바 모양 진행바 ---- */
.px-bar {
  height: calc(var(--px-unit) * 3);
  background: var(--px-bg3);
  border: 2px solid var(--px-ink);
  overflow: hidden;
}
.px-bar > i { display: block; height: 100%; background: var(--px-good); }

/* ---- 깜빡임 · 둥둥 뜨기 ----
   부드럽게 흐르면 도트가 아니라 벡터로 보인다. 전부 steps() 로 끊는다. */
@keyframes pxBlink { 0%, 60% { opacity: 1 } 61%, 100% { opacity: 0 } }
@keyframes pxBob   { 0%, 49% { transform: translateY(0) } 50%, 100% { transform: translateY(-2px) } }
.px-blink { animation: pxBlink 1s steps(1, end) infinite; }
.px-bob   { animation: pxBob 1.2s steps(1, end) infinite; }

@media (prefers-reduced-motion: reduce) {
  .px-blink, .px-bob { animation: none; }
}