/* Draftoku — 16비트 단일 테마. 아트 스펙 §2·§3 그대로.
   모든 치수는 calc(N * var(--u)) — N은 logical px 정수. 서브픽셀 금지. */

:root {
  /* 16색 팔레트 (palette-snap.py "draftoku"와 동일) */
  --ink: #140C1C; --bg: #241630; --box: #4A2F6E; --panel: #5A3D7A;
  --line: #8259AA; --slate: #9C86B4; --mist: #C9BADA; --paper: #F7EFDE;
  --paper2: #CDB894; --teal: #3ED0DE; --teal2: #15697C; --amber: #F2922B;
  --amber2: #7E3F14; --rose: #EF4E7B; --rose2: #8E1E48; --lime: #B4E04A;
  /* JS(scale.js)가 정수 px로 주입. 기본 3 */
  --u: 3px;
}
/* ⚠️ slate/panel = 2.72 FAIL — slate는 bg·box 위에서만. panel 위 보조 텍스트는 mist. */

@font-face {
  font-family: 'MonoSq';
  src: url('/assets/fonts/mini-square-mono.woff2') format('woff2');
  font-display: optional;
}
@font-face {
  font-family: 'PixelSq';
  src: url('/assets/fonts/pixel-square.woff2') format('woff2');
  font-display: optional;
}
@font-face {
  /* Galmuri9 서브셋 (quiple/galmuri, SIL OFL) — ko/ja UI 텍스트 + 메뉴 언어 버튼.
     빌드: tools/build-galmuri.sh · 원장: ASSETS.md */
  font-family: 'Galmuri';
  src: url('/assets/fonts/galmuri9.woff2') format('woff2');
  font-display: optional; /* swap 금지 규약 (CLS) — 대신 index.html에서 preload */
}

* { margin: 0; padding: 0; box-sizing: border-box; image-rendering: pixelated; }
[hidden] { display: none !important; }  /* .overlay의 display:flex가 hidden을 덮지 않게 */
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--paper);
  font-family: 'MonoSq', monospace;
  -webkit-font-smoothing: none;
  display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
button {
  font-family: inherit; color: inherit; background: none; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button:focus-visible, .cell:focus-visible {
  outline: calc(2 * var(--u)) dotted var(--paper); outline-offset: var(--u);
}

/* ── 스테이지: 96 × 186 logical ─────────────────────────────── */
#stage {
  width: calc(96 * var(--u));
  display: flex; flex-direction: column;
  position: relative;
}
#stage.noshield { box-shadow: 0 0 0 calc(2 * var(--u)) var(--rose2); }

/* 헤더 y0 h11 */
#hdr {
  height: calc(11 * var(--u));
  display: flex; align-items: center;
  border-bottom: var(--u) solid var(--slate);
  box-shadow: 0 var(--u) 0 var(--ink);
}
#logo { font-family: 'PixelSq'; font-size: calc(5 * var(--u)); letter-spacing: var(--u); }
#pnum { color: var(--mist); }
#timer { margin-left: auto; font-size: calc(4 * var(--u)); color: var(--mist); }
#menuBtn {
  margin-left: auto; font-size: calc(6 * var(--u)); color: var(--mist);
  min-width: 44px; min-height: 44px;   /* S=3에서도 히트영역 44px (사용성 P1-3) */
}
#skipBtn {
  margin-left: auto; min-height: 44px; padding: 0 calc(2 * var(--u));
  font-size: calc(4 * var(--u)); color: var(--amber);
}
#skipBtn:not([hidden]) + #menuBtn { margin-left: 0; }
#timer:not([hidden]) + #menuBtn { margin-left: calc(2 * var(--u)); }

/* 덱 잔량 스트립 y13 h16 — 6컬럼 */
#deckstrip {
  height: calc(14 * var(--u));
  margin-top: calc(2 * var(--u));
  display: grid; grid-template-columns: repeat(9, 1fr);
}
#deckstrip.n6 { grid-template-columns: repeat(6, 1fr); }
.dcol {
  font-size: calc(3 * var(--u));
  background: var(--panel);
  box-shadow: inset 0 0 0 var(--u) var(--ink);
  display: flex; flex-direction: column; align-items: center;
  padding-top: var(--u);
  font-size: calc(4 * var(--u));
  transition: background .1s steps(2);
}
.dcol .lbl { color: var(--mist); }
.dcol .cnt { color: var(--paper); }
.dcol .bar { width: calc(8 * var(--u)); height: calc(3 * var(--u)); margin-top: auto; margin-bottom: var(--u);
  background: var(--amber2); position: relative; }
