:root {
  --bg: #FAF6EE;
  --surface: #FFFFFF;
  --ink: #2B2B2B;
  --muted: #8A8478;
  --line: #E4DCCD;
  --accent: #4A86B8;
  --accent-soft: #DCEAF5;
  --glow: #FFCF4D;
  --good: #63B56A;
  --vowel: #D0443A;
  --cons: #2C66AE;
  --radius: 22px;
  --shadow: 0 2px 0 rgba(60, 50, 30, .08), 0 6px 18px rgba(60, 50, 30, .08);
  --font: Arial, "Helvetica Neue", Roboto, "Segoe UI", sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
#app { height: 100dvh; }
.screen { height: 100%; display: flex; flex-direction: column; }

/* ---------- шапки ---------- */
.head {
  display: flex; align-items: center; gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 20px 8px;
}
.head h1 { margin: 0; font-size: clamp(22px, 4vmin, 40px); font-weight: 700; flex: 1; }
.back {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow); font-size: 30px;
}

/* кнопка «удерживайте» с кольцом-прогрессом */
.hold-btn {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 30px; display: grid; place-items: center; touch-action: none;
}
.hold-btn .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.hold-btn .ring circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; }
.hold-btn.holding .ring circle { transition: stroke-dashoffset var(--hold) linear; stroke-dashoffset: 0; }
.hold-btn .tip {
  position: absolute; top: 100%; margin-top: 6px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.hold-btn.hint .tip { opacity: 1; }
.gear { color: var(--muted); font-size: 26px; }

/* ---------- главный экран ---------- */
.tiles {
  flex: 1; overflow-y: auto; padding: 12px 20px 28px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  align-content: start;
}
.tile {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 20px; text-align: left;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px;
  transition: transform .15s;
}
.tile:active { transform: scale(.97); }
.tile-icon { grid-row: 1 / 4; font-family: var(--emoji); font-size: 56px; line-height: 1; align-self: center; }
.tile-title { font-size: 22px; font-weight: 700; }
.tile-sub { font-size: 15px; color: var(--muted); }
.tile-prog { font-size: 14px; color: var(--accent); font-weight: 700; }

/* ---------- страницы раздела ---------- */
.pages {
  flex: 1; overflow-y: auto; padding: 12px 20px 28px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
}
.page-tile {
  position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.page-tile:active { transform: scale(.97); }
.pv-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.pv { font-family: var(--emoji); font-size: 34px; width: 48px; height: 48px; display: grid; place-items: center; }
.pv .pimg { width: 44px; height: 44px; object-fit: contain; }
.page-label { font-size: 17px; font-weight: 700; color: var(--muted); }
.page-tile.done::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--good); color: #fff;
  font-weight: 700; display: grid; place-items: center; font-size: 18px;
}

/* ---------- игра ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
}
.dots { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); transition: background .3s; }
.dot.cur { box-shadow: 0 0 0 2px var(--accent-soft); }
.dot.on { background: var(--good); }
.page-name { width: 64px; text-align: right; color: var(--muted); font-size: 14px; }
.exit { width: 56px; height: 56px; font-size: 26px; color: var(--muted); }

.board {
  --cols: 2;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 2.4vmin; padding: 1vmin 3vmin;
  align-content: center; justify-items: center;
  touch-action: none;
}
.board.n1 { --cols: 1; --pic: 34vmin; --font: 10vmin; }
.board.n2 { --cols: 2; --pic: 25vmin; --font: 7.5vmin; }
.board.n3 { --cols: 3; --pic: 19vmin; --font: 6vmin; }
.board.n4 { --cols: 4; --pic: 16vmin; --font: 5.4vmin; }
@media (orientation: portrait) {
  .board.n3 { --cols: 1; --pic: 15vh; --font: 6vh; }
  .board.n4 { --cols: 2; --pic: 18vmin; --font: 6.5vmin; }
  .board.n2 { --cols: 1; --pic: 20vh; --font: 8vmin; }
}
/* ширина колонки — чтобы длинные слова ужимались, а не вылезали */
.board { --colw: calc((100vw - 6vmin) / var(--cols) - 6vmin); }

