:root {
  --green: #80bba3;
  --pink: #d98f8a;
  --ink: #222;
  --accent: #e8763a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--pink);
  font-family: "Rubik", "Heebo", system-ui, sans-serif;
  color: var(--ink);
}
header {
  background: var(--green);
  border-bottom: 6px solid #111;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
}
h1 {
  margin: 0;
  background: #fff;
  border: 4px solid #111;
  padding: 4px 20px;
  font-size: 2rem;
}
.subtitle { color: #fff; font-size: 1.6rem; font-weight: 700; }

main { max-width: 520px; margin: 0 auto; padding: 16px; text-align: center; }

#progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
#progress button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #111; background: #fff; font-size: 1.1rem; cursor: pointer;
}
#progress .current { background: var(--accent); color: #fff; }
#progress .done::after { content: "✓"; font-size: .7rem; margin-inline-start: 2px; }

.card {
  background: #fff;
  border: 5px solid #111;
  border-radius: 6px;
  padding: 20px 16px;
  direction: ltr; /* numbers read left-to-right */
}
.row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 76px; }
.plus { font-size: 2rem; font-weight: 700; margin-inline-end: auto; width: 1.5rem; text-align: center; }
hr { border: 0; border-top: 4px solid #111; margin: 8px 0; }

.cell {
  position: relative;
  width: 68px; height: 68px;
  border: 3px dashed #bbb; border-radius: 12px; background: #fafafa;
  cursor: pointer; padding: 0;
}
.cell.selected { border: 3px solid var(--accent); background: #fff1e8; }
.cell .pic { font-size: 2.2rem; line-height: 1; }
.cell .digit {
  position: absolute; bottom: -2px; right: 4px;
  font-size: 1.3rem; font-weight: 800; color: #1a6fb0;
}

.hint { color: #fff; font-weight: 600; margin: 14px 0 8px; }
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; direction: ltr; }
.pad button {
  height: 56px; font-size: 1.6rem; font-weight: 700;
  border: 3px solid #111; border-radius: 10px; background: #fff; cursor: pointer;
}
.pad button:disabled { opacity: .5; cursor: default; }
.pad button.used { background: #eee; color: #999; }

.actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.actions button, .message button {
  font: inherit; font-size: 1.2rem; padding: 10px 24px;
  border: 3px solid #111; border-radius: 10px; background: #fff; cursor: pointer;
}
.primary { background: var(--accent) !important; color: #fff; font-weight: 700; }

.message { min-height: 3rem; margin-top: 12px; font-size: 1.3rem; font-weight: 700; color: #fff; }
.message.ok { color: #0b5d2a; background: #d6f5df; border-radius: 10px; padding: 8px; }
.message.bad { color: #7a1010; }

@media (max-width: 520px) {
  header { gap: 10px; padding: 10px 12px; }
  h1 { font-size: 1.4rem; padding: 2px 12px; border-width: 3px; }
  .subtitle { font-size: 1.1rem; }
  .back { width: 38px; height: 38px; font-size: 1.5rem; margin-inline-start: auto; order: 3; }
  .cell { width: 58px; height: 58px; }
}

/* back link + menu */
.back {
  font-size: 1.8rem; text-decoration: none; color: #fff; font-weight: 700;
  border: 3px solid #111; border-radius: 50%; width: 44px; height: 44px;
  display: grid; place-items: center; background: rgba(0,0,0,.15);
}
.menu { display: grid; gap: 16px; padding-top: 32px; }
.menu-card {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  background: #fff; border: 5px solid #111; border-radius: 10px; padding: 24px 16px;
  text-decoration: none; color: var(--ink);
}
.menu-card strong { font-size: 1.8rem; }
.menu-card small { font-size: 1.1rem; color: #555; }
.menu-pics { font-size: 2.6rem; letter-spacing: .2em; }

/* code crossword */
.code-page { --pink: #e4c1cf; --green: #e0914d; background: var(--pink); }
.code-page header { background: var(--green); }
.code-page main { max-width: 640px; }
h2 { margin: 4px 0 10px; font-size: 1.6rem; }
.crossword {
  --cell: min(52px, calc((100vw - 56px) / var(--cols)));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell);
  justify-content: center; direction: ltr; background: #fff; border: 5px solid #111;
  border-radius: 6px; padding: 14px 8px; overflow-x: auto;
}
.xcell { position: relative; padding: 0; background: #fff; border: 2px solid #222; cursor: pointer; }
.xcell.empty { border: 0; background: none; }
.xcell .pic { font-size: calc(var(--cell) * .55); line-height: 1; }
.xcell .letter {
  position: absolute; inset: auto 2px 0 auto; font-size: calc(var(--cell) * .42);
  font-weight: 800; color: #1a6fb0; line-height: 1;
}
.xcell.selected { background: #fff1e8; outline: 3px solid var(--accent); z-index: 1; }
.xcell.wrong .letter { color: #c0182b; }
.xcell.wrong { background: #ffe3e3; }
.keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 4px; }
.keys button {
  height: 52px; font-size: 1.5rem; font-weight: 700;
  border: 3px solid #111; border-radius: 10px; background: #fff; cursor: pointer;
}
.keys button:disabled { opacity: .5; cursor: default; }
.keys button.used { background: #eee; color: #999; }
.code-page .hint { color: var(--ink); }
.code-page .message { color: var(--ink); }

/* crossword: bigger cells, keyboard pinned to the bottom on phones */
.crossword { --cell: min(52px, calc((100vw - 40px) / var(--cols))); padding: 8px 4px; border-width: 3px; }
.code-page .hint { font-size: .9rem; margin: 8px 0 0; }
.code-page .message { min-height: 2.4rem; margin-top: 6px; font-size: 1.15rem; }
.controls {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--pink); padding: 8px 0 10px; border-top: 3px solid #111;
  margin: 0 -16px; padding-inline: 12px;
}
.keys { grid-template-columns: repeat(8, 1fr); gap: 5px; margin-top: 0; }
.keys button { height: 42px; font-size: 1.3rem; border-width: 2px; border-radius: 8px; }
.controls .actions { margin-top: 8px; }
.controls .actions button { font-size: 1rem; padding: 6px 18px; border-width: 2px; }
@media (min-width: 521px) { .keys { grid-template-columns: repeat(12, 1fr); } }

/* picture equations */
.eq-page { --pink: #b9d3e8; --green: #5f9ccf; background: var(--pink); }
.eq-page header { background: var(--green); }
.eqs { display: grid; gap: 4px; padding: 10px 8px; }
.eq {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 64px; direction: ltr; border-bottom: 2px dashed #ddd;
}
.eq:last-child { border-bottom: 0; }
.eq .pic { font-size: 2.1rem; line-height: 1; }
.eq .op { font-size: 1.6rem; font-weight: 700; color: #555; }
.eq .total { min-width: 2.2ch; font-size: 2rem; font-weight: 800; color: #1a6fb0; text-align: left; }
.eq.question { background: #fff6e8; border-radius: 10px; }
.eq.question .total { color: var(--accent); }
.hints { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 2rem; direction: ltr; }
.chip { background: #fff; border: 2px solid #111; border-radius: 999px; padding: 2px 12px; font-size: 1.2rem; font-weight: 700; }
.eq-page .hint, .eq-page .message { color: var(--ink); }
.eq-page .hint { font-size: .95rem; margin: 10px 0 4px; }
.numpad { grid-template-columns: repeat(6, 1fr); gap: 5px; }
.numpad button { height: 46px; font-size: 1.4rem; }
.eq-page .controls { margin: 0 -16px; padding-inline: 12px; background: var(--pink); }
@media (max-width: 380px) { .eq .pic { font-size: 1.7rem; } }

/* messages live inside the pinned bar so the keyboard never covers them */
.controls .message { min-height: 0; margin: 0 0 6px; padding: 0; font-size: 1.05rem; }
.controls .message:empty { display: none; }
.controls .message.ok { padding: 4px 8px; }
.controls .message button { font-size: 1rem; padding: 3px 12px; border-width: 2px; }
.controls .hints { min-height: 0; margin-bottom: 6px; }
.controls .hints:empty { display: none; }
.eq-page h1 { white-space: nowrap; font-size: 1.25rem; }

/* compact picture-equation rows so the question line stays above the pinned bar */
.eq { min-height: 50px; }
.eq .pic { font-size: 1.9rem; }
.eq .total { font-size: 1.8rem; }
.eqs { padding: 6px 8px; }
.eq-page #progress { margin-bottom: 8px; }
.numpad button { height: 40px; font-size: 1.3rem; }
.pad[hidden] { display: none; }