.dcol .bar i { position: absolute; inset: 0 auto 0 0; background: var(--amber); }
.dcol.zero { background: var(--bg); }
.dcol.zero .cnt { color: var(--slate); text-decoration: line-through; }
.dcol.facedown .lbl, .dcol.facedown .cnt, .dcol.facedown .bar { visibility: hidden; }
.dcol.facedown {
  background-image: repeating-conic-gradient(var(--box) 0% 25%, var(--panel) 0% 50%);
  background-size: calc(4 * var(--u)) calc(4 * var(--u));
}
.dcol.flash { background: var(--amber2); }

/* 보드 y32 — 9×9는 셀 10u(현행), 6×6은 셀 16u(v1.1 좌표 — 보드 96u 유지·grid-template 6열) */
#board {
  margin-top: calc(3 * var(--u));
  display: grid;
  grid-template-columns: repeat(9, calc(10 * var(--u)));
  width: fit-content;
  border: calc(2 * var(--u)) solid var(--ink);
  box-shadow: inset 0 0 0 var(--u) var(--slate);
}
#board.size6 {
  grid-template-columns: repeat(6, calc(16 * var(--u)));
  /* 96u = 스테이지 폭 전부 — 테두리는 레이아웃 밖(box-shadow)으로 그려 오버플로 방지 */
  border: 0;
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), inset 0 0 0 var(--u) var(--slate);
}
.cell {
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  font-size: calc(6 * var(--u));
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--slate);
  background: var(--bg);
  color: transparent;
}
#board.size6 .cell {
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  font-size: calc(9 * var(--u));
}
.cell.boxod { background: var(--box); }
/* 2×3 박스 경계 강조 */
.cell.bR { box-shadow: inset calc(-2 * var(--u)) 0 0 var(--slate), inset 0 0 0 1px var(--slate); }
.cell.bB { box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--slate), inset 0 0 0 1px var(--slate); }
.cell.bR.bB { box-shadow: inset calc(-2 * var(--u)) calc(-2 * var(--u)) 0 var(--slate), inset 0 0 0 1px var(--slate); }
.cell.preset { color: var(--mist); }
.cell.placed { color: var(--paper); }
.cell.placed::after {
  content: ''; position: absolute; left: calc(3 * var(--u)); right: calc(3 * var(--u));
  bottom: calc(2 * var(--u)); height: var(--u); background: var(--teal2);
}
.cell.legal { background: var(--teal2); }
.cell.legal::before {
  content: ''; position: absolute; inset: var(--u);
  border: calc(2 * var(--u)) dashed var(--teal);
  animation: ants .6s steps(4) infinite;
}
.cell.legal::after {
  content: ''; position: absolute; width: calc(4 * var(--u)); height: calc(4 * var(--u));
  background: var(--teal); transform: rotate(45deg);
}
.cell.legal.armed::after { background: var(--paper); }  /* ⚡0 재탭 확정 대기 */
.cell.reject { animation: shake .2s steps(5); }
.cell.reject::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, var(--rose) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(4 * var(--u)));
  opacity: .5;
}
.cell.lastp::before {
  content: ''; position: absolute; inset: 0;
  border: calc(2 * var(--u)) solid var(--amber);
  clip-path: polygon(0 0, 25% 0, 25% 25%, 0 25%, 0 100%, 25% 100%, 25% 75%, 0 75%,
    100% 100%, 75% 100%, 75% 75%, 100% 75%, 100% 0, 75% 0, 75% 25%, 100% 25%);
  animation: fadeout .6s steps(3) forwards;
}
.cell.hint::after {
  content: '★'; position: absolute; color: var(--amber);
  font-size: calc(6 * var(--u)); animation: pulse .8s steps(2) infinite;
}
.cell.death { color: var(--rose); }
.cell.death::after { content: '💀'; position: absolute; font-size: calc(6 * var(--u)); }
.cell.witness { background: var(--rose2); }

@keyframes ants { to { border-color: var(--teal); transform: translate(0,0); border-style: dotted; } }
@keyframes shake {
  0% { transform: translateX(0); } 20% { transform: translateX(calc(2 * var(--u))); }
  40% { transform: translateX(calc(-2 * var(--u))); } 60% { transform: translateX(var(--u)); }
  80% { transform: translateX(calc(-1 * var(--u))); } 100% { transform: translateX(0); }
}
@keyframes fadeout { to { opacity: 0; } }