.item {
  position: relative; width: 100%; height: 100%; max-height: 100%; min-width: 0;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; gap: 2vmin;
  padding: 2vmin; border: 4px solid transparent;
  transition: border-color .2s, transform .2s;
}
.has-pair .pic { font-size: calc(var(--pic) * .62); height: calc(var(--pic) * .75); }
.has-pair .pic.two { font-size: calc(var(--pic) * .5); }
.has-pair .pic.small { font-size: calc(var(--pic) * .45); height: calc(var(--pic) * .75); }
.item .main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5vmin; min-width: 0; }
.item.over { border-color: var(--accent); transform: scale(1.02); }
.item.glow { border-color: var(--glow); }
.item.done { border-color: transparent; }

.pic {
  position: relative; font-family: var(--emoji);
  font-size: var(--pic); line-height: 1; height: calc(var(--pic) * 1.15);
  display: flex; align-items: center; justify-content: center;
  filter: grayscale(1) contrast(.9); opacity: .55;
  transition: filter .5s, opacity .5s;
}
.pic.two { font-size: calc(var(--pic) * .78); }
.pic.two .emo + .emo { margin-left: -.18em; transform: translateY(.08em); }
.pic .pimg { width: calc(var(--pic) * 1.15); height: calc(var(--pic) * 1.15); object-fit: contain; pointer-events: none; }
.pic.alive, .item.done .pic { filter: none; opacity: 1; }
.k-shadow .pic, .k-word .pic { filter: none; opacity: 1; }
.pic.alive { animation: alive .9s ease-out; }
.pic.wiggle { animation: wiggle .5s ease-in-out; }
.pic.small { font-size: calc(var(--pic) * .55); height: calc(var(--pic) * .65); filter: none; opacity: 1; }

.curtain {
  position: absolute; inset: -4px; border-radius: 18px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font); font-weight: 700; font-size: calc(var(--pic) * .6);
  display: grid; place-items: center;
  transition: transform .5s ease-in, opacity .5s;
  transform-origin: top;
}
.curtain.open { transform: scaleY(0); opacity: 0; }
.item .pic:has(.curtain:not(.open)) { filter: none; opacity: 1; }

