:root {
  --bg: #f6f5f0;
  --fg: #3a3226;
  --muted: #8d8578;
  --line: #d6cec2;
  /* 같은 구역 안의 칸 사이 선. 바탕색 위에 얹히므로 반투명으로 둔다 — 불투명한 옅은 색은 진한
     구역 바탕에서 사라졌다. */
  --grid: rgb(58 50 38 / 0.22);
  --hole: transparent;
  --cell-bg: #fbfaf6;
  --region-line: #3a3226;
  --wrong: #c1503f;
  --key-bg: #e5ded3;
  --btn-bg: #3f5a55;
  --btn-fg: #f9f6f2;
  --sheet-bg: #ffffff;
  --tile-bg: #fffdf8;
  --tile-edge: #b9ae9c;
  --pip: #3a3226;
  --pick: #2b7a6b;
  /* 구역 색. 바탕(--rN)은 옅게, 조건 표(--sN)는 진하게. 이웃한 구역끼리 겹치지 않게 칠한다. */
  --r0: #f3c9c4; --s0: #b9524a;
  --r1: #f5dea9; --s1: #a87a22;
  --r2: #cfe4b6; --s2: #5a8c3c;
  --r3: #c0dceb; --s3: #3b7f9e;
  --r4: #d9cff0; --s4: #7460ad;
  --r5: #f1cbe1; --s5: #a8558a;
  --r6: #c6e6dc; --s6: #34907a;
  --r7: #e3ecb3; --s7: #7c8a26;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1714;
    --fg: #e4dcd2;
    --muted: #9a9184;
    --line: #3d352e;
    --grid: rgb(255 255 255 / 0.14);
    --cell-bg: #26211d;
    --region-line: #d8cfc2;
    --wrong: #e0705c;
    --key-bg: #3a322c;
    --sheet-bg: #241f1b;
    --tile-bg: #ece5d8;
    --tile-edge: #8f8576;
    --pip: #2a241e;
    --pick: #6cc3b0;
    --r0: #5c3530; --s0: #d7766c;
    --r1: #5a4a25; --s1: #cfa34a;
    --r2: #3a5130; --s2: #86b866;
    --r3: #2c4a59; --s3: #66aacb;
    --r4: #43395f; --s4: #9f8ad6;
    --r5: #563849; --s5: #cf7fb2;
    --r6: #2b4f45; --s6: #5fbca3;
    --r7: #48502a; --s7: #afc05a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 3vmin, 24px) clamp(10px, 4vmin, 28px);
}

.app {
  width: min(100%, 440px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vmin, 14px);
}

/* 헤더 배치는 모든 게임이 같다. 양옆을 1fr로 묶으면 좌우 내용의 폭이 달라도 이름이
   화면 한가운데에 온다. */
.title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.title-row h1 { text-align: center; }
.title-row .head-nav { justify-self: start; }
.head-nav { display: flex; align-items: center; gap: 14px; }
.title-row .head-actions { justify-self: end; }

