/* 얼음 미끄럼 — boxpush/css/style.css 를 파일째 복사해 팔레트와 말(piece)만 갈았다.
   헤더·판·푸터·오버레이·회전안내 구조는 그대로다.
   타일과 바위는 전부 CSS다 — 그라데이션·라운드·하이라이트뿐이라 이미지보다 작고 선명하다. */
:root {
  --bg-top: #16324e;
  --bg-bottom: #0b1b2c;

  --ice-hi: #eaf7ff;
  --ice-lo: #c3e4f6;
  --ice-edge: #9ac9e2;

  --rock-hi: #7f9db8;
  --rock-lo: #55738f;
  --rock-edge: #3c5872;

  --key-hi: #ffe9a3;
  --key-lo: #f5b93c;
  --key-edge: #cf8f1c;

  --exit-open-hi: #9cf3d2;
  --exit-open-lo: #34d3a0;
  --exit-shut: #3e5871;

  --pill: #cfe9f7;
  --pill-ink: #1f3f57;
  --ink: #e4f3fd;
  --dim: #8db0c8;
  --accent: #7fd8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background-color: var(--bg-bottom);
  color: var(--ink);
  font: 700 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* 배경 그림은 배경색과 **따로** 선언한다. 이 규칙이 통째로 실패해도 위의 배경색과
   화면 내용은 그대로 남는다 — 배경 하나 때문에 게임이 안 보이는 일은 없어야 한다.
   (tapflip/css/style.css 의 같은 원칙) */
body {
  background-image:
    linear-gradient(rgba(11, 27, 44, .30), rgba(11, 27, 44, .62) 45%, rgba(11, 27, 44, .30)),
    url("../assets/bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.2rem .4rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
#level, #slides, #tokens {
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(207, 233, 247, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: .85rem;
}
#level { color: var(--ink); }
#stars {
  flex-basis: 100%;
  margin-top: .3rem;
  color: #ffd76a;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}

/* 판은 세로로 길다(7x9 / 8x10). 카메라 이동이 없으니 한 화면에 다 들어와야 한다. */
#board {
  display: grid;
  grid-template-columns: repeat(var(--w, 7), 1fr);
  grid-template-rows: repeat(var(--h, 9), 1fr);
  gap: 0.6%;
  width: min(94vw, 430px, calc(64vh * var(--w, 7) / var(--h, 9)));
  aspect-ratio: var(--w, 7) / var(--h, 9);
  transition: transform .25s;
  touch-action: none; /* 스와이프를 브라우저 스크롤에 뺏기지 않게 */
  filter: drop-shadow(0 1.2rem 1.6rem rgba(0, 0, 0, .4));
}

/* ---- 판 위의 그림들 ----
   바닥·테두리·바위·열쇠·포탈은 전부 생성 에셋이다(assets/*.webp, 각 7~17KB).
   얼음의 실금과 반짝임, 바위의 눈 덮인 실루엣은 CSS 그라데이션으로는 안 나온다.
   자르는 절차는 scripts/make-art.py — 시트를 다시 뽑으면 그대로 재생성된다. */
.cell {
  position: relative;
  background: url("../assets/ice.webp") center / 100% 100% no-repeat;
}
/* 테두리: 판의 액자. 안쪽 바위보다 조용해야 놀이 공간이 넓어 보인다 */
.cell.edge { background-image: url("../assets/edge.webp"); }
/* 바위: 얼음 칸 **위에 올리는 말**이다. 바닥은 얼음 그대로 두고 위에 얹어야
   칸 크기가 안 흔들리고, 눈덩이가 칸 위로 살짝 삐져나올 수 있다. */
.cell.rock .piece {
  inset: -8% 2% 0;
  background: url("../assets/rock.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}

/* ---- 열쇠: 지나가기만 해도 주워진다 ---- */
.cell.key .piece {
  inset: 8%;
  background: url("../assets/key.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 .35rem rgba(245, 185, 60, .8));
  animation: twinkle 1.8s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ---- 출구: 잠김(얼어붙은 문) / 열림(빛나는 포탈) ---- */
.cell.exit::before {
  content: "";
  position: absolute;
  inset: -2%;
  background: center / contain no-repeat;
}
.cell.exit.shut::before { background-image: url("../assets/portal-shut.webp"); }
.cell.exit.open::before {
  background-image: url("../assets/portal-open.webp");
  filter: drop-shadow(0 0 .6rem rgba(52, 211, 160, .9));
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---- 주인공 병아리 (boxpush 와 같은 스프라이트 — 형제 게임 인상 통일) ---- */
.piece {
  position: absolute;
  inset: 7%;
  transition: transform .12s;
}
.cell.player .piece {
  inset: -6% -2% 0;
  background: url("../assets/chick.webp") center bottom / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
  animation: bob 2.4s ease-in-out infinite;
  z-index: 1;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4%); }
}

/* 동작 자세. 스프라이트 3장은 같은 시트에서 나와서 몸이 안 튄다.
   좌우 반전은 transform 이라 bob 애니메이션과 겹친다 — 반전용 키프레임을 따로 둔다. */
.cell.player.pose-push .piece { background-image: url("../assets/chick-push.webp"); }
.cell.player.pose-slide .piece { background-image: url("../assets/chick-slide.webp"); }
.cell.player.face-left .piece { animation-name: bob-left; }
@keyframes bob-left {
  0%, 100% { transform: translateY(0) scaleX(-1); }
  50% { transform: translateY(-4%) scaleX(-1); }
}

/* ---- 힌트: 주인공 위에 갈 방향 화살표 ---- */
.cell.hint::after {
  content: "";
  position: absolute;
  inset: 22%;
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%);
  opacity: .95;
  filter: drop-shadow(0 0 .5rem rgba(255, 255, 255, .9));
  animation: nudge .7s ease-in-out infinite;
  z-index: 2;
}
.cell.hint.up::after { transform: rotate(0deg); }
.cell.hint.right::after { transform: rotate(90deg); }
.cell.hint.down::after { transform: rotate(180deg); }
.cell.hint.left::after { transform: rotate(270deg); }
@keyframes nudge {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

#board.cleared { transform: scale(1.04); }

#tip {
  color: var(--dim);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  padding: 0 1.5rem;
  min-height: 2.6em;
}
#tip.good { color: #6ee7b7; }

footer {
  display: flex;
  gap: .6rem;
  padding: .8rem 1.2rem 1.4rem;
}
footer button {
  flex: 1;
  padding: .9rem 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #e6f5ff, var(--pill));
  color: var(--pill-ink);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 #a4cbe2, 0 3px 6px rgba(0, 0, 0, .3);
}
footer button:disabled { opacity: .3; cursor: default; }
footer button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 #a4cbe2;
}

/* ---- 설명 오버레이 (형제 게임들과 공통 구조) ---- */
#help-open {
  padding: .4rem .7rem;
  border: 0;
  border-radius: 999px;
  background: rgba(207, 233, 247, .12);
  color: var(--dim);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  background: rgba(5, 14, 24, .8);
}
.overlay[hidden] { display: none; }
.sheet {
  width: 100%;
  max-width: 22rem;
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1e405e, #16304a);
  border-radius: 1.4rem;
  padding: 1.5rem 1.3rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 1rem 2rem rgba(0, 0, 0, .5);
}
.sheet h1 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--ink); }
.sheet > div {
  background: rgba(0, 0, 0, .25);
  border-radius: .9rem;
  padding: .6rem;
}
.sheet ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dim);
  margin: 1.1rem 0 1.3rem;
}
.sheet li b { color: var(--ink); }
.sheet button {
  width: 100%;
  padding: .95rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #b8ecff, var(--accent));
  color: #0d2b3d;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 #4fb4dc;
}
.sheet button.ghost {
  margin-bottom: .6rem;
  background: linear-gradient(180deg, #e6f5ff, var(--pill));
  color: var(--pill-ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -3px 0 #a4cbe2;
}
.sheet button.ghost[hidden] { display: none; }

.result-sheet { text-align: center; }
.result-sheet h1 { margin-bottom: .35rem; }
#result-stars {
  color: #ffd76a;
  font-size: 2.4rem;
  letter-spacing: .18rem;
  text-shadow: 0 0 1.2rem rgba(255, 215, 106, .55);
}
#result-best {
  display: block;
  min-height: 1.4rem;
  margin: .2rem 0 .45rem;
  color: var(--accent);
  font-size: .86rem;
}
#result-summary {
  margin-bottom: 1.1rem;
  color: var(--dim);
  font-size: .9rem;
  font-weight: 600;
}

/* 세로 전용. 실제 앱은 AndroidManifest 의 screenOrientation="portrait" 로도 막는다. */
#rotate { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  header, main, footer, .overlay { display: none !important; }
  #rotate {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    color: var(--dim);
    font-size: 1.05rem;
    line-height: 1.6;
  }
}

header, footer { width: 100%; max-width: 26rem; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}