:root {
  --primary: #4a6fa5;
  --primary-dark: #3a5a8a;
  --accent: #e8913a;
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #26323f;
  --text-soft: #5f6f80;
  --success: #3d9a5f;
  --error: #c94f4f;
  --radius: 18px;
  --shadow: 0 2px 10px rgba(30, 50, 80, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

/* База для rem; переопределяется настройкой размера шрифта */
html { font-size: 18px; }
html[data-fs="large"] { font-size: 21px; }
html[data-fs="xlarge"] { font-size: 24px; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1.0rem;
  line-height: 1.45;
}

#app {
  max-width: 760px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* ---------- Header ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px 16px;
}
.topbar h1 {
  font-size: 1.444rem;
  color: var(--primary-dark);
  flex: 1;
}
.topbar .stats {
  display: flex;
  gap: 10px;
  font-size: 0.889rem;
  color: var(--text-soft);
  align-items: center;
}
.stat-chip {
  background: var(--card);
  border-radius: 999px;
  padding: 6px 14px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  font-weight: 600;
}

/* ---------- Home grid ---------- */
.block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.block-card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.1s;
  font-family: inherit;
  position: relative;
}
.block-card:active { transform: scale(0.97); }
.block-card .icon { font-size: 2.444rem; }
.block-card .name { font-size: 1.111rem; font-weight: 700; color: var(--text); }
.block-card .desc { font-size: 0.833rem; color: var(--text-soft); }
.block-card .done-mark {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.222rem;
}

/* ---------- Block screen ---------- */
.block-screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
}
.block-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-btn {
  background: var(--card);
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 1.222rem;
  width: 52px;
  height: 52px;
  cursor: pointer;
  color: var(--primary-dark);
  font-family: inherit;
}
.block-header h2 { font-size: 1.222rem; color: var(--primary-dark); flex: 1; }

.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.task-text {
  font-size: 1.111rem;
  font-weight: 600;
  text-align: center;
}
.hint-text {
  font-size: 0.833rem;
  color: var(--text-soft);
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 16px 22px;
  font-size: 1.056rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.btn:active { background: var(--primary-dark); }
.btn.secondary { background: #e3e9f2; color: var(--primary-dark); }
.btn.small { padding: 10px 16px; font-size: 0.889rem; border-radius: 10px; }
.btn:disabled { opacity: 0.45; cursor: default; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Choice buttons (language, logic) ---------- */
.choice-list { display: flex; flex-direction: column; gap: 12px; }
.choice {
  background: #eef2f8;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 16px;
  font-size: 1.111rem;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  color: var(--text);
}
.choice.correct { background: #e2f3e8; border-color: var(--success); }
.choice.wrong { background: #fbe7e7; border-color: var(--error); }

.lang-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lang-tab {
  background: #eef2f8;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.944rem;
  cursor: pointer;
  font-family: inherit;
}
.lang-tab.active { background: var(--primary); color: #fff; }

.progress-line {
  height: 10px;
  background: #e3e9f2;
  border-radius: 999px;
  overflow: hidden;
}
.progress-line > div {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s;
}

.big-word { font-size: 1.889rem; font-weight: 800; text-align: center; color: var(--primary-dark); }

/* ---------- Canvas blocks ---------- */
.canvas-wrap {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;
  position: relative;
}
canvas.draw-canvas { display: block; width: 100%; touch-action: none; }
.mirror-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--text-soft) 0 8px, transparent 8px 16px);
  opacity: 0.4;
  pointer-events: none;
}

.palette { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
.color-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
}
.color-dot.active { border-color: var(--text); }

/* ---------- Tangram ---------- */
.tangram-svg { display: block; width: 100%; height: auto; touch-action: none; }
.tangram-piece { cursor: grab; }
.tangram-target { fill: #e3e9f2; stroke: #b9c6d8; stroke-width: 2; stroke-dasharray: 6 4; }

/* ---------- Crossword ---------- */
.cw-grid {
  display: grid;
  gap: 4px;
  justify-content: center;
  margin: 0 auto;
}
.cw-cell {
  width: 52px; height: 52px;
  background: #eef2f8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.333rem;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  color: var(--text);
  border: 2px solid transparent;
}
.cw-cell.empty { background: transparent; cursor: default; }
.cw-cell.selected { border-color: var(--accent); background: #fdf3e7; }
.cw-cell.good { background: #e2f3e8; }
.cw-cell .num {
  position: absolute;
  top: 2px; left: 4px;
  font-size: 0.611rem;
  font-weight: 600;
  color: var(--text-soft);
}
.cw-clues { font-size: 0.889rem; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.letter-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.letter-key {
  width: 48px; height: 52px;
  background: var(--card);
  box-shadow: var(--shadow);
  border: none;
  border-radius: 10px;
  font-size: 1.222rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.letter-key:active { background: #eef2f8; }

/* ---------- Logic (knapsack) ---------- */
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.logic-item {
  background: #eef2f8;
  border: 3px solid transparent;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.944rem;
  color: var(--text);
}
.logic-item.picked { border-color: var(--primary); background: #e2ecf8; }
.logic-item .item-icon { font-size: 1.889rem; display: block; }
.logic-item .item-meta { color: var(--text-soft); font-size: 0.833rem; }

.result-banner {
  text-align: center;
  font-size: 1.111rem;
  font-weight: 700;
  padding: 14px;
  border-radius: 14px;
}
.result-banner.ok { background: #e2f3e8; color: var(--success); }
.result-banner.bad { background: #fbe7e7; color: var(--error); }

/* ---------- Completion overlay ---------- */
.finish-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.finish-box .emoji { font-size: 3.333rem; }

/* ---------- Settings ---------- */
.gear-btn {
  background: var(--card);
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-size: 1.222rem;
  width: 52px;
  height: 52px;
  cursor: pointer;
  font-family: inherit;
}
.seg-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.seg {
  background: #eef2f8;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.944rem;
  color: var(--text);
}
.seg.active { background: var(--primary); color: #fff; }
.settings-section-title { font-weight: 700; font-size: 1.0rem; margin-bottom: 10px; }

@media (max-width: 420px) {
  .cw-cell { width: 44px; height: 44px; font-size: 1.111rem; }
  .block-card .icon { font-size: 2.0rem; }
}