/* cooctal 스네이크 - 2048과 같은 차가운 남색 보드 + 청록 뱀 + 산호색 먹이 (고유 디자인)
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css). 정사각형 판(--aspect 1). */
:root {
  --bg: #f3f5fa;
  --ink: #1d2540;
  --board: #1f2638;
  --cell-a: #252d44;
  --cell-b: #222a3f;
  --snake: #3fc1ae;
  --snake-tail: #1f8f86;
  --head: #8ef0dc;
  --food: #ff7a6b;
}
.game-page {
  --aspect: 1;
  --pad: calc(var(--size) * 0.025);
  --cols: 20;
  --cell: calc((var(--size) - var(--pad) * 2) / var(--cols));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

/* 위 줄 [시작/일시정지] 아이콘: 진행 중이면 일시정지 모양 */
#play .i-pause { display: none; }
#play[data-mode="pause"] .i-play { display: none; }
#play[data-mode="pause"] .i-pause { display: block; }

/* ---------- 보드 ---------- */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  padding: var(--pad);
  border-radius: calc(var(--pad) * 2.4);
  background: var(--board);
  touch-action: none;
  box-shadow: 0 10px 30px rgba(29, 37, 64, 0.25);
}
.board[data-state="running"] { cursor: none; }

/* 칸 400개. 바둑판 무늬는 배경 그림 하나로 그린다. */
.grid {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--cols), 1fr);
  border-radius: calc(var(--pad) * 1.2);
  background-color: var(--cell-a);
  background-image: conic-gradient(var(--cell-b) 25%, transparent 0 50%, var(--cell-b) 0 75%, transparent 0);
  background-size: calc(var(--cell) * 2) calc(var(--cell) * 2);
}
.c { position: relative; }

.c.s, .c.h {
  margin: 6%;
  border-radius: 30%;
  background: var(--snake);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.c.t { background: var(--snake-tail); }  /* 꼬리 쪽 몸통 */
.c.h { margin: 2%; border-radius: 34%; background: var(--head); z-index: 1; }
/* 눈: 진행 방향 쪽에 두 개 */
.c.h::before, .c.h::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: #16203a;
}
.c.h.du::before, .c.h.dd::before { left: 18%; }
.c.h.du::after, .c.h.dd::after { right: 18%; }
.c.h.du::before, .c.h.du::after { top: 20%; }
.c.h.dd::before, .c.h.dd::after { bottom: 20%; }
.c.h.dl::before, .c.h.dr::before { top: 18%; }
.c.h.dl::after, .c.h.dr::after { bottom: 18%; }
.c.h.dl::before, .c.h.dl::after { left: 20%; }
.c.h.dr::before, .c.h.dr::after { right: 20%; }
.c.h.x { background: #ffb3a8; animation: bump 260ms ease-out; }

/* 먹이: 산호색 열매 + 작은 잎 */
.c.f::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd0c8 0 14%, var(--food) 16% 100%);
  box-shadow: 0 0 10px rgba(255, 122, 107, 0.7);
  animation: pulse 1.2s ease-in-out infinite;
}
.c.f::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 4%;
  width: 26%;
  height: 18%;
  border-radius: 0 100% 0 100%;
  background: #6fd0c2;
}

@keyframes pulse { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.04); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .c.f::before, .c.h.x { animation: none; }
}