/* ======================================================================
   보드-판 16비트 스킨
   기존 화면을 다시 쓰지 않고 위에 덧입힌다. <head> 맨 끝에서 불러야
   페이지 안 <style> 보다 뒤에 와서 이긴다.

     <link rel="stylesheet" href="/pixel.css">
     <link rel="stylesheet" href="/pixel-skin.css">

   빼고 싶으면 이 두 줄만 지우면 원래 화면으로 돌아온다.
   ====================================================================== */

/* ---- 기존 토큰을 16비트 팔레트로 갈아끼운다 ---- */
:root {
  --bg:          var(--px-bg0);
  --surface:     var(--px-bg1);
  --surface2:    var(--px-bg2);
  --border:      var(--px-bg3);
  --text:        var(--px-cream);
  --text-sub:    var(--px-shade);
  --text-main:   var(--px-cream);
  --text-dim:    var(--px-shade);
  --text-faint:  var(--px-bg3);
  /* --accent 는 건드리지 않는다. 게임마다 다른 테마색이 이 화면 전체를 물들이는 구조라
     여기서 덮으면 열 게임이 전부 같은 색이 된다 (한 번 그렇게 만들었다). */
  --green:       var(--px-good);
  --bg-shell:    var(--px-bg1);
  --bg-header:   var(--px-bg2);
  --bg-card-alt: var(--px-bg2);
  --ad-bg:       var(--px-bg1);
  --ad-border:   var(--px-bg3);
  --radius:      0px;
  --shadow:      rgba(0, 0, 0, 0.5);
  --card-shadow: 4px 4px 0 0 var(--px-ink);
  --overlay:     rgba(10, 11, 20, 0.86);
}

/* ---- 바탕에 도트 타일 ---- */
body {
  background-color: var(--px-bg0);
  background-image: url("/bg-tile.svg");
  background-size: 64px 64px;
  background-repeat: repeat;
  image-rendering: pixelated;
}

/* ---- 곡선을 전부 없앤다. 16비트에는 안티에일리어싱된 둥근 모서리가 없다 ---- */
.app-shell, .game-card, .g-thumb, .panel, .modal, .card, .room-card,
.h-link, .h-btn, .btn, button, input, select, textarea,
.ad-slot, .side-ad .ad-slot, .count-badge, .online-pill, .refresh-btn,
.back-link, .header-actions button, .header-actions .game-tag {
  border-radius: 0 !important;
}
/* 원형이어야 하는 것만 남긴다 */
.online-dot { border-radius: 50% !important; }

/* ---- 이미지·아이콘은 도트가 뭉개지지 않게 ---- */
img, svg, .g-thumb img, #userAvatar, .account-avatar { image-rendering: pixelated; }

/* ---- 카드: 흐린 그림자 대신 단색 오프셋 ---- */
.game-card, .room-card, .app-shell {
  border: 2px solid var(--px-ink);
  box-shadow: 4px 4px 0 0 var(--px-ink);
}
.game-card.playable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--px-ink);
  border-color: var(--px-rim);
}
.game-card.soon { opacity: .55; box-shadow: 2px 2px 0 0 var(--px-ink); }

/* ---- 버튼: 눌리면 그림자만큼 내려간다 ---- */
.btn, .h-btn, .refresh-btn, .header-actions button, button.primary {
  border: 2px solid var(--px-ink);
  box-shadow: 0 3px 0 0 var(--px-ink);
  font-weight: 700;
  letter-spacing: .02em;
}
.btn:active, .h-btn:active, .refresh-btn:active, .header-actions button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 0 var(--px-ink);
}
.btn:focus-visible, .h-btn:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--px-blush);
  outline-offset: 2px;
}

/* ---- 제목 ---- */
h1, .logo, .hero h1 {
  letter-spacing: .01em;
  text-shadow: 2px 2px 0 var(--px-ink);
}

/* ---- 게임 썸네일: 그라데이션을 단색 2단으로 (그라데이션은 16비트가 아니다) ---- */
.g-thumb { border: 2px solid var(--px-ink); }
.g-thumb.c-yut    { background: #1E3060 !important; }
.g-thumb.c-omok   { background: #254A30 !important; }
.g-thumb.c-yacht  { background: #3D2060 !important; }
.g-thumb.c-chess  { background: #2C2C3C !important; }
.g-thumb.c-domino { background: #4A3A22 !important; }
.g-thumb.c-alkkagi{ background: #5A2A26 !important; }
.g-thumb.c-carrom { background: #2A4A4A !important; }
.g-thumb.c-ddakji { background: #2E4A7A !important; }
.g-thumb.c-foosball { background: #234A2E !important; }
.g-thumb.c-pingpong { background: #4A2A48 !important; }

/* ---- 대기실 ---- */
.app-header { border-bottom: 2px solid var(--px-ink); }
.count-badge, .online-pill, .header-actions .game-tag {
  border: 2px solid var(--px-ink);
  font-weight: 700;
}

/* ---- 접속 표시등은 부드럽게 커지지 말고 딱딱 끊기게 ---- */
@keyframes onlinePulse {
  0%, 49%   { box-shadow: 0 0 0 0 var(--px-good); }
  50%, 100% { box-shadow: 0 0 0 3px transparent; }
}
.online-dot { animation: onlinePulse 1s steps(1, end) infinite !important; }

@media (prefers-reduced-motion: reduce) {
  .online-dot { animation: none !important; }
  .game-card.playable:hover { transform: none; }
}
