/* Quartet — 16타일 그룹 퍼즐. 폰 세로 한 손 기준.
   보드는 4×4가 화면 폭에 딱 맞고, 맞힌 그룹은 위로 쌓여 남은 판이 줄어든다. */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0a0a0a; color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

main {
  height: 100%; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  /* 상단 60px는 고정 크롬(← 홈, 게임 타이틀바, 🏆) 자리. 다른 게임과 동일 규약 —
     이보다 작으면 점수 바가 타이틀바에 가린다. */
  padding: max(60px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
}

.score-bar { display: flex; align-items: stretch; gap: 8px; flex: 0 0 auto; }
.score-box {
  flex: 1; background: #161616; border: 1px solid #2a2a2a; border-radius: 12px;
  padding: 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #a0a0a0; }
.time-val, .best-val { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.new-btn {
  flex: 0 0 auto; font: inherit; color: #0a0a0a; background: #4f9eff; border: none;
  border-radius: 12px; padding: 0 18px; min-height: 56px; cursor: pointer;
  font-weight: 700; font-size: 14px; -webkit-tap-highlight-color: transparent;
}
.new-btn:active { background: #3d8ae8; }

.status {
  margin: 0; text-align: center; font-size: 13px; font-weight: 600; color: #a0a0a0;
  min-height: 18px; flex: 0 0 auto;
}
.status.ok { color: #52d97f; }
.status.bad { color: #ff8a8a; }

#game { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* 맞힌 그룹 — 위로 쌓인다 */
.qt-solved-wrap { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.qt-solved {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  border-radius: 12px; padding: 6px; align-items: center;
}
.qt-g0 { background: rgba(255, 92, 92, 0.16);  border: 1px solid rgba(255, 92, 92, 0.4); }
.qt-g1 { background: rgba(82, 217, 127, 0.16); border: 1px solid rgba(82, 217, 127, 0.4); }
.qt-g2 { background: rgba(77, 150, 255, 0.16); border: 1px solid rgba(77, 150, 255, 0.4); }
.qt-g3 { background: rgba(176, 124, 255, 0.16); border: 1px solid rgba(176, 124, 255, 0.4); }
.qt-mini {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px; max-width: 44px; margin: 0 auto; min-height: 34px;
}

/* 미해결 타일 4×4 */
.qt-grid {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  /* 행을 항상 4개 유지한다. grid-auto-rows로 두면 묶음을 맞출수록 남은 타일이
     빈 공간을 먹으며 세로로 길쭉해진다 — 타일 크기가 판 중에 바뀌면 조작감이 흔들린다. */
  grid-template-rows: repeat(4, 1fr); gap: 8px; min-height: 0; max-height: 520px;
}
.qt-tile {
  background: #161616; border: 2px solid #2a2a2a; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px; min-height: 0; min-width: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.qt-tile:active { transform: scale(0.96); }
.qt-tile.sel { border-color: #4f9eff; background: #16243a; }
.qt-tile:focus-visible { outline: 2px solid #4f9eff; outline-offset: 2px; }
.qt-glyphs {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px;
}
.qt-glyphs.c3, .qt-glyphs.c4 { max-width: 58px; }
.qt-glyphs svg { display: block; }

/* 엄지가 닿는 하단에 고정. 위 여백은 보드가 줄어들며 생기는 자리. */
.qt-actions { flex: 0 0 auto; margin-top: auto; }
.qt-submit {
  width: 100%; font: inherit; font-weight: 800; font-size: 16px;
  color: #0a0a0a; background: #4f9eff; border: none; border-radius: 14px;
  min-height: 54px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qt-submit:active { background: #3d8ae8; }
/* 비활성은 WCAG 대비 요건에서 면제되지만, 주요 동작 버튼이라 읽히게는 해둔다 (4.74:1). */
.qt-submit:disabled { background: #2a2a2a; color: #949494; cursor: default; }

@keyframes qt-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.qt-grid.shake { animation: qt-shake 0.32s; }

/* 공통 chrome */
.home-link, .hof-link {
  position: fixed; top: max(12px, env(safe-area-inset-top)); z-index: 10;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff; text-decoration: none;
  font-size: 20px; font-weight: 600; line-height: 1; border: none; cursor: pointer;
  font-family: inherit; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.home-link { left: max(12px, env(safe-area-inset-left)); }
.hof-link { right: max(12px, env(safe-area-inset-right)); }

.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }
.overlay-card {
  background: #161616; border: 1px solid #2a2a2a; border-radius: 18px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;
  min-width: 240px; max-width: 320px; width: 100%;
}
.overlay-card h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.overlay-score { margin: 0; font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.overlay-sub { margin: -4px 0 0; font-size: 14px; font-weight: 600; color: #a0a0a0; }
.overlay-card button {
  font: inherit; color: #fff; background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 12px 20px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px;
  width: 100%; -webkit-tap-highlight-color: transparent;
}
.overlay-card button:active { background: rgba(255, 255, 255, 0.18); }
.overlay-card .save-btn { background: #4f9eff; border-color: #4f9eff; color: #0a0a0a; }
.overlay-card .save-btn:active { background: #3d8ae8; }

@media (min-height: 760px) {
  .qt-mini { min-height: 40px; }
}