/* 액션바 y130 h12 — ⚡ 핍 + DISCARD (갭 4u, v1.1) */
#actionbar {
  height: calc(12 * var(--u));
  margin-top: calc(4 * var(--u));
  display: flex; align-items: center;
}
#pips { display: flex; gap: var(--u); }
.pip {
  width: calc(6 * var(--u)); height: calc(6 * var(--u));
  background: var(--amber); transform: rotate(45deg); margin: 0 calc(1.5 * var(--u));
}
.pip.spent { background: transparent; box-shadow: inset 0 0 0 var(--u) var(--amber2); }
.pip.last { animation: pulse .8s steps(2) infinite; }
@keyframes pulse { 50% { filter: brightness(1.4); } }
#noshield { color: var(--rose); font-family: 'PixelSq'; font-size: calc(5 * var(--u)); letter-spacing: var(--u); }
#discardBtn, #finishBtn {
  margin-left: auto;
  min-height: 44px;
  padding: 0 calc(3 * var(--u));
  height: calc(12 * var(--u));
  font-size: calc(4 * var(--u));
  background: var(--panel); color: var(--mist);
  box-shadow: 0 0 0 var(--u) var(--ink), inset 0 calc(-2 * var(--u)) 0 rgba(0,0,0,.35);
}
#discardBtn:not([disabled]) { color: var(--paper); }
#discardBtn[disabled] { opacity: .45; cursor: default; }
#discardBtn.sure { background: var(--amber); color: var(--ink); }
#discardBtn.pulse { animation: pulse .8s steps(2) 2; }
#finishBtn { background: var(--lime); color: var(--ink); }

/* 핸드 y146 h40 — 카드 28×40 */
#hand {
  height: calc(40 * var(--u));
  margin-top: calc(2 * var(--u));
  display: flex; gap: calc(6 * var(--u));
}
.card {
  width: calc(28 * var(--u)); height: calc(40 * var(--u));
  background: var(--paper); color: var(--ink);
  position: relative;
  font-size: calc(15 * var(--u));
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
    0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink),
    inset var(--u) var(--u) 0 0 rgba(255,255,255,.14),
    inset calc(-1 * var(--u)) calc(-2 * var(--u)) 0 0 var(--paper2);
  transition: transform .09s steps(2);
}
.card .pipnum {
  position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u));
  font-size: calc(5 * var(--u));
}
.card.sel {
  transform: translateY(calc(-2 * var(--u)));
  box-shadow:
    0 0 0 calc(2 * var(--u)) var(--amber),
    inset var(--u) var(--u) 0 0 rgba(255,255,255,.14),
    inset calc(-1 * var(--u)) calc(-4 * var(--u)) 0 0 var(--paper2);
}
.card.gone { visibility: hidden; }
/* 칸 우선 경로에서 여러 카드가 후보일 때 — "선택됨"(.sel)과 구분되는 순수 힌트.
   sel은 그대로 null이라 아직 아무것도 확정되지 않았음을 펄스로 알린다. */
.card.fit {
  animation: fitpulse 1s steps(2) infinite;
  box-shadow:
    calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
    0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink),
    inset var(--u) var(--u) 0 0 rgba(255,255,255,.14),
    inset calc(-1 * var(--u)) calc(-2 * var(--u)) 0 0 var(--paper2),
    0 0 0 calc(2 * var(--u)) var(--amber2);
}
@keyframes fitpulse {
  50% { box-shadow:
    calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
    0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink),
    inset var(--u) var(--u) 0 0 rgba(255,255,255,.14),
    inset calc(-1 * var(--u)) calc(-2 * var(--u)) 0 0 var(--paper2),
    0 0 0 calc(2 * var(--u)) var(--amber); }
}

/* 오버레이 */
.overlay {
  position: fixed; inset: 0; background: rgba(20,12,28,.8);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.panel {
  width: calc(88 * var(--u));
  background: var(--panel);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), inset 0 0 0 var(--u) var(--paper);
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  text-align: center;
  font-size: calc(4 * var(--u));
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
}
.panel .big, #rGrade { font-family: 'PixelSq'; font-size: calc(7 * var(--u)); }
#rGrade.win { color: var(--lime); }
#rGrade.lose { color: var(--rose); }
#rTitle { font-family: 'PixelSq'; font-size: calc(5 * var(--u)); color: var(--mist); }
.traj { font-size: calc(4 * var(--u)); letter-spacing: 1px; word-break: break-all; color: var(--paper); }
#rWitness { color: var(--mist); }
#rFlawlessNote { color: var(--mist); }
#rCountdown { color: var(--mist); }
.count { font-family: 'PixelSq'; font-size: calc(10 * var(--u)); color: var(--amber); }
.btnrow { display: flex; gap: calc(3 * var(--u)); justify-content: center; }
.btnrow button {
  min-height: 44px; padding: calc(2 * var(--u)) calc(4 * var(--u));
  background: var(--bg); color: var(--paper);
  box-shadow: 0 0 0 var(--u) var(--ink);
  font-size: calc(4 * var(--u));
}
.boardBtn { flex: 1; color: var(--mist); }
.boardBtn.sel { background: var(--amber); color: var(--ink); }
.btnrow button.primary, #shareBtn, #continueBtn, #practiceBtn:not([hidden]) { background: var(--amber); color: var(--ink); }
#practiceBtn:not([hidden]) ~ #shareBtn { background: var(--bg); color: var(--paper); } /* 패배 시 SHARE는 보조 */
.help { color: var(--mist); line-height: 1.6; text-align: left; }
.help b { color: var(--paper); }
.row { display: flex; gap: calc(2 * var(--u)); color: var(--mist); align-items: center; }
.tiny { font-size: calc(3 * var(--u)); color: var(--mist); opacity: .7; }

