/* ZUZ Arcade Tower - 재료가 바뀌며 올라가는 탑
   화면 틀·판 크기(--size)는 공통 틀(../common/frame.css). 판 960×1200u → --aspect 1.25, 배율 = --size / 960.
   층·위 띠·반짝임은 game.js 가 canvas 에 그린다(img/strip-*.svg 를 잘라 찍음). 여기는 판 상자·바탕색·첫 화면 손 안내만. */
:root {
  --bg: #f3f5fa;
  --ink: #1d2540;
}
.game-page {
  --aspect: 1.25;
  --u: calc(var(--size) / 960);
}

* { 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; }

/* ---------- 판 ---------- */
/* 바탕은 재료 묶음마다 한 색. 묶음이 바뀌면 400ms 겹쳐 바뀜 — canvas 는 바탕을 칠하지 않고 투명으로 둔다 */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 1.25);
  border-radius: calc(var(--u) * 28);
  background: #1f2638;
  transition: background-color 400ms linear;
  overflow: hidden;
  touch-action: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(29, 37, 64, 0.25);
}
.board[data-band="1"] { background: #13252e; }   /* 벽돌 */
.board[data-band="2"] { background: #2d2442; }   /* 돌 */
.board[data-band="3"] { background: #3a2630; }   /* 유리 */
.board[data-band="4"] { background: #1c3528; }   /* 금속 */
.board canvas { display: block; width: 100%; height: 100%; }
.board[data-state="end"] { cursor: default; }
/* 화면 읽기 글(sr-only)은 판 안 왼쪽 위에 — 기본 자리(canvas 아래)면 판 밖으로 나가 "화면 밖 요소"로 잡힘 */
#live { top: 0; left: 0; margin: 0; }

/* ---------- 첫 화면 손가락 안내 ----------
   손 150u, 손끝 (480, 560)u → 손 그림 왼쪽 위 (410.6, 538.8)u. 맥박 고리 r 44 → 96u, 선 4 → 1u, 흰 0.7 → 0,
   1000ms ease-out, 1200ms 마다. 고리 시작 때 손이 160ms 동안 6u 눌림(scale 0.96). 첫 누름에 150ms 사라짐 */
.hint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms linear, visibility 0s linear 150ms;
}
.board[data-state="ready"] .hint {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.hint .hand {
  position: absolute;
  left: calc(var(--u) * 410.6);
  top: calc(var(--u) * 538.8);
  width: calc(var(--u) * 150);
  height: calc(var(--u) * 150);
  opacity: 0.92;
  transform-origin: 46% 14%;
  animation: tw-press 1200ms linear infinite;
}
.hint .ring {
  position: absolute;
  left: calc(var(--u) * 480);
  top: calc(var(--u) * 560);
  width: calc(var(--u) * 192);
  height: calc(var(--u) * 192);
  margin: calc(var(--u) * -96) 0 0 calc(var(--u) * -96);
  border-radius: 50%;
  box-sizing: border-box;
  border: calc(var(--u) * 4) solid #fff;
  animation: tw-ring 1200ms infinite;
}
/* 고리: 0–1000ms 자라며 사라짐(ease-out), 1000–1200ms 쉼. 반지름 44/96 = scale 0.458 */
@keyframes tw-ring {
  0%      { transform: scale(0.458); border-width: calc(var(--u) * 8.7); opacity: 0.7; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  83.333% { transform: scale(1);     border-width: calc(var(--u) * 1);   opacity: 0; }
  100%    { transform: scale(1);     border-width: calc(var(--u) * 1);   opacity: 0; }
}
/* 손: 0–80ms 눌림, 80–160ms 돌아옴, 나머지 그대로 */
@keyframes tw-press {
  0%      { transform: translateY(0) scale(1); }
  6.667%  { transform: translateY(calc(var(--u) * 6)) scale(0.96); }
  13.333% { transform: translateY(0) scale(1); }
  100%    { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .board { transition: none; }
  .hint .hand { animation: none; }
  /* 고리는 r 60u · 0.5 를 그대로 둔다 */
  .hint .ring { animation: none; transform: scale(0.625); opacity: 0.5; border-width: calc(var(--u) * 6.4); }
}