/* 모아이 2048 — 게임 스타일 */
#app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100svh; overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
#hud { display: flex; align-items: center; gap: 10px; padding: 4px 4px 8px; }
#mascot { width: 40px; height: 40px; flex: 0 0 auto; }
.score-wrap { flex: 1; display: flex; align-items: baseline; gap: 6px; }
.score-wrap .pixel-label { font-size: 10px; }
.score-wrap strong { font-family: var(--f-pixel); font-size: 22px; color: var(--ink); }
.best-wrap { display: flex; flex-direction: column; align-items: center; line-height: 1; flex: 0 0 auto; }
.best-wrap .pixel-label { font-size: 9px; }
.best-wrap strong { font-family: var(--f-pixel); font-size: 16px; color: var(--c-purple); }
#newgame { padding: 8px 12px; font-size: 13px; }

#stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; touch-action: none; }
#board { position: relative; width: min(92vw, 62vh); height: min(92vw, 62vh); background: var(--card-soft); border: 2px solid var(--b-soft); border-radius: var(--r); box-shadow: var(--sh-soft); touch-action: none; }
#cells, #tiles { position: absolute; inset: 0; }
.cell { position: absolute; background: rgba(124, 109, 168, .10); border-radius: var(--r-sm); }
.tile {
  position: absolute; border-radius: var(--r-sm);
  box-shadow: 0 3px 0 rgba(46, 37, 72, .12); will-change: transform;
  transition: transform .11s ease;
}
/* scale 애니는 inner에(=translate와 분리, 위치 튐 방지) */
.tile-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tile-inner.pop { animation: pop .16s ease; }
.tile-inner.new { animation: tilein .14s ease; }
.tile-mascot { width: 58%; height: 58%; pointer-events: none; }
.tile-mascot svg { width: 100%; height: 100%; display: block; }
.tile-num { font-family: var(--f-pixel); font-size: 13px; color: #2E2548; line-height: 1; margin-top: 1px; }
@keyframes tilein { 0% { transform: scale(.2); } 100% { transform: scale(1); } }

/* 타일 등급 색 (2,4,8,...,1024,2048) */
.tier-1  { background: #E0D7FF; }
.tier-2  { background: #FFE3B0; }
.tier-3  { background: #FFCFA3; }
.tier-4  { background: #F3D2F2; }
.tier-5  { background: #E6D2AC; }
.tier-6  { background: #C4E2F9; }
.tier-7  { background: #CFEBAE; }
.tier-8  { background: #FFF0A6; }
.tier-9  { background: #DAD6E6; }
.tier-10 { background: #FBDCC0; }
.tier-11 { background: #FFD356; box-shadow: 0 3px 0 rgba(46,37,72,.18), 0 0 16px rgba(255,196,60,.6); }
.tier-11 .tile-num { color: #7A4E00; }

#hint {
  font-family: var(--f-pixel); font-size: 11px; color: var(--c-purple);
  background: var(--card); padding: 6px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--b-soft); white-space: nowrap; pointer-events: none; transition: opacity .3s;
}

.overlay { position: fixed; inset: 0; background: rgba(46, 37, 72, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; touch-action: none; }
.go-card { text-align: center; max-width: 320px; width: 100%; animation: fadeInUp .35s ease; }
#over-mascot { width: 84px; height: 84px; margin: 0 auto 10px; }
#over-mascot.happy { animation: pop .5s ease; }
#over-mascot.sad { animation: shakeX .5s ease; }
.go-title { font-family: var(--f-display); font-size: 24px; color: var(--ink); }
.go-score { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.go-score strong { font-family: var(--f-pixel); font-size: 20px; color: var(--c-primary); margin-left: 6px; }
.go-actions { display: flex; gap: 10px; margin-top: 16px; }
.go-actions .btn { flex: 1; }
[hidden] { display: none !important; }