.word {
  font-weight: 600; letter-spacing: .03em; white-space: nowrap; line-height: 1.15;
  font-size: min(var(--font), calc(var(--colw) / (var(--len, 6) * .78)));
  display: flex; align-items: center;
}
.has-pair .word { font-size: min(var(--font), calc(var(--colw) / (var(--len, 6) * 1.7))); }
.word.ref { color: var(--muted); }
.ch { display: inline-block; transition: color .2s, background .2s, transform .2s; border-radius: 6px; }
.ch.hl { background: #FFF1B8; transform: translateY(-.06em); }
.lower .word, .lower .card { text-transform: lowercase; }

.slot {
  display: inline-flex; margin: 0 .06em; padding: 0 .08em;
  min-width: 1.1em; border-radius: 10px;
  border: 3px dashed #C9BFAE; background: #FBF8F2;
}
.slot:not(.filled) .ch { visibility: hidden; }
.slot.filled { margin: 0; padding: 0; min-width: 0; border: 0; background: transparent; animation: pop .45s ease-out; }
.item.glow .slot:not(.filled) { border-color: var(--glow); background: #FFF6D6; }

.caption { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; font-size: min(var(--font), 9vmin); }
.item.done .caption { opacity: 1; transform: none; }

.pair { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.arrow { font-size: calc(var(--font) * .8); color: var(--line); }
/* в узких колонках пара «одна → много» встаёт столбиком */
.board.n3 .has-pair, .board.n4 .has-pair { flex-direction: column; gap: .5vmin; }
.board.n3 .has-pair .arrow, .board.n4 .has-pair .arrow { transform: rotate(90deg); line-height: 1; }
.board.n3 .has-pair .word, .board.n4 .has-pair .word { font-size: min(var(--font), calc(var(--colw) / (var(--len, 6) * .78))); }
@media (orientation: portrait) {
  .has-pair { flex-direction: column; gap: .5vmin; }
  .has-pair .arrow { transform: rotate(90deg); line-height: 1; }
  .has-pair .word { font-size: min(var(--font), calc(var(--colw) / (var(--len, 6) * .78))); }
}

/* ---------- карточки ---------- */
.tray {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2vmin; padding: 2vmin 3vmin max(2.5vmin, env(safe-area-inset-bottom));
  touch-action: none;
}
.card {
  min-width: max(84px, 15vmin); min-height: max(72px, 13vmin);
  padding: 0 2.4vmin;
  font-size: clamp(30px, 7.5vmin, 72px); font-weight: 600; letter-spacing: .03em;
  background: var(--surface); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .12);
  display: inline-flex; align-items: center; justify-content: center;
  touch-action: none; transition: transform .15s, opacity .3s, border-color .2s, background .2s;
}
.card.long { font-size: clamp(26px, 6vmin, 60px); }
.card.sel { background: #FFF6D6; border-color: var(--glow); transform: translateY(-4px); box-shadow: 0 8px 0 rgba(0, 0, 0, .10); }
.card.dim { opacity: .35; }
.pic-card { padding: 1vmin; border-width: 3px; border-color: var(--line); }
.pic-card .pimg { width: max(72px, 14vmin); height: max(72px, 14vmin); object-fit: contain; pointer-events: none; }
.card .ch { pointer-events: none; }

.ghost {
  position: fixed; z-index: 50; margin: 0; pointer-events: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  transition: none !important; animation: none !important;
  will-change: transform;
}
/* пока карточку тащат, на её месте остаётся бледный след */
.card.lifted { opacity: .25; transform: none; box-shadow: none; transition: none; }

/* мягкие подсказки и реакции — без красного, без резких звуков */
.pulse { animation: pulse 1.2s ease-out 2; }
.item.nope { animation: nope .45s ease-in-out; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 207, 77, .9); }
  100% { box-shadow: 0 0 0 22px rgba(255, 207, 77, 0); }
}
@keyframes nope {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
}
@keyframes pop {
  0% { transform: scale(.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes alive {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.14) rotate(-4deg); }
  60% { transform: scale(.98) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-5deg); }
  70% { transform: rotate(5deg); }
}

/* ---------- финал страницы ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(250, 246, 238, .92);
  display: grid; place-items: center; padding: 20px;
  animation: fade .4s ease-out;
}
.panel {
  background: var(--surface); border-radius: 28px; box-shadow: var(--shadow);
  padding: 28px 32px; text-align: center; max-width: 640px; width: 100%;
}
.panel h2 { margin: 4px 0 12px; font-size: clamp(32px, 7vmin, 56px); }
.big-star { font-family: var(--emoji); font-size: clamp(64px, 14vmin, 120px); animation: alive 1.2s ease-out; }
.won { font-family: var(--emoji); font-size: clamp(36px, 7vmin, 60px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.won .pimg { width: clamp(44px, 9vmin, 72px); height: clamp(44px, 9vmin, 72px); object-fit: contain; }
.btns { display: flex; justify-content: center; gap: 16px; }
.btn {
  min-height: 72px; min-width: 72px; padding: 0 28px; border-radius: 36px;
  background: var(--bg); font-size: 28px; font-weight: 700; box-shadow: var(--shadow);
}
.btn.primary { background: var(--accent); color: #fff; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- настройки ---------- */
.set-list { flex: 1; overflow-y: auto; padding: 8px 20px 40px; }
.set-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: var(--surface); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.set-label { font-size: 19px; font-weight: 700; flex: 1 1 260px; }
.set-label small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button, .seg select {
  min-height: 52px; min-width: 52px; padding: 0 18px; border-radius: 26px;
  background: var(--bg); font-size: 17px; font-weight: 600; border: 2px solid var(--line);
}
.seg select { font: inherit; font-size: 16px; max-width: 260px; }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.about { color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 760px; }

/* ---------- спокойный режим ---------- */
.calm *, .calm *::before, .calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
.calm .pulse { animation: none !important; outline: 4px solid var(--glow); outline-offset: 2px; }