h1 {
  margin: 0;
  font-size: clamp(26px, 6.5vmin, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.head-actions { display: flex; align-items: baseline; gap: 14px; }

.toggle {
  border: 0; background: none; padding: 0;
  color: inherit; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; opacity: 0.6;
}

.toggle:hover { opacity: 1; }

.back {
  color: inherit; opacity: 0.6; text-decoration: none;
  font-size: 14px; font-weight: 600;
}

.back:hover { opacity: 1; }

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.levels { display: flex; gap: 6px; }

.level {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
}

.level[aria-pressed="true"] {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

.toggle.sound { font-size: 12px; }

/* 취소선은 소리 토글에만 준다. 도움말 토글의 꺼짐은 "안 열림"이라 뜻이 다르다. */
.toggle.sound[aria-pressed="false"] { opacity: 0.38; text-decoration: line-through; }

.timer {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.board-wrap { position: relative; }

.board {
  /* 칸 한 변. 판 너비(--w)로 나눠 폭에 맞춘다. 7칸이어도 폰에서 칸이 손가락만큼은 된다. */
  --cell: clamp(36px, min(calc((100vw - 2 * clamp(10px, 4vmin, 28px) - 16px) / var(--w)), calc(400px / var(--w))), 64px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--w), var(--cell));
  grid-auto-rows: var(--cell);
  width: max-content;
  margin: 6px auto 10px;
}

.hole { pointer-events: none; }

.cell {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--cell-bg);
  cursor: pointer;
  /* 구역 경계와 칸 사이 선은 칸 안쪽 그림자로 긋는다. 칸 위에 SVG를 겹치면 칸과 선이
     서로 다르게 반올림돼 어긋난다. 어느 변을 그을지는 main.js가 칸마다 --edge에 넣는다. */
  box-shadow: var(--edge, none);
}

.cell[data-color="0"] { background: var(--r0); }
.cell[data-color="1"] { background: var(--r1); }
.cell[data-color="2"] { background: var(--r2); }
.cell[data-color="3"] { background: var(--r3); }
.cell[data-color="4"] { background: var(--r4); }
.cell[data-color="5"] { background: var(--r5); }
.cell[data-color="6"] { background: var(--r6); }
.cell[data-color="7"] { background: var(--r7); }

/* 구역의 조건 표. 구역의 맨 아래 오른쪽 칸 모서리에 걸쳐 둔다 — 칸 가운데에 두면 도미노에
   가린다. 도미노보다 위에 그리고 누름은 통과시킨다. */
.badge {
  position: absolute;
  z-index: 3;
  min-width: calc(var(--cell) * 0.46);
  height: calc(var(--cell) * 0.46);
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-60%, -60%);
  font-size: max(11px, calc(var(--cell) * 0.24));
  font-weight: 800;
  line-height: 1;
  color: #fff;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
  white-space: nowrap;
}
.badge[data-color="0"] { background: var(--s0); }
.badge[data-color="1"] { background: var(--s1); }
.badge[data-color="2"] { background: var(--s2); }
.badge[data-color="3"] { background: var(--s3); }
.badge[data-color="4"] { background: var(--s4); }
.badge[data-color="5"] { background: var(--s5); }
.badge[data-color="6"] { background: var(--s6); }
.badge[data-color="7"] { background: var(--s7); }
.badge.wrong { background: var(--wrong); }
.badge.done { opacity: 0.45; }

/* 판에 놓인 도미노. 칸 가장자리를 조금 남겨 밑의 구역 색이 보이게 한다. */
.piece {
  position: absolute;
  z-index: 2;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.piece[hidden] { display: none; }
.piece.vertical { flex-direction: column; }

.piece .face, .ghost .face {
  position: absolute;
  inset: 3px;
}

/* 가장자리를 띄우는 것은 inset이다. 너비 100%에 바깥 여백을 주었더니 세로로 여백 두 몫만큼
   넘쳐 도미노가 칸 아래로 비어져 나왔다. */
.face {
  display: flex;
  border-radius: 7px;
  background: var(--tile-bg);
  box-shadow: 0 0 0 1.5px var(--tile-edge), 0 2px 3px rgb(0 0 0 / 0.18);
  color: var(--pip);
}
.face.vertical { flex-direction: column; }

.half { flex: 1; display: flex; align-items: center; justify-content: center; }
.half + .half { box-shadow: inset 1px 0 0 var(--tile-edge); }
.vertical .half + .half { box-shadow: inset 0 1px 0 var(--tile-edge); }
.half svg { width: 78%; height: 78%; }

.piece.dropped { animation: drop 160ms ease-out; }
.cell.hinted { animation: cellflash 900ms ease-out; }
.piece.hinted .face { animation: flash 900ms ease-out; }

@keyframes drop {
  from { transform: scale(1.08); }
  to { transform: none; }
}

@keyframes cellflash {
  25% { background: #f4d35e; }
}

@keyframes flash {
  0%, 100% { background: var(--tile-bg); }
  25% { background: #f4d35e; }
}

/* 아래의 도미노 칸. 칸 크기는 도미노를 세워도 들어가게 정사각형으로 고정한다 — 돌릴 때마다
   크기가 바뀌면 옆 칸이 밀려 누르려던 자리가 비껴간다. 놓은 도미노의 칸은 지우지 않고 비워
   둔다. 같은 이유다. */
.tray {
  --u: clamp(17px, 5vmin, 22px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.slot {
  width: calc(var(--u) * 2 + 10px);
  height: calc(var(--u) * 2 + 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--key-bg);
  cursor: pointer;
}
.slot.used { background: none; box-shadow: inset 0 0 0 1.5px var(--line); cursor: default; }
.slot.used .tile { display: none; }
.slot[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--pick); }

.tile {
  display: flex;
  width: calc(var(--u) * 2);
  height: var(--u);
  border-radius: 5px;
  background: var(--tile-bg);
  box-shadow: 0 0 0 1.5px var(--tile-edge);
  color: var(--pip);
  transition: transform 120ms ease-out;
}
.tile.vertical { flex-direction: column; width: var(--u); height: calc(var(--u) * 2); }

/* 네 방향의 그림을 미리 넣어 두고 하나만 보인다. display를 준 요소라 hidden이 저절로 듣지 않는다. */
.face[hidden], .tile[hidden] { display: none; }

/* 끌어서 놓는 자리라 페이지가 따라 스크롤되면 안 된다. 그래서 이 안의 조작은 click이 아니라
   포인터 이벤트로 돈다(main.js). */
.board, .tray { touch-action: none; }

.piece.lifted { opacity: 0.3; }
.cell.target { box-shadow: var(--edge, none), inset 0 0 0 3px var(--pick); }
.cell.blocked { box-shadow: var(--edge, none), inset 0 0 0 3px var(--wrong); }

/* 끄는 동안 손가락을 따라오는 도미노. 크기와 자리는 main.js가 픽셀로 준다. */
.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  display: flex;
  pointer-events: none;
  opacity: 0.92;
}
.ghost[hidden] { display: none; }
.ghost .face { box-shadow: 0 0 0 1.5px var(--tile-edge), 0 6px 14px rgb(0 0 0 / 0.25); }

.toast {
  margin: 0;
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

/* 도구 아이콘은 글자가 아니라 도형이다(`shared/icons.js`). 기호 문자로 두었더니
   글꼴마다 크기와 두께가 달랐고, 아예 안 그리는 글꼴도 있었다. */
.tool-icon { display: inline-flex; line-height: 0; }
.tool-icon svg { width: 19px; height: 19px; }
.tool-label { font-size: 11px; font-weight: 600; opacity: 0.8; }
.tool:disabled { opacity: 0.35; cursor: default; }

.tool[aria-pressed="true"] {
  background: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-fg);
}

.sheet {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sheet-bg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sheet[hidden] { display: none; }

.sheet-title { margin: 0; font-size: 19px; font-weight: 800; }
.sheet-note { margin: 0; font-size: 14px; color: var(--muted); }
.sheet-actions { display: flex; gap: 8px; }

.btn {
  flex: 1;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.help-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .piece.hinted, .piece.dropped { animation-duration: 1ms; }
}