/* ============================================
   어르신 게임 - 스타일
   원칙: 큰 글씨(최소 20px), 큰 버튼, 높은 대비,
   탭 전용, 확대/스와이프 방지
   ============================================ */

:root {
  --bg: #FFF8EC;          /* 따뜻한 미색 배경 */
  --card: #FFFFFF;
  --ink: #2B2118;          /* 진한 갈색-검정 글씨 */
  --ink-soft: #6B5D4F;
  --red: #C0392B;          /* 화투 빨강 */
  --red-dark: #96281B;
  --green: #1E8449;
  --blue: #1F618D;
  --yellow: #F5B041;
  --gold: #B9770E;
  --line: #E8DCC8;
  --good: #1E8449;
  --shadow: 0 4px 10px rgba(90, 60, 20, 0.15);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  overscroll-behavior: none;   /* 당겨서 새로고침 방지 */
  touch-action: manipulation;  /* 더블탭 확대 방지 */
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-size: 22px;             /* 기본 글씨 크게 */
  line-height: 1.45;
  position: fixed;             /* 스크롤 튐 방지 */
  width: 100%;
  overflow: hidden;
}

#app {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- 공통 버튼 ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;            /* 큰 터치 영역 */
  padding: 14px 20px;
  border: none;
  border-radius: 18px;
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); filter: brightness(0.92); }
.btn.green { background: var(--green); }
.btn.blue  { background: var(--blue); }
.btn.gray  { background: #8D8073; }
.btn.big   { min-height: 88px; font-size: 30px; }
.btn.wide  { width: 100%; }

/* ---------- 상단 바 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--red);
  color: #fff;
  flex-shrink: 0;
}
.topbar .back {
  min-width: 76px;
  min-height: 60px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  font-family: inherit;
}
.topbar .back:active { background: rgba(255,255,255,0.4); }
.topbar h1 {
  font-size: 26px;
  font-weight: 800;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .score-chip {
  min-width: 76px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  background: rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 12px 8px;
}

/* ---------- 화면 컨테이너 ---------- */
.screen {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.screen.center { justify-content: center; align-items: center; text-align: center; }

/* ---------- 홈 화면 ---------- */
.home-head {
  background: linear-gradient(150deg, var(--red), var(--red-dark));
  color: #fff;
  border-radius: 22px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
}
.home-head .greet { font-size: 28px; font-weight: 800; }
.home-head .date { font-size: 21px; opacity: 0.92; margin-top: 4px; }

.stat-row {
  display: flex;
  gap: 12px;
}
.stat-card {
  flex: 1;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-card .label { font-size: 20px; color: var(--ink-soft); font-weight: 600; }
.stat-card .value { font-size: 32px; font-weight: 800; margin-top: 2px; }
.stat-card .value.small { font-size: 24px; }
.stat-card .value .up { color: var(--good); }
.stat-card .value .down { color: var(--blue); }

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.game-tile {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  min-height: 128px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.game-tile:active { transform: scale(0.96); background: #FFF3DC; }
.game-tile .emoji { font-size: 44px; line-height: 1; }
.game-tile .name { font-size: 22px; font-weight: 800; text-align: center; word-break: keep-all; }
.game-tile .best { font-size: 18px; color: var(--ink-soft); }

/* ---------- 게임 공통 ---------- */
.game-info {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: #FDF1DC;
  border-radius: 16px;
  padding: 14px;
}
.encourage { color: var(--green); font-weight: 800; }

/* 숫자 순서 게임 */
.num-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.num-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 14px;
  background: var(--card);
  border: 2px solid var(--line);
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: 0 3px 6px rgba(90,60,20,0.12);
}
.num-cell:active { background: #FFE9C2; }
.num-cell.done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* 카드 뒤집기 (같은그림 / 화투) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.flip-card {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  perspective: 600px;
  cursor: pointer;
}
.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s;
}
.flip-card.open .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.flip-back {
  background: repeating-linear-gradient(135deg, var(--red), var(--red) 14px, var(--red-dark) 14px, var(--red-dark) 28px);
  border: 3px solid var(--red-dark);
  color: #fff;
  font-size: 34px;
}
.flip-front {
  background: #fff;
  border: 3px solid var(--line);
  transform: rotateY(180deg);
  font-size: 44px;
}
.flip-front .cap { font-size: 19px; font-weight: 800; color: var(--ink-soft); }
.flip-card.matched .flip-front {
  background: #E8F8EE;
  border-color: var(--green);
}

/* 화투 카드 앞면 */
.hwatu-front {
  background: #fff;
  border: 3px solid var(--red-dark);
}
.hwatu-front .month {
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
}

/* 퀴즈 (사자성어/노래) */
.quiz-q {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 24px 18px;
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.5;
  box-shadow: var(--shadow);
}
.quiz-q .hint { display: block; font-size: 21px; color: var(--ink-soft); font-weight: 600; margin-top: 10px; }
.quiz-q .blank { color: var(--red); }
.quiz-opts { display: flex; flex-direction: column; gap: 14px; }
.quiz-opt {
  min-height: 80px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 10px 16px;
}
.quiz-opt:active { background: #FFF3DC; }
.quiz-opt.right { background: var(--green); border-color: var(--green); color: #fff; }
.quiz-opt.wrong { background: #FADBD8; border-color: #E6B0AA; }

/* 두더지 잡기 */
.mole-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  align-content: center;
}
.mole-hole {
  aspect-ratio: 1;
  max-height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, #5D4324 55%, #3E2C15 100%);
  border: 5px solid #8B6B3F;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.mole-hole .mole {
  font-size: 72px;
  line-height: 1;
  transform: translateY(110%);
  transition: transform 0.18s;
  pointer-events: none;
}
.mole-hole.up .mole { transform: translateY(6%); }
.mole-hole.hit .mole { transform: translateY(110%); }

/* 색깔 따라 누르기 */
.simon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  align-content: center;
}
.simon-btn {
  aspect-ratio: 1;
  max-height: 190px;
  border: 6px solid rgba(0,0,0,0.18);
  border-radius: 24px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0,0,0,0.3);
  opacity: 0.65;
}
.simon-btn.lit { opacity: 1; transform: scale(1.05); box-shadow: 0 0 24px rgba(0,0,0,0.25); }
.simon-btn:active { opacity: 1; }
.simon-red { background: #E74C3C; }
.simon-yellow { background: #F1C40F; }
.simon-blue { background: #3498DB; }
.simon-green { background: #2ECC71; }

/* 숫자 합 만들기 */
.sum-target {
  text-align: center;
  font-size: 30px;
  font-weight: 800;
  background: #FDF1DC;
  border-radius: 18px;
  padding: 16px;
}
.sum-target b { color: var(--red); font-size: 44px; }
.sum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sum-cell {
  aspect-ratio: 1;
  max-height: 130px;
  border: 3px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  font-family: inherit;
  font-size: 42px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.sum-cell.sel { background: var(--yellow); border-color: var(--gold); }
.sum-cell.used { opacity: 0.25; }

/* 틀린그림 찾기 */
.spot-wrap { display: flex; flex-direction: column; gap: 10px; }
.spot-label { font-size: 21px; font-weight: 800; color: var(--ink-soft); text-align: center; }
.spot-svg {
  width: 100%;
  border-radius: 16px;
  border: 3px solid var(--line);
  background: #fff;
  display: block;
}
.spot-found-mark { pointer-events: none; }

/* 화투점 */
.fortune-cards { display: flex; gap: 12px; justify-content: center; }
.fortune-card {
  width: 30%;
  aspect-ratio: 3/4.4;
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, var(--red), var(--red) 14px, var(--red-dark) 14px, var(--red-dark) 28px);
  border: 3px solid var(--red-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  transition: transform 0.3s;
}
.fortune-card.revealed {
  background: #fff;
  color: var(--ink);
  transform: scale(1.03);
}
.fortune-card .m { font-size: 20px; font-weight: 800; color: var(--red); }
.fortune-card .n { font-size: 22px; font-weight: 800; }
.fortune-text {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 22px 18px;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  box-shadow: var(--shadow);
}
.fortune-text .title { color: var(--red); font-size: 28px; font-weight: 800; display: block; margin-bottom: 8px; }

/* ---------- 결과/안내 오버레이 ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 33, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}
.overlay-box {
  background: var(--card);
  border-radius: 24px;
  padding: 30px 24px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.overlay-box .big-emoji { font-size: 64px; line-height: 1; }
.overlay-box h2 { font-size: 32px; font-weight: 800; }
.overlay-box p { font-size: 24px; color: var(--ink-soft); font-weight: 600; line-height: 1.5; }
.overlay-box p b { color: var(--red); font-size: 30px; }

/* 정답 반짝 효과 */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.35s ease; }

/* 토스트 */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(43,33,24,0.9);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 30px;
  z-index: 99;
  white-space: nowrap;
}

/* 가로 화면 안내 */
#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  padding: 30px;
}
@media (orientation: landscape) and (max-height: 500px) {
  #rotate-notice { display: flex; }
}