/* 토스트 */
#toast {
  position: fixed; left: 50%; bottom: calc(50 * var(--u));
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: calc(2 * var(--u)) calc(3 * var(--u));
  font-size: calc(4 * var(--u));
  box-shadow: 0 0 0 var(--u) var(--slate);
  max-width: calc(90 * var(--u));
  z-index: 20;
}
#toast.warn { color: var(--rose); }

/* ── i18n: ko/ja 로케일 (Galmuri9) ───────────────────────────
   원칙: UI '텍스트'만 Galmuri — 숫자·카드·보드·덱·로고·등급 글자의 Kenney 픽셀은 유지.
   크기: Kenney(8px 격자)는 u배수가 정수 스케일이지만 Galmuri9는 9px 격자 —
   u배수 크기(u=3의 4u=12px = 9×1.33)는 비정수 스케일로 픽셀이 뭉개진다.
   → scale.js가 9의 정수배로 스냅해 주입한 --g4/--g5/--g7을 쓴다.
   실측 근거: u=3에서 12px 렌더는 획이 불균일(1~2px 섞임), 9px/18px는 격자 정합
   (test/shot-ko.png · shot-ja.png로 확인). */
#langRow .langBtn { font-family: 'Galmuri', 'MonoSq', monospace; } /* 한국어/日本語 라벨은 전 로케일 공통 */
#langRow .langBtn.sel { background: var(--amber); color: var(--ink); }

html[lang=ko] body, html[lang=ja] body { font-family: 'Galmuri', 'MonoSq', monospace; }
/* 게임 데이터 표면은 MonoSq 유지 — 숫자·카운터·트래젝토리 글리프 */
html[lang=ko] .cell, html[lang=ja] .cell,
html[lang=ko] .card, html[lang=ja] .card,
html[lang=ko] .dcol, html[lang=ja] .dcol,
html[lang=ko] #timer, html[lang=ja] #timer,
html[lang=ko] #rTokens, html[lang=ja] #rTokens,
html[lang=ko] .traj, html[lang=ja] .traj { font-family: 'MonoSq', monospace; }
/* PixelSq 표면 중 번역 텍스트가 앉는 곳 — 로고 "DRAFTOKU"와 .count 숫자는 PixelSq 유지 */
html[lang=ko] #pnum, html[lang=ja] #pnum,
html[lang=ko] #noshield, html[lang=ja] #noshield,
html[lang=ko] #rTitle, html[lang=ja] #rTitle,
html[lang=ko] .panel .big, html[lang=ja] .panel .big,
html[lang=ko] #rGrade, html[lang=ja] #rGrade { font-family: 'Galmuri', 'PixelSq', monospace; }
/* 9의 정수배 크기 스냅 */
html[lang=ko] .panel, html[lang=ja] .panel,
html[lang=ko] .btnrow button, html[lang=ja] .btnrow button,
html[lang=ko] #discardBtn, html[lang=ja] #discardBtn,
html[lang=ko] #finishBtn, html[lang=ja] #finishBtn,
html[lang=ko] #skipBtn, html[lang=ja] #skipBtn,
html[lang=ko] #toast, html[lang=ja] #toast { font-size: var(--g4); }
html[lang=ko] #pnum, html[lang=ja] #pnum,
html[lang=ko] #noshield, html[lang=ja] #noshield,
html[lang=ko] #rTitle, html[lang=ja] #rTitle { font-size: var(--g5); }
html[lang=ko] .panel .big, html[lang=ja] .panel .big,
html[lang=ko] #rGrade, html[lang=ja] #rGrade { font-size: var(--g7); }

@media (prefers-reduced-motion: reduce) {
  .cell.legal::before { animation: none; border-style: dotted; }
  .cell.reject { animation: none; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--rose); }
  .pip.last, #discardBtn.pulse { animation: none; }
  .card { transition: none; }
}