/* Minimal cartoon style: cream paper, thick ink outlines, hard shadows, flat colors. */
:root {
  --paper: #fff8ec;
  --ink: #1d1b19;
  --soft: #6f6a62;
  --white: #ffffff;
  --good: #3ccf6e;
  --bad: #ff5a5a;
  --line: 3px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --round: 20px;
  --c: #ffd23f; /* current game color */
}

[data-game="math"]    { --c: #ffd23f; }
[data-game="compare"] { --c: #ff9ebb; }
[data-game="memory"]  { --c: #8fd3ff; }
[data-game="digits"]  { --c: #a6e98f; }

* { box-sizing: border-box; margin: 0; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 600 16px/1.35 ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

main {
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.screen { display: none; height: 100%; flex-direction: column; gap: 16px; }
.screen.active { display: flex; }
#home, #auth, #result, #board { overflow-y: auto; padding-bottom: 8px; }

.muted, .kicker { color: var(--soft); }

/* Chunky "sticker" look shared by buttons and cards. */
.entry, .pad button, .pair button, .grid button, .form input, .form button,
.row button, .bar button, .chips button {
  background: var(--white);
  border: var(--line);
  border-radius: var(--round);
  box-shadow: var(--shadow);
  transition: transform 0.06s, box-shadow 0.06s;
}
.entry:active, .pad button:active, .pair button:active, .grid button:active,
.form button:active, .row button:active, .bar button:active, .chips button:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.textlink { padding: 6px 0; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- Home ---------- */

.mast { padding-top: 6px; }
.mast-row { display: flex; justify-content: space-between; align-items: center; color: var(--soft); font-size: 0.9rem; }
.mast h1 {
  margin: 14px 0 6px;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mast h1::after { content: " ✦"; color: #ffb000; -webkit-text-stroke: 2px var(--ink); }

.index { list-style: none; padding: 0; display: grid; gap: 14px; }
.entry {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  text-align: left;
  background: var(--c);
}
.no {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: 1.6rem;
  font-weight: 900;
}
.title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.title strong { font-size: 1.25rem; font-weight: 900; }
.title small { font-size: 0.85rem; opacity: 0.75; }
.score { text-align: right; font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.score small { display: block; font-size: 0.7rem; opacity: 0.7; }

.more { align-self: center; }

/* ---------- Top bar ---------- */

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.bar button { width: 44px; height: 44px; border-radius: 50%; font-size: 1.1rem; font-weight: 900; box-shadow: 3px 3px 0 var(--ink); }
.bar h2 { font-size: 1.3rem; font-weight: 900; }
.bar span { min-width: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar span:last-child { text-align: right; }

.progress { height: 14px; border: var(--line); border-radius: 999px; background: var(--white); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--c); border-right: var(--line); transition: width 0.2s linear; }

/* ---------- Game stage ---------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  border-radius: 28px;
  font-variant-numeric: tabular-nums;
}
.stage.good { animation: good 0.35s ease-out; }
.stage.bad { animation: shake 0.35s ease-out; }
@keyframes good { 0% { transform: scale(1.04); background: color-mix(in srgb, var(--good) 30%, transparent); } }
@keyframes shake {
  0% { background: color-mix(in srgb, var(--bad) 30%, transparent); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}

.problem { font-size: clamp(2.8rem, 14vw, 4.2rem); font-weight: 900; letter-spacing: -0.02em; text-align: center; }
.problem.digits { font-size: clamp(2rem, 11vw, 3.2rem); letter-spacing: 0.1em; word-break: break-all; }
.answer {
  min-width: 65%;
  padding: 10px 22px;
  text-align: center;
  font-size: clamp(2rem, 10vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  word-break: break-all;
  background: var(--c);
  border: var(--line);
  border-radius: var(--round);
  box-shadow: var(--shadow);
}
.answer.wrong { background: var(--bad); color: var(--white); }

/* Bigger */
.pair { display: grid; gap: 16px; width: 100%; }
.pair button { padding: 30px 10px; font-size: clamp(1.9rem, 9vw, 2.6rem); font-weight: 900; }

/* Memory grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 10px;
  width: min(100%, 380px);
  aspect-ratio: 1;
}
.grid button { border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); transition: background 0.15s, transform 0.06s; }
.grid .lit { background: var(--c); }
.grid .hit { background: var(--good); }
.grid .miss { background: var(--bad); }

/* Number pad */
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 3px 3px 0; }
.pad[hidden] { display: none; }
.pad button {
  height: clamp(54px, 8.5vh, 70px);
  font-size: 1.7rem;
  font-weight: 900;
  user-select: none;
  -webkit-user-select: none;
}
.pad [data-key="clear"], .pad [data-key="back"] { background: var(--c); }

@media (hover: hover) and (min-height: 800px) {
  .pad { max-width: 360px; width: 100%; margin: 0 auto; }
}

/* ---------- Auth ---------- */

.form { display: flex; flex-direction: column; gap: 14px; }
.form input { padding: 15px 16px; outline: none; box-shadow: 3px 3px 0 var(--ink); }
.form input:focus { background: #fff3c4; }
.form button { padding: 15px; font-weight: 900; }
.form .primary { background: #ffd23f; }
.error { color: #d92f2f; min-height: 1.2em; font-size: 0.9rem; }

/* ---------- Result ---------- */

#result { text-align: center; padding-top: 20px; }
#result h2 { font-size: 1.2rem; color: var(--soft); }
.big {
  align-self: center;
  min-width: 150px;
  padding: 18px 30px;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  background: var(--c);
  border: var(--line);
  border-radius: 28px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
  animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes pop { from { transform: rotate(-2deg) scale(0.5); } }
.rating { font-size: 1.15rem; }
.rating b { font-size: 1.5rem; }
.row { display: flex; gap: 12px; margin-top: auto; padding: 0 4px 4px 0; }
.row button { flex: 1; padding: 15px; font-weight: 900; }
.row .primary { background: var(--c); }

/* ---------- Leaderboard ---------- */

.chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 4px 6px 2px; }
.chips button { flex: none; padding: 9px 14px; font-size: 0.9rem; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.chips button.on { background: var(--c); }
.chips [data-board="math"]    { --c: #ffd23f; }
.chips [data-board="compare"] { --c: #ff9ebb; }
.chips [data-board="memory"]  { --c: #8fd3ff; }
.chips [data-board="digits"]  { --c: #a6e98f; }

.board {
  list-style: none;
  padding: 0;
  counter-reset: rank;
  text-align: left;
  background: var(--white);
  border: var(--line);
  border-radius: var(--round);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.board:empty { display: none; }
.board li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 2px dashed #d9d2c5; }
.board li:last-child { border-bottom: 0; }
.board li:not(.muted)::before {
  counter-increment: rank;
  content: counter(rank);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
}
.board li:nth-child(1)::before { background: #ffd23f; }
.board li:nth-child(2)::before { background: #e3e3e3; }
.board li:nth-child(3)::before { background: #f3b27a; }
.board li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li b { font-weight: 900; font-variant-numeric: tabular-nums; }
.board li.me { background: #fff3c4; }
.board li.muted { justify-content: center; }

/* ---------- Streak ---------- */

.streak {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}
.streak.hot { background: #ffb000; }

/* ---------- Challenge ---------- */

.vs-card { --c: #c9b6ff; }
.vs-card .no { font-size: 1.1rem; }

h3 { font-size: 1.15rem; font-weight: 900; }
.label { margin-top: 4px; font-size: 0.8rem; font-weight: 800; color: var(--soft); text-transform: uppercase; letter-spacing: 0.06em; }

.panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--white);
  border: var(--line);
  border-radius: var(--round);
  box-shadow: var(--shadow);
}
.panel .primary {
  margin-top: 8px;
  padding: 14px;
  font-weight: 900;
  background: #c9b6ff;
  border: var(--line);
  border-radius: var(--round);
  box-shadow: 3px 3px 0 var(--ink);
}
.panel .primary:active { transform: translate(3px, 3px); box-shadow: none; }

.chips.wrap { flex-wrap: wrap; overflow: visible; padding: 0 4px 4px 0; }
.chips.wrap button { flex: 0 1 auto; }

.inline { display: flex; gap: 10px; padding: 0 4px 4px 0; }
.inline input, .inline button {
  border: var(--line);
  border-radius: var(--round);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--white);
}
.inline input { flex: 1; min-width: 0; padding: 12px 14px; outline: none; }
.inline input:focus { background: #fff3c4; }
.inline button { padding: 0 18px; font-weight: 900; background: #ffd23f; }
.inline button:active { transform: translate(3px, 3px); box-shadow: none; }
.msg { min-height: 1.2em; font-size: 0.9rem; }

.challenges li { gap: 10px; }
.challenges li::before { display: none; }
.challenges li span { display: flex; flex-direction: column; }
.challenges li small { color: var(--soft); font-size: 0.8rem; }
.challenges li em { font-style: normal; font-size: 0.9rem; text-align: right; }
.challenges li button {
  padding: 8px 16px;
  font-weight: 900;
  background: var(--c);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
}
.up, .down, .tie {
  display: inline-block;
  padding: 1px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 900;
}
.up { background: var(--good); }
.down { background: var(--bad); color: var(--white); }
.tie { background: #e3e3e3; }

.share {
  align-self: center;
  padding: 12px 20px;
  font-weight: 900;
  background: #c9b6ff;
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.share:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.share[hidden] { display: none; }

/* ---------- Google button ---------- */

.google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  background: var(--white);
  border: var(--line);
  border-radius: var(--round);
  box-shadow: var(--shadow);
}
.google:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.or { text-align: center; color: var(--soft); font-size: 0.9rem; }
.chips[hidden], .form input[hidden], .textlink[hidden], .label[hidden] { display: none; }

/* ---------- Live match ---------- */

.lobby { align-items: center; text-align: center; }
.code { font-size: 2.6rem; font-weight: 900; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; }
.center { text-align: center; }
#lobby .big { align-self: center; margin-top: 10px; }

.strip { display: flex; justify-content: space-between; gap: 10px; font-weight: 900; }
.strip[hidden] { display: none; }
.strip span {
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
.strip span:first-child { background: var(--c); }

/* ---------- Friend requests ---------- */

.requests { box-shadow: none; border-width: 2px; }
.requests li::before { display: none; }
.requests li span { display: flex; flex-direction: column; }
.requests li small { color: var(--soft); font-size: 0.8rem; }
.requests li button {
  padding: 6px 12px;
  font-weight: 900;
  background: var(--good);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.requests li button.ghost { background: var(--white); }