/* cooctal 2048 - 고유 디자인 (차가운 남색 보드 + 청록→보라→산호 계열 타일)
   화면 틀(위 줄·띠·플레이 수·광고 자리·결과 화면)은 공통 틀(../common/frame.css)을 쓴다.
   판 크기 --size 는 frame.css 가 남는 공간에서 계산한다 (정사각형: --aspect 1). */
:root {
  --bg: #f3f5fa;
  --ink: #1d2540;
  --board: #1f2638;
  --cell: #2c3550;
}
.game-page {
  --aspect: 1;
  --gap: calc(var(--size) * 0.03);
  --tile: calc((var(--size) - var(--gap) * 5) / 4);
  --radius: calc(var(--tile) * 0.2);
}

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

/* 보드 */
.board {
  position: relative;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--radius) + var(--gap) * 0.6);
  background: var(--board);
  touch-action: none;
  box-shadow: 0 6px 20px rgba(29, 37, 64, 0.22);
}
/* 2048 달성: 판이 잠깐 빛나고 그대로 이어서 한다 (안내창 없음) */
.board.won { animation: glow 1.4s ease-out; }

.grid {
  position: absolute;
  inset: 0;
  padding: var(--gap);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}
.cell { border-radius: var(--radius); background: var(--cell); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }

.tiles { position: absolute; inset: 0; }

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tile);
  height: var(--tile);
  transform: translate(calc(var(--gap) + var(--x) * (var(--tile) + var(--gap))),
                       calc(var(--gap) + var(--y) * (var(--tile) + var(--gap))));
  transition: transform 110ms ease-out;
  z-index: 2;
}

.tile-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: calc(var(--tile) * 0.42);
  background: var(--t-bg);
  color: var(--t-fg, #fff);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.d3 .tile-inner { font-size: calc(var(--tile) * 0.36); }
.d4 .tile-inner { font-size: calc(var(--tile) * 0.29); }
.d5 .tile-inner { font-size: calc(var(--tile) * 0.23); }

.tile-inner.new { animation: appear 160ms ease-out 90ms backwards; }
.tile-inner.merged { animation: bump 180ms ease-out 90ms backwards; }

@keyframes appear { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bump { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(245, 176, 65, 0.9); } 40% { box-shadow: 0 0 0 10px rgba(245, 176, 65, 0.55); } 100% { box-shadow: 0 6px 20px rgba(29, 37, 64, 0.22); } }

/* 타일 색 (cooctal 팔레트) */
.v2    { --t-bg: #e6f0f4; --t-fg: #24304a; }
.v4    { --t-bg: #c4e6e6; --t-fg: #1f3a44; }
.v8    { --t-bg: #6fd0c2; --t-fg: #10332f; }
.v16   { --t-bg: #178276; }
.v32   { --t-bg: #1c78b8; }
.v64   { --t-bg: #3b6ee0; }
.v128  { --t-bg: #5a5fe0; }
.v256  { --t-bg: #7f4fd6; }
.v512  { --t-bg: #a845c4; }
.v1024 { --t-bg: #c23d8c; }
.v2048 { --t-bg: linear-gradient(135deg, #ff7a6b, #f5b041); --t-fg: #1d2540; }
.v2048 .tile-inner { box-shadow: 0 0 18px rgba(245, 150, 70, 0.75), inset 0 -4px 0 rgba(0, 0, 0, 0.15); }
.vbig  { --t-bg: linear-gradient(135deg, #1d2540, #4a2f7a); --t-fg: #ffd56b; }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile-inner.new, .tile-inner.merged, .board.won { animation: none; }
}