:root {
  --bg: #0f1a24; --panel: #1a2a3a; --text: #f0f6fc; --muted: #9bb0c4;
  --accent: #7dd3fc; --good: #6ee7b7; --warn: #fbbf24; --touch: 72px;
  --safe-t: env(safe-area-inset-top,0px); --safe-b: env(safe-area-inset-bottom,0px);
  --safe-l: env(safe-area-inset-left,0px); --safe-r: env(safe-area-inset-right,0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  min-height: 100dvh; font-family: "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background: radial-gradient(ellipse at 20% 0%, #1e3a5f, transparent 50%), radial-gradient(ellipse at 80% 100%, #4c1d95, transparent 45%), var(--bg);
  color: var(--text);
  padding: max(.5rem,var(--safe-t)) max(.65rem,var(--safe-r)) max(.5rem,var(--safe-b)) max(.65rem,var(--safe-l));
  user-select: none; touch-action: manipulation;
}
button { font: inherit; border: none; cursor: pointer; color: inherit; }
button:active:not(:disabled) { transform: scale(.98); }
.app { max-width: 720px; margin: 0 auto; min-height: calc(100dvh - 1rem); display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; gap: .55rem; min-height: 0; }
.hidden { display: none !important; }
.top { text-align: center; }
.top h1 { font-size: clamp(1rem,3.4vw,1.3rem); color: var(--accent); font-weight: 800; }
.gentle { color: var(--muted); font-weight: 600; margin-top: .3rem; }
.top-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; flex-wrap: wrap; }
.btn-chip { min-height: 52px; padding: .4rem 1rem; border-radius: 999px; background: rgba(125,211,252,.12); border: 1px solid rgba(125,211,252,.35); color: var(--accent); font-weight: 800; }
.panel { flex: 1; background: var(--panel); border-radius: 16px; padding: .9rem; border: 1px solid rgba(125,211,252,.15); overflow-y: auto; }
.label { color: var(--warn); font-weight: 800; margin: .4rem 0 .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip, .chips button {
  min-height: var(--touch); min-width: 5rem; padding: .5rem .8rem; border-radius: 14px;
  background: rgba(0,0,0,.28); border: 2px solid rgba(155,176,196,.25); font-weight: 800;
}
.chip.active, .chips button.active { border-color: var(--warn); background: rgba(251,191,36,.18); color: var(--warn); }
.current { margin-top: .5rem; font-weight: 800; font-size: 1.1rem; }
.current span { color: var(--warn); }
.hint { color: var(--muted); font-weight: 600; margin: .5rem 0; line-height: 1.45; }
.btn-start, .btn.big { min-height: 72px; width: 100%; margin-top: .7rem; border-radius: 16px; font-size: 1.2rem; font-weight: 900; }
.btn-start, .btn.primary { background: linear-gradient(180deg,#a78bfa,#7c3aed); color: #fff; }
.btn.secondary { background: linear-gradient(180deg,#7dd3fc,#0ea5e9); color: #082f49; width: 100%; min-height: 64px; border-radius: 14px; font-weight: 900; margin-top: .4rem; }
.btn.ghost { background: rgba(255,255,255,.08); width: 100%; min-height: 56px; border-radius: 14px; font-weight: 800; margin-top: .35rem; }
.btn { min-height: 56px; border-radius: 14px; font-weight: 900; padding: 0 .8rem; background: rgba(255,255,255,.08); }
.btn.primary { color: #fff; }

.game-head { background: var(--panel); border-radius: 16px; padding: .65rem .8rem; border: 1px solid rgba(167,139,250,.25); }
.row-between { display: flex; justify-content: space-between; align-items: center; font-weight: 900; }
#play-player { color: var(--warn); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; margin-top: .4rem; }
.stat { background: rgba(0,0,0,.22); border-radius: 12px; text-align: center; padding: .35rem; }
.sl { display: block; font-size: .72rem; color: var(--muted); font-weight: 700; }
.sv { font-weight: 900; font-size: 1.05rem; }
.toast { min-height: 1.3em; text-align: center; color: var(--good); font-weight: 800; margin-top: .3rem; }
.game-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; flex-shrink: 0; }
.actions .btn { min-height: 64px; font-size: 1.05rem; }

/* 找不同 */
.diff-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.diff-panel { background: var(--panel); border-radius: 16px; padding: .55rem; border: 3px solid rgba(125,211,252,.35); }
.diff-panel h3 { text-align: center; font-size: 1rem; color: #e2e8f0; font-weight: 900; margin-bottom: .4rem; }
.diff-grid { display: grid; gap: .38rem; }
.diff-cell {
  aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.35rem, 5.5vw, 2rem); border: 4px solid rgba(255,255,255,.12); position: relative;
  overflow: hidden; padding: 0; min-height: 56px;
}
.who-photo { width: min(52vw, 220px); height: min(52vw, 220px); margin: 0 auto .55rem; border-radius: 18px; object-fit: cover; border: 3px solid rgba(167,139,250,.45); box-shadow: 0 6px 18px rgba(0,0,0,.35); filter: contrast(1.12) saturate(1.12) brightness(1.04); }
.diff-cell.tap { cursor: pointer; }
.diff-cell.tap:active { transform: scale(0.96); }
.diff-cell.found { border-color: var(--good); box-shadow: 0 0 0 4px rgba(110,231,183,.55), inset 0 0 0 2px rgba(110,231,183,.35); background: rgba(110,231,183,.18); }
.diff-cell.miss { animation: shake .35s; border-color: #f87171; }
.diff-cell.hint { border-color: var(--warn); animation: pulse 1s infinite; box-shadow: 0 0 0 4px rgba(251,191,36,.45); }
@keyframes shake { 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes pulse { 50%{ box-shadow: 0 0 18px #fbbf24, 0 0 0 5px rgba(251,191,36,.5); } }

/* 誰是誰 */
.who-card { background: var(--panel); border-radius: 16px; padding: 1rem; text-align: center; border: 1px solid rgba(167,139,250,.3); }
.who-q { font-size: clamp(1.2rem, 4.5vw, 1.5rem); font-weight: 900; margin: .5rem 0 1rem; line-height: 1.4; }
.who-emoji { font-size: 3.5rem; }
.who-opts { display: flex; flex-direction: column; gap: .5rem; }
.who-opts button {
  min-height: 80px; border-radius: 18px; font-size: 1.28rem; font-weight: 900;
  background: rgba(0,0,0,.32); border: 4px solid rgba(155,176,196,.35);
}
.who-opts button.correct { border-color: var(--good); background: rgba(110,231,183,.2); }
.who-opts button.wrong { border-color: #f87171; opacity: .7; }

.overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(5,12,20,.75);
  display: flex; align-items: center; justify-content: center;
  padding: max(.75rem,var(--safe-t)) max(.75rem,var(--safe-r)) max(.75rem,var(--safe-b)) max(.75rem,var(--safe-l));
  overflow-y: auto;
}
.card {
  width: min(520px,100%); background: var(--panel); border-radius: 18px; padding: 1rem;
  border: 1px solid rgba(167,139,250,.3); max-height: 92dvh; overflow-y: auto;
}
.card h2 { text-align: center; color: var(--warn); margin-bottom: .5rem; }
.big { text-align: center; font-size: 2rem; }
.win-rank { text-align: center; color: var(--good); font-weight: 800; margin: .4rem 0; }
.lb-cur { text-align: center; color: var(--muted); font-weight: 700; }
.lb-table { margin: .6rem 0; max-height: 40vh; overflow-y: auto; }
.lb-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lb-table th, .lb-table td { padding: .45rem .3rem; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; }
.lb-table th { color: var(--muted); position: sticky; top: 0; background: var(--panel); }
.lb-table tr.me td { color: var(--warn); }
ol { margin: .75rem 0 .75rem 1.2rem; line-height: 1.65; font-weight: 700; }
@media (max-width: 400px) {
  .actions { grid-template-columns: 1fr; }
  .diff-cell { font-size: 1.1rem; }
}


/* batch4 residual — larger taps / clearer diffs */
.diff-cell img, .diff-cell .mom-pic, .diff-cell .cell-photo {
  width: 100%; height: 100%; object-fit: cover; filter: contrast(1.14) saturate(1.12) brightness(1.03);
}
html.elder-mode .diff-cell { min-height: 64px; border-width: 5px; }
html.elder-mode .who-opts button { min-height: 88px; }