/* «Дом картинок», P1. Тёплая бумага, коричневые чернила, шалфей и терракота.
   Три семейства элементов (PLAYBOOK): плашка-сводка (.chip, .card),
   плитка действия (.tile), одна главная кнопка на экран (.btn-main).
   Все касаемые элементы ≥44 px; клетка поля ≥24 px на 320×568. */

:root {
  --paper: #f4ead6;
  --paper-2: #ebdfc4;
  --card: #fffaf0;
  --ink: #3b2c22;
  --ink-2: #6e5a48;
  --ink-light: #8a7563;
  --line: #d9c9a8;
  --sage: #7f9a6e;
  --sage-d: #5e7a50;
  --terra: #c9714a;
  --terra-d: #a9573a;
  --accent: #e9b949;
  --off: #e8453a;
  --bg: var(--card);
  --shadow: 0 2px 0 rgba(59, 44, 34, .12), 0 6px 18px rgba(59, 44, 34, .10);
  --r: 16px;
  --topbar: 56px;
  --scene-head: 52px; /* строка над сценой: плашка комнаты и значки (44 px + зазор 8) */
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.35 var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }

.ico { width: 24px; height: 24px; flex: none; display: block; }

.app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Оболочка: сверху валюты, снизу разделы (на широком экране — рейка слева). */
.shell {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--topbar) minmax(0, 1fr) auto;
  grid-template-areas: "hud" "main" "tabs";
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.shell > .hud { grid-area: hud; }
.shell > .screen { grid-area: main; padding: 0; }
.shell > .tabbar { grid-area: tabs; }

/* ---------------- плитки и кнопки ---------------- */

.tile {
  min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 14px;
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease-out, background-color .15s, opacity .15s;
  position: relative;
}
.tile:active:not(:disabled) { transform: scale(.94); }
.tile:disabled { opacity: .38; cursor: default; box-shadow: none; }
.tile-round { border-radius: 50%; width: 48px; height: 48px; padding: 0; }
.tile-ghost { background: transparent; box-shadow: none; }
.tile:focus-visible, .btn-main:focus-visible, .card-choice:focus-visible, .variant:focus-visible, .obj:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

.btn-main {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  border: 0; border-radius: 18px;
  background: var(--terra); color: #fff;
  font-weight: 800; font-size: 19px; letter-spacing: .01em;
  box-shadow: 0 3px 0 var(--terra-d), 0 8px 20px rgba(169, 87, 58, .25);
  cursor: pointer;
  transition: transform .1s ease-out, box-shadow .1s;
}
.btn-main:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--terra-d); }
.btn-main .ico { width: 22px; height: 22px; }

.btn-small {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer; font-size: 15px;
}
.btn-danger { color: var(--off); border-color: #f0b7b0; }

.row-actions { display: flex; gap: 12px; align-items: center; }
.row-actions .btn-main { flex: 1; }

/* ---------------- верхняя полоса ---------------- */

.topbar {
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 10px;
  border-radius: 20px; background: var(--card); box-shadow: var(--shadow);
  font-weight: 700; font-size: 15px;
  min-width: 0;
}
.chip .ico { width: 20px; height: 20px; color: var(--terra); }
.chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.thumb {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 52px; height: 52px; border-radius: 12px; padding: 5px;
  background: var(--paper-2);
}
.thumb img { max-width: 100%; max-height: 100%; display: block; }
/* Ещё не начатая вещь — тёплый карандашный набросок, а не бледное пятно */
.thumb.is-ghost img { filter: grayscale(1) sepia(.55) brightness(.92) contrast(1.25); opacity: .9; }
/* У кашпо длинные верёвки — на карточке видно сам горшок с листьями */
.thumb[data-thumb="r03_hanging_pot"] { overflow: hidden; }
.thumb[data-thumb="r03_hanging_pot"] img { transform: scale(1.7); transform-origin: 50% 88%; }

/* ---------------- дом ---------------- */

.home-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 12px 12px; gap: 10px;
}
.scene-wrap {
  flex: 1 1 auto; min-height: 0; width: 100%;
  /* портрет: сцена квадратная, над ней строка с плашкой; пустое место — над и под группой */
  max-height: calc(100vw - 24px + var(--scene-head));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.scene-frame {
  position: relative; flex: none;
  /* запасной путь для движков без container queries */
  width: min(100%, calc(100dvh - var(--topbar) - 320px - var(--scene-head)));
}
/* Строка над сценой не закрывает комнату. Шириной со сцену, но не уже 340 px — чтобы
   плашка «Оранжерея 12/32» и два значка помещались и при маленькой сцене. */
.scene-head {
  flex: none; width: 100%; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
}
@supports (container-type: size) {
  .scene-wrap { container-type: size; }
  .scene-frame { width: min(100cqw, calc(100cqh - var(--scene-head))); }
  .scene-head { width: max(min(100cqw, calc(100cqh - var(--scene-head))), min(100cqw, 340px)); }
}
.scene-frame > .scene { width: 100%; }
.scene.is-entering { animation: room-in .5s ease-out; }
@keyframes room-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.scene {
  position: relative; aspect-ratio: 1 / 1; flex: none;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 0 rgba(59, 44, 34, .10), 0 10px 30px rgba(59, 44, 34, .16);
  background: var(--paper-2);
  --life: 0;
  container-type: inline-size;
}
.scene-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  filter: saturate(calc(var(--sat0, .3) + (1 - var(--sat0, .3)) * (.5 * var(--life) + .5 * var(--warm, 0)))) brightness(calc(.86 + .07 * var(--life) + .07 * var(--warm, 0)));
  transition: filter 1.2s ease-out;
}
/* Тёплый свет комнаты: ступенями на 1/3, 2/3 и в готовой комнате */
.scene-warm {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, rgba(255, 200, 120, .55), rgba(255, 170, 90, .2) 55%, transparent 80%);
  mix-blend-mode: soft-light; opacity: calc(var(--warm, 0) * .9);
  transition: opacity 1.4s ease-out;
}
.scene.is-warming .scene-warm { animation: warm-up 1.8s ease-out; }
@keyframes warm-up { 0% { opacity: calc(var(--warm, 0) * .5); } 35% { opacity: 1; } 100% { opacity: calc(var(--warm, 0) * .9); } }
.ba .scene-warm { display: none; }
/* Свет из сада: тёплое пятно и лучи сквозь стеклянную крышу оранжереи */
.scene-sun {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 86% 2%, rgba(255, 210, 130, .85), rgba(255, 190, 105, .32) 36%, transparent 64%),
    repeating-linear-gradient(118deg, rgba(255, 224, 150, 0) 0 6%, rgba(255, 224, 150, .3) 8.5% 11.5%, rgba(255, 224, 150, 0) 14% 21%);
  -webkit-mask-image: linear-gradient(205deg, #000 12%, rgba(0, 0, 0, .35) 55%, transparent 85%);
  mask-image: linear-gradient(205deg, #000 12%, rgba(0, 0, 0, .35) 55%, transparent 85%);
  mix-blend-mode: screen;
  animation: sun-breathe 7s ease-in-out infinite alternate;
}
@keyframes sun-breathe { from { opacity: .75; } to { opacity: 1; } }
html.rm .scene-sun { animation: none; }
.spr-guest { filter: drop-shadow(0 3px 3px rgba(74, 50, 34, .3)); animation: guest-hop 6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes guest-hop {
  0%, 82%, 100% { transform: translate(-50%, -100%); }
  86% { transform: translate(-50%, -112%) rotate(-4deg); }
  90% { transform: translate(-50%, -100%); }
  94% { transform: translate(-50%, -106%) rotate(3deg); }
}
html.rm .spr-guest { animation: none; }
.scene-light {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--lx) var(--ly), rgba(255, 214, 140, .55), rgba(255, 196, 110, .18) calc(var(--lr) * .55), transparent var(--lr));
  mix-blend-mode: screen; opacity: 0;
  transition: opacity 1s ease-out;
}
.scene.is-lit .scene-light { opacity: 1; }
.scene.fresh-lamp .scene-light { animation: light-on 1.1s ease-out both; }
@keyframes light-on {
  0% { opacity: 0; } 20% { opacity: .8; } 32% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: 1; }
}

.obj, .spr, .spr-sign, .spr-paw {
  position: absolute; display: block;
  transform: translate(-50%, -100%) rotate(var(--rot, 0deg));
  transform-origin: 50% 100%;
}
.obj {
  padding: 0; margin: 0; border: 0; background: none; cursor: default;
}
button.obj { cursor: pointer; }
/* касаемая область не меньше 44×44 даже у маленького цветка */
button.obj::after, button.spr-letter::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.spr-obj, .spr img, img.spr { width: 100%; display: block; pointer-events: none; }
.spr-obj { transition: filter .8s ease-out, opacity .8s ease-out; }
.spr-obj.is-ghost { filter: grayscale(1) brightness(1.18) contrast(.7); opacity: .34; }
.spr-obj.is-locked { filter: grayscale(1) brightness(1.25) contrast(.6); opacity: .14; }
.obj-available .spr-obj.is-ghost, .obj-in_progress .spr-obj.is-ghost { opacity: .5; }
.obj.is-fresh .spr-obj { animation: obj-arrive .9s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes obj-arrive {
  0% { transform: scale(.7); filter: brightness(1.8); }
  55% { transform: scale(1.08); filter: brightness(1.25); }
  100% { transform: scale(1); filter: none; }
}
.spr-obj.is-wiggle { animation: wiggle .5s ease-in-out; transform-origin: 50% 100%; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); }
}

.hs-ring {
  position: absolute; left: 50%; top: 55%;
  width: clamp(34px, 9cqw, 64px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55), 0 0 18px rgba(233, 185, 73, .8);
  animation: ring 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ring {
  0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .9; }
  50% { transform: translate(-50%, -50%) scale(1.12); opacity: .45; }
}
.hs-badge {
  position: absolute; right: -8px; top: -8px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--terra); color: #fff; border: 2.5px solid #fff; box-shadow: var(--shadow);
  animation: badge 1.6s ease-in-out infinite;
}
.hs-badge .ico { width: 22px; height: 22px; }
@keyframes badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.spr { opacity: 0; transition: opacity .8s ease-out; pointer-events: none; }
.spr.is-shown { opacity: 1; }
.spr-letter.is-ready { pointer-events: auto; cursor: pointer; padding: 0; border: 0; background: none; }
.spr-letter.is-ready img { animation: letter-hop 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 220, 140, .95)); }
@keyframes letter-hop {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(-14%) rotate(-4deg); }
  80% { transform: translateY(0) rotate(0); }
  88% { transform: translateY(-6%) rotate(3deg); }
}
.spr.is-fresh.is-shown { animation: pop-in .8s .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pop-in { 0% { opacity: 0; transform: translate(-50%, -80%) rotate(var(--rot, 0deg)) scale(.6); } 100% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--rot, 0deg)) scale(1); } }
.spr-cat.is-arriving.is-shown { animation: cat-walk 1.4s ease-out both; }
@keyframes cat-walk {
  0% { opacity: 0; transform: translate(-190%, -100%); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -100%); }
}

.spr-sign { color: #7a4527; opacity: 0; transition: opacity 1.4s .3s ease-out; pointer-events: none; }
.spr-sign .sign { width: 100%; display: block; filter: drop-shadow(0 0 4px rgba(255, 214, 140, .8)); }
.spr-sign.is-shown { opacity: .92; }
.spr-paw { color: rgba(74, 50, 34, .5); opacity: 0; pointer-events: none; }
.spr-paw .paw { width: 100%; display: block; }
.spr-paw.is-shown { opacity: 1; }
.spr-paw.is-fresh.is-shown { animation: paw-in .4s calc(.6s + var(--d)) ease-out both; }
@keyframes paw-in { from { opacity: 0; } to { opacity: 1; } }

.scene.is-busy .obj { pointer-events: none; }

/* панель под сценой */
.panel {
  width: 100%; max-width: 520px; flex: none;
  display: flex; flex-direction: column; gap: 10px;
}
.panel-title { margin: 0; font-size: 17px; font-weight: 800; text-align: center; color: var(--ink-2); }
.card {
  background: var(--card); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 12px 14px;
}
.card-text { margin: 0; font-size: 16px; line-height: 1.4; }
.card-sign { margin: 6px 0 0; text-align: right; font-style: italic; color: var(--ink-2); }
.card-letter { background: #fff7e6 linear-gradient(transparent 0 calc(100% - 1px), rgba(201, 113, 74, .08) 0) 0 0 / 100% 1.4em; border: 1.5px dashed var(--line); }
.card-goal { display: flex; align-items: center; gap: 12px; }
.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-title { font-size: 17px; font-weight: 800; }
.card-sub { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.size-chip, .wip-chip {
  flex: none; font-size: 13px; font-weight: 800; padding: 3px 9px; border-radius: 10px;
  background: var(--paper-2); color: var(--ink-2);
}
.wip-chip { background: #f6dccd; color: var(--terra-d); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-choice {
  border: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 44px;
  transition: transform .12s ease-out;
}
.card-choice:active { transform: scale(.97); }
.card-choice .thumb { width: 100%; height: 64px; margin-bottom: 4px; }
.card-choice .card-sub { font-size: 13px; }
.choice-meta { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }

/* широкий экран: сцена слева, панель справа */
@media (min-aspect-ratio: 5/4) {
  .home-body { flex-direction: row; align-items: stretch; padding: 0 16px 16px; gap: 16px; }
  .scene-wrap { max-height: none; }
  .scene-frame { width: min(100%, calc(100dvh - var(--topbar) - 28px - var(--scene-head))); }
  @supports (container-type: size) { .scene-frame { width: min(100cqw, calc(100cqh - var(--scene-head))); } }
  .panel { width: clamp(260px, 34vw, 380px); max-width: none; justify-content: center; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 460px) {
  :root { --topbar: 50px; }
  .panel { gap: 8px; }
  .card { padding: 10px 12px; }
  .card-text { font-size: 15px; }
  .card-choice .thumb { height: 44px; }
  .card-choice .card-sub { display: none; }
  .btn-main { min-height: 50px; font-size: 17px; }
}

/* ---------------- поле ---------------- */

.screen-puzzle .topbar { gap: 12px; }
/* Название — одной строкой (шрифт ужимается до 13 px, см. fitTitle), под ним плашки:
   размер поля, стадия вещи, монетки на поле */
.puzzle-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.pz-name { max-width: 100%; white-space: nowrap; overflow: hidden; font-weight: 800; font-size: 18px; line-height: 1.2; }
.pz-meta { display: flex; align-items: center; gap: 6px; }
.pz-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border-radius: 9px;
  background: var(--paper-2); color: var(--ink-2); font-size: 13px; font-weight: 800; line-height: 19px; white-space: nowrap;
}
.pz-pill[hidden] { display: none; }
/* Образец картинки; на мелком поле это ещё и лупа: всё поле ↔ крупно */
.puzzle-preview { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 12px; color: var(--ink); }
.puzzle-preview:disabled { cursor: default; }
.puzzle-preview.is-lens { cursor: pointer; }
.puzzle-preview.is-lens:active { transform: scale(.94); }
.puzzle-preview > .ico {
  position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; padding: 4px;
  border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
}
.puzzle-preview[aria-pressed="true"] > .ico { background: var(--accent); }
.puzzle-preview .thumb { width: 48px; height: 48px; }
/* крупное поле: числа прилипают к краям и закрывают клетки под собой */
.puzzle-tl, .puzzle-col-clues, .puzzle-row-clues { position: relative; }
.puzzle.is-zoomed .puzzle-col-clues, .puzzle.is-zoomed .puzzle-row-clues { z-index: 2; background: var(--bg); }
.puzzle.is-zoomed .puzzle-tl { z-index: 3; background: var(--bg); }
.puzzle.is-pinned-top .puzzle-col-clues { box-shadow: 0 3px 6px -3px rgba(59, 44, 34, .45); }
.puzzle.is-pinned-left .puzzle-row-clues { box-shadow: 3px 0 6px -3px rgba(59, 44, 34, .45); }

.puzzle-area { position: relative; flex: 1; min-height: 0; }
.puzzle-container {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.toolbar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 12px 14px;
}
.seg { display: flex; gap: 6px; padding: 4px; border-radius: 18px; background: var(--paper-2); }
.tool { width: 60px; height: 56px; }
.tool .ico { width: 26px; height: 26px; }
.seg .tool { box-shadow: none; background: transparent; color: var(--ink-light); }
.seg .tool.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
#mode-cross.is-on { color: var(--terra-d); }
/* узкий телефон: пять инструментов в один ряд */
@media (max-width: 400px) and (orientation: portrait) {
  .toolbar { gap: 8px; padding: 8px 8px 12px; }
  .tool { width: 50px; }
}

/* Низкий альбомный экран: инструменты справа столбиком */
@media (orientation: landscape) and (max-height: 500px) {
  .screen-puzzle {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: var(--topbar) 1fr;
    grid-template-areas: "top tools" "area tools";
  }
  .screen-puzzle .topbar { grid-area: top; }
  .puzzle-area { grid-area: area; }
  .toolbar { grid-area: tools; flex-direction: column; padding: 8px 14px 8px 4px; }
  .seg { flex-direction: column; }
  .tool { width: 56px; height: 52px; }
}

.puzzle {
  display: grid;
  grid-template-areas: "tl cols" "rows grid";
  grid-template-columns: var(--clue-col-w) auto;
  grid-template-rows: auto auto;
  touch-action: none;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  box-shadow: var(--shadow);
  --clue-fs: clamp(13px, calc(var(--cell) * .4), 19px);
}
.puzzle-tl { grid-area: tl; }
.puzzle-col-clues { grid-area: cols; display: flex; }
.puzzle-row-clues { grid-area: rows; display: flex; flex-direction: column; }
.puzzle-grid { grid-area: grid; }

.col-clue {
  width: var(--cell);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 5px; border-radius: 6px 6px 0 0;
  transition: background-color .2s;
}
.col-clue span { font-size: var(--clue-fs); line-height: 1.08; font-weight: 800; color: var(--ink); }
.row-clue {
  height: var(--cell);
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding-right: 6px; border-radius: 6px 0 0 6px;
  transition: background-color .2s;
}
.row-clue span { font-size: var(--clue-fs); font-weight: 800; color: var(--ink); }
.col-clue.is-closed span, .row-clue.is-closed span { opacity: .3; transition: opacity .2s ease-out; }
.col-clue.is-coach, .row-clue.is-coach { background: rgba(233, 185, 73, .35); }
.col-clue.is-hinted, .row-clue.is-hinted { animation: clue-hint 1.5s ease-out; }
@keyframes clue-hint { 0%, 70% { background: rgba(127, 154, 110, .45); } 100% { background: transparent; } }

.puzzle-grid {
  display: flex; flex-direction: column;
  border-top: 2px solid var(--ink); border-left: 2px solid var(--ink);
  touch-action: none;
}
.grid-row { display: flex; }
.grid-cell {
  width: var(--cell); height: var(--cell);
  border-right: 1px solid var(--ink-light); border-bottom: 1px solid var(--ink-light);
  background: var(--bg);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  user-select: none; cursor: pointer;
  position: relative;
}
.grid-row:last-child .grid-cell { border-bottom: 2px solid var(--ink); }
.grid-cell:last-child { border-right: 2px solid var(--ink); }
.grid-cell.b5r { border-right: 2px solid var(--ink); }
.grid-cell.b5b { border-bottom: 2px solid var(--ink); }
.grid-cell.is-coach { background: #fbefc9; }
.grid-cell.is-filled { background: var(--ink); animation: cell-stamp 90ms ease-out; }
.grid-cell.is-cross::after {
  content: '×'; font-size: calc(var(--cell) * .62); font-weight: 700;
  color: var(--terra); line-height: 1; pointer-events: none;
}
.grid-cell.is-cross { animation: cell-stamp 90ms ease-out; }
@keyframes cell-stamp { from { transform: scale(.85); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.grid-cell.is-shake { animation: cell-shake 120ms ease-in-out; }
@keyframes cell-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.grid-cell::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent); opacity: 0; pointer-events: none;
}
.grid-cell.is-line-flash::before { animation: cell-glow 180ms ease-out var(--flash-d, 0ms) both; }
.grid-cell.is-line-flash.is-filled { animation: cell-pop 180ms ease-out var(--flash-d, 0ms) both; }
.grid-cell.is-win-wave::before { animation: cell-glow 520ms ease-out var(--wave-d, 0ms) both; }
.grid-cell.is-win-wave.is-filled { animation: cell-pop-big 460ms cubic-bezier(.3, 1.6, .5, 1) var(--wave-d, 0ms) both; }
@keyframes cell-glow { 0% { opacity: 0; } 35% { opacity: .45; } 100% { opacity: 0; } }
@keyframes cell-pop { 0% { transform: scale(1); } 40% { transform: scale(.82); } 100% { transform: scale(1); } }
@keyframes cell-pop-big { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }

/* облачко-подсказка обучения */
.coach {
  position: absolute; left: 50%; top: 4px; z-index: 5;
  transform: translateX(-50%);
  background: var(--ink); color: #fff;
  padding: 8px 16px; border-radius: 16px;
  font-weight: 800; font-size: 16px; white-space: nowrap;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: coach-in .25s ease-out;
}
.coach.is-down { top: auto; bottom: 4px; }
.coach.is-down::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: var(--ink);
}
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tile.is-coach { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(233, 185, 73, .9); animation: badge 1.2s ease-in-out infinite; }

/* раскрытие картинки после победы */
.reveal {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(244, 234, 214, 0); transition: background-color .4s;
  cursor: pointer;
}
.reveal.is-on { background: rgba(244, 234, 214, .94); }
.reveal-stage { position: relative; width: min(62vw, 46vh, 300px); aspect-ratio: 1; }
.reveal-pixels, .reveal-sprite {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  transition: opacity .6s ease-out, transform .8s cubic-bezier(.3, 1.4, .5, 1), filter .6s;
}
.reveal-pixels { width: 100%; height: auto; image-rendering: pixelated; opacity: 0; transform: scale(.9); }
.reveal.is-on .reveal-pixels { opacity: 1; transform: scale(1); }
.reveal-sprite { opacity: 0; transform: scale(.7); filter: brightness(1.6); }
.reveal.to-sprite .reveal-pixels { opacity: 0; transform: scale(1.1); }
.reveal.to-sprite .reveal-sprite { opacity: 1; transform: scale(1); filter: none; }
.reveal-title { font-size: 24px; font-weight: 900; opacity: 0; transition: opacity .4s .5s; }
.reveal.to-sprite .reveal-title { opacity: 1; }

.fly { position: fixed; z-index: 30; pointer-events: none; object-fit: contain; will-change: transform; }

/* ---------------- тост и шторка ---------------- */

.toast {
  position: fixed; left: 50%; top: calc(var(--topbar) + 4px + env(safe-area-inset-top)); z-index: 40;
  width: max-content; max-width: min(92vw, 460px);
  transform: translate(-50%, -16px); opacity: 0;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 16px;
  font-size: 15px; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  pointer-events: none;
  transition: transform .25s ease-out, opacity .25s;
}
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.toast { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.toast .ico, .toast-pic { width: 24px; height: 24px; flex: none; }
.toast-pic { object-fit: contain; }
/* на поле тост над панелью инструментов: сверху он закрыл бы числа столбцов */
.app[data-screen="puzzle"] .toast { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); }
.app[data-screen="puzzle"] .toast.is-in { transform: translate(-50%, 0); }
@media (orientation: landscape) and (max-height: 500px) {
  .app[data-screen="puzzle"] .toast { bottom: calc(10px + env(safe-area-inset-bottom)); }
}

.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(43, 30, 20, .42); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; z-index: 21; left: 50%; bottom: 0;
  width: min(100%, 520px); max-height: calc(100dvh - 24px); overflow: auto;
  transform: translateX(-50%);
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  animation: sheet-up .28s cubic-bezier(.2, .9, .3, 1);
  display: flex; flex-direction: column;
}
.sheet > div { display: flex; flex-direction: column; gap: 12px; }
@keyframes sheet-up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@media (min-aspect-ratio: 5/4) {
  .sheet { bottom: auto; top: 50%; border-radius: 22px; transform: translate(-50%, -50%); animation: sheet-pop .24s ease-out; }
  @keyframes sheet-pop { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
}
.sheet-head { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.sheet-title { flex: 1; margin: 0; font-size: 19px; font-weight: 900; }
.secret { margin: 0; color: var(--ink-2); font-style: italic; }

.variant-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; }
.variant {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px 10px; min-height: 44px;
  border: 3px solid transparent; border-radius: var(--r);
  background: var(--card); box-shadow: var(--shadow);
  transition: border-color .15s, transform .12s;
}
.variant:active { transform: scale(.97); }
.variant img { width: 100%; height: clamp(60px, 17vh, 120px); object-fit: contain; }
.variant-check {
  position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage); color: #fff; opacity: 0; transform: scale(.6);
  transition: opacity .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.variant-check .ico { width: 18px; height: 18px; }
.variant.is-selected { border-color: var(--sage); }
.variant.is-selected .variant-check { opacity: 1; transform: scale(1); }

.envelope { border: 0; background: none; padding: 0; cursor: pointer; align-self: center; width: min(70%, 260px); }
.envelope img { width: 100%; display: block; animation: letter-hop 1.6s ease-in-out infinite; }

.invite-sheet { align-items: center; }
.invite {
  position: relative; container-type: inline-size;
  width: min(100%, 340px, calc((100dvh - 190px) * .636));
  filter: drop-shadow(0 6px 14px rgba(59, 44, 34, .2));
  animation: invite-in .6s cubic-bezier(.3, 1.3, .5, 1);
}
@keyframes invite-in { from { opacity: 0; transform: translateY(30px) rotate(-3deg) scale(.9); } to { opacity: 1; transform: none; } }
.invite-art { width: 100%; display: block; }
.invite-sheet .invite { cursor: pointer; }
/* кнопка, нажатая, пока сцена занята: вздрогнула — значит, касание услышано */
.is-nudge { animation: cell-shake 140ms ease-in-out 2; }
/* отказ без слов: то, чего не хватает, на миг краснеет */
.is-want { animation: want 1.4s ease-out; }
@keyframes want {
  0%, 60% { box-shadow: 0 0 0 3px var(--off), 0 0 14px rgba(232, 69, 58, .55); }
  100% { box-shadow: 0 0 0 0 rgba(232, 69, 58, 0); }
}
.obj.is-want { animation: none; }
.obj.is-want .spr-obj { animation: want-glow 1.4s ease-out; }
@keyframes want-glow { 0%, 60% { opacity: 1; filter: drop-shadow(0 0 3px #e8453a) drop-shadow(0 0 9px #e8453a); } }
.need-bubble {
  position: fixed; z-index: 35; display: flex; align-items: center; gap: 4px;
  padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--off); color: #fff;
  font-size: 17px; font-weight: 900; pointer-events: none;
  transform: translate(-50%, -100%); animation: need-pop 1.6s ease-out both;
}
.need-bubble .ico { width: 18px; height: 18px; }
@keyframes need-pop {
  0% { opacity: 0; transform: translate(-50%, -70%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -100%) scale(1.08); }
  25%, 80% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%); }
}
.rm .need-bubble { animation: none; }
.variant-cap { margin: 0; min-height: 1.3em; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); }
.news-row { display: flex !important; flex-direction: row !important; justify-content: center; gap: 10px; flex-wrap: wrap; }
.news-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px;
  border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: 18px; font-weight: 900;
}
.news-chip img, .news-chip .ico { width: 30px; height: 30px; display: block; }
.news-chip .ico { color: var(--terra); }
.news-chip .news-pic { width: 34px; height: 30px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-sizing: border-box; display: block; image-rendering: auto; }
.invite-body {
  position: absolute; left: 12%; right: 12%; top: 54%; bottom: 7%;
  display: flex !important; flex-direction: column; justify-content: center; gap: 0 !important;
  text-align: center; color: var(--ink);
}
.invite-title { margin: 0 0 .5em; font-size: 15px; font-size: 7cqw; font-weight: 900; color: var(--terra-d); }
.invite-text { margin: 0; font-size: 13px; font-size: 5.2cqw; line-height: 1.38; }
.invite-sign { margin: .6em 0 0; font-size: 13px; font-size: 5cqw; font-style: italic; text-align: right; color: var(--ink-2); }
.invite-sheet .btn-main { width: min(100%, 340px); }

.door-closed {
  align-self: center; width: 96px; height: 120px; border-radius: 48px 48px 8px 8px;
  background: var(--sage); color: #fff;
  display: flex !important; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 6px var(--sage-d), var(--shadow);
}
.door-closed .ico { width: 34px; height: 34px; opacity: .9; }

.ba {
  position: relative; width: min(100%, calc(100dvh - 210px)); align-self: center; aspect-ratio: 1;
  display: block !important; border-radius: 16px; overflow: hidden;
  --cut: 50%;
}
.ba .scene { position: absolute; inset: 0; width: 100%; border-radius: 0; box-shadow: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--cut)) 0 0); }
.ba::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--cut); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .4); pointer-events: none;
}
.ba-label {
  position: absolute; top: 8px; z-index: 2; padding: 3px 10px; border-radius: 10px;
  background: rgba(59, 44, 34, .7); color: #fff; font-weight: 800; font-size: 13px;
}
.ba-label-b { left: 8px; } .ba-label-a { right: 8px; }
.ba-range { width: 100%; height: 44px; accent-color: var(--terra); margin: 0; }

.toggles { display: flex !important; flex-direction: row !important; justify-content: space-around; gap: 8px; padding: 6px 0; }
.toggle { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.toggle-btn { width: 60px; height: 60px; }
.toggle-btn .ico { width: 28px; height: 28px; }
.toggle-btn.is-off { opacity: .7; }
.toggle-btn.is-off::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 62%; height: 3.5px; border-radius: 2px;
  background: var(--off); transform: translate(-50%, -50%) rotate(-45deg);
}
.dev-row { display: flex !important; flex-direction: row !important; gap: 10px; flex-wrap: wrap; }
.build-stamp { margin: 0; text-align: center; font-size: 12px; color: var(--ink-light); user-select: text; -webkit-user-select: text; }

/* ================= P1: валюты, разделы, письма, лавка ================= */

/* ---------------- плашки валют ---------------- */

.hud { gap: 8px; }
.hud-gap { flex: 1; }
.cur {
  min-height: 44px; padding: 0 14px 0 6px; gap: 6px;
  border: 0; cursor: pointer;
  font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums;
  transition: transform .12s ease-out;
}
.cur img { width: 32px; height: 32px; display: block; }
.cur:active { transform: scale(.95); }
.cur b { min-width: 1.4em; text-align: left; }
.is-bump { animation: bump .45s ease-out; } /* без «провала» меньше 1: плашка не становится мельче 44 px */
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------------- разделы ---------------- */

.tabbar {
  display: flex; gap: 6px; padding: 6px 12px 8px;
  background: var(--paper);
  border-top: 1.5px solid var(--line);
}
.tab {
  flex: 1; position: relative; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 14px; background: transparent; cursor: pointer;
  color: var(--ink-light); font-size: 12px; font-weight: 800;
  transition: background-color .15s, color .15s;
}
.tab img, .tab .ico { width: 30px; height: 30px; display: block; }
.tab img { filter: grayscale(.55) opacity(.8); transition: filter .15s, transform .15s; }
.tab .ico { color: var(--ink-light); }
.tab.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.tab.is-on img { filter: none; transform: scale(1.06); }
.tab.is-on .ico { color: var(--terra); }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tab-dot {
  position: absolute; top: 6px; left: calc(50% + 10px);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--off); box-shadow: 0 0 0 2px var(--paper);
  animation: badge 1.6s ease-in-out infinite;
}
.tabbar.is-new { animation: tabs-in .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tabs-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-aspect-ratio: 5/4) {
  .shell {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: var(--topbar) minmax(0, 1fr);
    grid-template-areas: "tabs hud" "tabs main";
  }
  .tabbar { flex-direction: column; justify-content: center; padding: 10px 6px 10px 10px; border-top: 0; border-right: 1.5px solid var(--line); }
  .tab { flex: none; width: 72px; min-height: 66px; }
  .tabbar.is-new { animation-name: rail-in; }
  @keyframes rail-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (min-aspect-ratio: 5/4) and (max-height: 460px) {
  .tab { min-height: 52px; width: 64px; }
  .tab span { display: none; }
}

/* ---------------- плашка комнаты над сценой ---------------- */

.room-pill {
  position: relative; flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; max-width: 100%; padding: 0 12px 0 10px;
  border: 0; border-radius: 22px; cursor: pointer;
  background: rgba(255, 250, 240, .9); box-shadow: var(--shadow);
  font-weight: 800; font-size: 15px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.room-pill .ico { width: 20px; height: 20px; color: var(--terra); }
.room-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-pill small {
  font-size: 13px; font-weight: 900; color: var(--sage-d);
  background: rgba(127, 154, 110, .18); padding: 1px 7px; border-radius: 9px;
}
.room-pill.has-more::after {
  content: ''; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2);
  transform: rotate(45deg) translateY(-3px);
}

/* ---------------- значки на сцене: письмо дня, фонарики, гирлянда ---------------- */

.scene-chips { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.scene-chips:empty { display: none; }
.scene-chip {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 250, 240, .9); box-shadow: var(--shadow); color: var(--ink); font: inherit;
}
.scene-chip img { width: 28px; height: 28px; display: block; flex: none; }
.scene-chip .ico { width: 24px; height: 24px; flex: none; color: var(--terra); }
.chip-badge {
  position: absolute; right: -5px; bottom: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--paper-2); color: var(--ink);
  font-size: 12px; font-weight: 900; line-height: 20px; text-align: center; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--paper);
}
.scene-chip.is-new { background: var(--accent); }
.scene-chip.is-new .chip-badge { background: var(--terra); color: #fff; }
.scene-chip.is-new img, .scene-chip.is-new .ico { animation: letter-hop 1.6s ease-in-out infinite; }
/* 320 px: рядом два значка — домик в плашке убираем, чтобы название комнаты читалось целиком. */
@media (max-width: 360px) {
  .room-pill { gap: 4px; padding: 0 9px 0 11px; font-size: 14px; }
  .room-pill > .ico { display: none; }
  .scene-chips { gap: 7px; }
  /* сундучок подарка вытесняет значок письма, пока подарок не взят: третьему значку места нет */
  .scene-chips .chip-gift ~ .chip-mail { display: none; }
}

.scene-garland { position: absolute; left: 0; right: 0; top: 0; height: 9%; z-index: 2; pointer-events: none; }
.scene-garland svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.garland-wire { fill: none; stroke: #3b2c22; stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; }
.garland-bulb {
  position: absolute; top: 46%; width: 3.4%; aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(59, 44, 34, .35);
}
.garland-bulb.is-on { background: var(--c); box-shadow: 0 0 10px 3px var(--c); animation: bulb 2.4s ease-in-out var(--d) infinite; }
@keyframes bulb { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* секрет не подписан: вставшая вещь один раз блестит (≈1,8 с) */
.hint-spark {
  position: absolute; width: 9px; height: 9px; pointer-events: none;
  background: #fffbe8; border-radius: 2px; transform: rotate(45deg) scale(0); opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255, 220, 130, .95);
  animation: hint-spark .7s ease-out .7s 1 both;
}
.hint-spark:nth-of-type(1) { left: 18%; top: 14%; }
.hint-spark:nth-of-type(2) { right: 14%; top: 40%; animation-delay: .95s; }
.hint-spark:nth-of-type(3) { left: 50%; top: 0; animation-delay: 1.2s; }
@keyframes hint-spark { 0% { transform: rotate(45deg) scale(0); opacity: 0; } 45% { transform: rotate(45deg) scale(1.15); opacity: 1; } 100% { transform: rotate(45deg) scale(0); opacity: 0; } }
html.rm .hint-spark { display: none; }
.secret-found { display: flex; flex-direction: column; gap: 6px; }
.secret-n {
  align-self: flex-start; padding: 2px 10px; border-radius: 10px;
  background: var(--accent); font-size: 14px; font-weight: 900;
}
.variant-note { margin: 0; text-align: center; }

/* предмет решён частично: спрайт стадии в полном цвете (круг 8) */
.spr-obj.is-stage { filter: none; }
.obj.is-preview .spr-obj { animation: obj-arrive .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.pv-label {
  position: absolute; left: 50%; top: -6px; transform: translate(-50%, -100%);
  padding: 2px 8px; border-radius: 8px; white-space: nowrap;
  background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 900;
  box-shadow: var(--shadow); pointer-events: none;
}

/* ---------------- панель дома ---------------- */

.stage-dots { display: inline-flex; gap: 4px; align-items: center; }
.stage-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.stage-dots i.is-on { background: var(--sage); }
.goal-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.card-goal .thumb { width: 60px; height: 60px; }
.thumb-room { padding: 0; overflow: hidden; }
.thumb-room img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

.choice-grid.is-compact { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.choice-grid.is-compact .card-choice { padding: 8px; align-items: center; text-align: center; }
.choice-grid.is-compact .card-choice .thumb { height: 52px; }
.choice-grid.is-compact .card-title { font-size: 14px; line-height: 1.15; }
.choice-grid.is-compact .card-sub { display: none; }
.choice-grid.is-compact .choice-meta { flex-direction: column; align-items: center; gap: 4px; }
@media (max-width: 380px) {
  .choice-grid.is-compact { grid-template-columns: 1fr 1fr; }
  .choice-grid.is-compact .card-choice .thumb { height: 40px; }
}
/* невысокий портрет (320×568, 360×640): карточки «Что вернём дальше?» в один ряд —
   картинка вещи, размер и стадии; название — в aria-label, сама вещь видна на сцене */
@media (max-aspect-ratio: 5/4) and (max-height: 700px) {
  .choice-grid, .choice-grid.is-compact { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
  .choice-grid .card-choice { padding: 6px; align-items: center; text-align: center; }
  .choice-grid .card-choice .thumb, .choice-grid.is-compact .card-choice .thumb { height: 44px; margin-bottom: 2px; }
  .choice-grid .card-choice .card-title, .choice-grid .card-choice .card-sub { display: none; }
  .choice-grid .choice-meta { flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
  .panel-title { font-size: 15px; }
}

.card-daily { display: flex; align-items: center; gap: 12px; }
.card-daily .daily-env { position: relative; }
.daily-env .tm-gift { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(59, 44, 34, .3)); }
.tm-title { display: flex; align-items: center; gap: 10px; }

/* «Завтра» на доме: письмо, подарок штампа и часы до него */
.panel-head { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.panel-head.has-tomorrow { justify-content: space-between; }
.panel-head.has-tomorrow .panel-title { text-align: left; min-width: 0; }
.tomorrow {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px 4px 8px;
  border: 0; border-radius: 22px; cursor: pointer; font: inherit; color: var(--ink);
  background: #fff3d6; box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow);
}
.tomorrow .tm-pic { width: 32px; height: 32px; object-fit: contain; display: block; }
.tomorrow .tm-gift { width: 26px; height: 26px; margin-left: -12px; margin-top: 12px; }
.tm-word { font-size: 16px; font-weight: 900; }
.tm-hrs { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 900; color: var(--terra-d, var(--terra)); white-space: nowrap; }
.tm-hrs .ico { width: 16px; height: 16px; }
.row-actions .tomorrow { min-height: 52px; }
/* рядом с главной кнопкой — без слова: конверт с единицей и часы, кнопка ужимается, а не выталкивает плашку */
.row-actions.has-tomorrow .btn-main { min-width: 0; padding: 0 16px; }
.row-actions.has-tomorrow .tomorrow .tm-word { display: none; }
/* не разгадано письмо дня — конверт с единицей на месте «Завтра» (круг 9) */
.tomorrow .tm-env { position: relative; display: block; }
.tomorrow .tm-env .chip-badge { right: -6px; top: -4px; bottom: auto; background: var(--terra); color: #fff; }
@media (max-width: 380px) {
  .tomorrow { padding: 4px 10px 4px 6px; gap: 4px; }
  .tomorrow .tm-word { display: none; }
}
.card-lantern { background: linear-gradient(180deg, #fff3d6, var(--card)); }
.thumb-lantern { display: flex; align-items: center; justify-content: center; }
.thumb-lantern .ico { width: 34px; height: 34px; color: var(--terra); animation: letter-hop 1.6s ease-in-out infinite; }
html.rm .thumb-lantern .ico { animation: none; }
/* круг 10: фонарь нарисован, как конверт */
.thumb-lantern img { width: 42px; height: 42px; object-fit: contain; animation: letter-hop 1.6s ease-in-out infinite; }
html.rm .thumb-lantern img { animation: none; }
.welcome-event img { width: 24px; height: 24px; vertical-align: -6px; margin-right: 4px; display: inline-block; }
.daily-env { flex: none; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; }
.daily-env img { width: 100%; display: block; }
.daily-env.is-new img { animation: letter-hop 1.6s ease-in-out infinite; }

/* ---------------- штампы «7 встреч» ---------------- */
/* .is-step — на этом штампе подарок по дороге (монеты или карандаши) */

.stamps { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.stamps .stamp {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  border: 2px dashed var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.stamps .stamp.is-on { border: 0; background: none; }
.stamps .stamp img { width: 100%; display: block; animation: stamp-in .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp-in { from { transform: scale(1.6) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.stamps-gift { width: 38px; height: 38px; margin-left: 2px; display: block; flex: none; }
.stamps-gift.is-done { width: 44px; height: 44px; }
.stamps-done { font-weight: 800; color: var(--sage-d); }
.stamps .stamp.is-step { border-style: solid; border-color: var(--accent); }
.stamps .stamp.is-step img { width: 64%; animation: none; }
.stamps.is-compact { gap: 3px; }
.stamps.is-compact .stamp { width: 20px; height: 20px; border-width: 1.5px; }
.stamps.is-compact .stamps-gift { width: 28px; height: 28px; }

/* ---------------- страницы: письма и лавка ---------------- */

.screen-page { overflow: hidden; }
.page {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 2px 14px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.page-title { margin: 0; font-size: 24px; font-weight: 900; }
.page-sub { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; color: var(--ink-2); }
.head-ico { width: 30px; height: 30px; display: block; flex: none; }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-stamps .stamps { justify-content: space-between; margin: 10px 0 8px; }
.card-stamps .stamp { width: 36px; height: 36px; }
.card-stamps .stamps-gift { width: 46px; height: 46px; }
@media (max-width: 360px) {
  .card-stamps .stamp { width: 30px; height: 30px; }
  .card-stamps .stamps-gift { width: 38px; height: 38px; }
}

.card-today { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 16px; }
.card-today .note { align-self: stretch; text-align: left; }
.envelope-today { width: min(56%, 200px); }
.note .card-sign { margin-top: 8px; }
.next-letter { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 900; font-size: 18px; }
.next-letter .next-pic { width: 34px; height: 34px; object-fit: contain; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card-stamps[role="button"] { cursor: pointer; }
.event-left .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.event-reward > .ico { width: 16px; height: 16px; }
.next-letter .ico { width: 18px; height: 18px; }
.remind-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.btn-remind { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 140px; max-width: 220px; font-weight: 700; color: var(--ink); }
.btn-remind .ico { width: 20px; height: 20px; color: var(--terra); }
.btn-remind:disabled { opacity: .55; }
.card-lock { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 22px 16px; position: relative; }
.lock-art { width: 110px; display: block; filter: grayscale(.6); opacity: .7; }
.card-lock > .ico { position: absolute; top: 40px; width: 30px; height: 30px; color: var(--ink-2); }

/* «Секреты дома» */
.card-secrets { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.card-secrets .card-head > .ico { width: 26px; height: 26px; color: var(--accent-ink, var(--terra)); flex: none; }
.secrets { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.secret-item {
  position: relative; min-height: 56px; padding: 4px; border: 0; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--paper);
}
.secret-item img { width: 100%; max-height: 48px; object-fit: contain; filter: brightness(0) opacity(.18); }
.secret-item.is-found { background: #fff3d6; box-shadow: 0 0 0 2px var(--accent) inset; }
.secret-item.is-found img { filter: none; }
.secret-q { position: absolute; font-size: 22px; font-weight: 900; color: var(--ink-2); }

/* «Вечер фонариков» */
.card-event { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #fff3d6, var(--card)); }
.card-event .card-head > .ico { width: 28px; height: 28px; color: var(--terra); flex: none; }
.card-event .card-head > .card-pic { width: 32px; height: 32px; object-fit: contain; flex: none; }
.card-event .card-sub { margin: 0; }
.event-left {
  margin-left: auto; padding: 2px 9px; border-radius: 9px; white-space: nowrap;
  background: var(--terra); color: #fff; font-size: 13px; font-weight: 900;
}
.lanterns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lantern {
  position: relative; min-height: 76px; padding: 6px 2px; border: 0; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--paper); box-shadow: var(--shadow); color: var(--ink); font: inherit;
}
.lantern .ico { width: 30px; height: 30px; color: var(--ink-2); }
.lantern.is-open { background: var(--accent); }
.lantern.is-open .ico { color: var(--ink); animation: letter-hop 1.6s ease-in-out infinite; }
.lantern .lan-ico { width: 36px; height: 36px; object-fit: contain; display: block; }
/* круг 10: «горит 1/5» значками в окне зажжённого фонарика */
.lantern-count { display: flex; align-items: center; justify-content: center; gap: 6px; }
.lantern-count .lc-ico { width: 28px; height: 28px; object-fit: contain; }
.lantern-count .lc-n { font-size: 18px; margin-right: 8px; }
.lantern-count .ico { width: 22px; height: 22px; }
.lantern.is-open .lan-ico { animation: letter-hop 1.6s ease-in-out infinite; }
html.rm .lantern.is-open .lan-ico { animation: none; }
.lantern.is-locked { opacity: .6; cursor: default; }
.lantern.is-locked .ico { width: 20px; height: 20px; }
.lantern.is-solved { background: #3a3140; }
.lantern-pic { width: 86%; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(247, 211, 107, .8)); }
.lantern-go { font-size: 12px; font-weight: 900; line-height: 1.1; text-align: center; }
.event-reward { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.story-q { font-weight: 800; margin-top: 10px; }
.story-art { display: block; width: 96px; margin: 0 auto 8px; }
.story-art img { width: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(74, 50, 34, .3)); }
.spr-twist { filter: drop-shadow(0 2px 2px rgba(74, 50, 34, .35)); }
.btn-share { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.btn-share .ico { width: 20px; height: 20px; color: var(--terra); }

.postcard {
  background: #fff; padding: 8px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(59, 44, 34, .18);
  transform: rotate(-1.5deg);
}
.postcard-pic { display: block; width: 100%; height: auto; border-radius: 2px; }
/* запасные цветные клетки, если рисунка награды нет */
canvas.postcard-pic, canvas.lantern-pic, canvas.reveal-color { image-rendering: pixelated; }
/* рисунок — в квадрат открытки: высокий фонарь не вытягивает окно и не уводит кнопку вниз */
img.postcard-pic { aspect-ratio: 1; object-fit: contain; }
.postcard.is-big { width: min(70%, 240px, 34dvh); align-self: center; padding: 10px; }

.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.album-item {
  position: relative; min-height: 92px; padding: 6px; border: 0; border-radius: 14px;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.album-item:nth-child(2n) .postcard { transform: rotate(2deg); }
.album-item .postcard { width: 100%; padding: 4px; }
.album-item > img { width: 76%; display: block; }
.days-left {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 7px; border-radius: 8px;
  background: var(--terra); color: #fff; font-size: 12px; font-weight: 900;
}

/* ---------------- цена ---------------- */

.price {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-weight: 900; font-size: 15px; white-space: nowrap;
}
.price img { width: 22px; height: 22px; display: block; }
.price-votes b { color: #fff; background: #4a76a8; padding: 3px 10px; border-radius: 10px; }
.price-lock img { width: 24px; height: 24px; }
.price-lock .ico { width: 18px; height: 18px; color: var(--ink-2); }
.price-ad { color: var(--ink-2); font-size: 13px; }
.price-ad .ico { width: 20px; height: 20px; color: var(--terra); }

.btn-buy {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 18px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: var(--sage); color: #fff; font-weight: 900; font-size: 17px;
  box-shadow: 0 3px 0 var(--sage-d), 0 6px 16px rgba(94, 122, 80, .25);
  transition: transform .1s ease-out, box-shadow .1s;
}
.btn-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sage-d); }
.btn-buy .price { background: rgba(255, 255, 255, .92); color: var(--ink); padding: 3px 10px 3px 6px; border-radius: 12px; }
.btn-buy .price-votes { background: none; padding: 0; }
.btn-buy.is-short { background: #b9b0a0; box-shadow: 0 3px 0 #9a907f; }
.btn-buy-sku { background: #4a76a8; box-shadow: 0 3px 0 #355a85, 0 6px 16px rgba(74, 118, 168, .25); }
.btn-buy-sku:active { box-shadow: 0 1px 0 #355a85; }
.btn-buy-sku > img { width: 30px; height: 30px; }
.btn-buy-sku .price-votes b { background: rgba(255, 255, 255, .22); }
.btn-buy:focus-visible, .offer:focus-visible, .deco:focus-visible, .album-item:focus-visible, .room-card:focus-visible, .room-pill:focus-visible, .cur:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---------------- лавка ---------------- */

.shop-sec { display: flex; flex-direction: column; gap: 10px; }
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.offer {
  position: relative; min-height: 112px; padding: 10px 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--card); box-shadow: var(--shadow);
  transition: transform .12s ease-out;
}
.offer:active:not(:disabled) { transform: scale(.96); }
.offer:disabled { opacity: .45; cursor: default; }
.offer-art { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; }
.offer-art img { height: 52px; display: block; }
.offer-n {
  position: absolute; right: -14px; bottom: -4px;
  font-size: 17px; font-weight: 900; color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}
.offer.is-pack { background: linear-gradient(180deg, #eef3fa, var(--card)); }
.offer.is-pack .offer-art img { filter: drop-shadow(5px -3px 0 rgba(255, 255, 255, .6)) drop-shadow(-3px 3px 0 rgba(59, 44, 34, .15)); }
.offer.is-ad { background: linear-gradient(180deg, #fbefe1, var(--card)); }
.offer.is-ad .offer-art img { height: 44px; }

.bundle { display: flex; flex-direction: column; gap: 10px; }
.bundle-top { display: flex; align-items: center; gap: 12px; }
.bundle-ico { width: 54px; height: 54px; display: block; flex: none; }
.bundle-items { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bundle-items > img { width: 52px; height: 52px; object-fit: contain; padding: 4px; border-radius: 10px; background: var(--paper-2); }
.bundle-pencils { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 10px; background: var(--paper-2); font-weight: 900; }
.bundle-pencils img { width: 30px; height: 30px; }

.deco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.deco {
  position: relative; min-height: 130px; padding: 10px 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 3px solid transparent; border-radius: var(--r); cursor: pointer;
  background: var(--card); box-shadow: var(--shadow);
  transition: transform .12s ease-out;
}
.deco:active { transform: scale(.96); }
.deco-art { width: 100%; height: 64px; object-fit: contain; display: block; }
.deco-title { font-size: 13px; font-weight: 800; line-height: 1.15; text-align: center; flex: 1; }
.deco.is-locked .deco-art { filter: grayscale(1) brightness(1.15); opacity: .45; }
.deco.is-worn { border-color: var(--sage); }
.deco.is-worn .variant-check { opacity: 1; transform: scale(1); }
.deco-state { font-size: 13px; font-weight: 900; color: var(--sage-d); }
.shop-note, .test-note { margin: 0; font-size: 13px; color: var(--ink-light); text-align: center; }

/* ---------------- шторки P1 ---------------- */

.sheet-art { width: 38px; height: 38px; display: block; flex: none; }
.variant.is-premium img { opacity: .9; }
.variant .price {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px 2px 3px; border-radius: 10px;
  background: rgba(255, 250, 240, .95); box-shadow: var(--shadow); font-size: 13px;
}
.variant .price img { width: 20px; height: 20px; }
.variant .price-lock { padding: 2px; }
.variant.is-trying { border-color: var(--accent); }
.variant.is-trying .variant-check { opacity: 0; }
.variant-action:empty { display: none !important; }
.variant-gift { display: flex !important; flex-direction: column; align-items: center; gap: 2px !important; }

.room-list { display: flex !important; flex-direction: column; gap: 10px !important; }
.room-card {
  display: flex; align-items: center; gap: 12px; padding: 8px; min-height: 76px;
  border: 3px solid transparent; border-radius: var(--r); cursor: pointer; text-align: left;
  background: var(--card); box-shadow: var(--shadow);
}
.room-card.is-here { border-color: var(--sage); }
.room-card.is-locked { cursor: default; }
.room-card.is-locked .room-thumb img { filter: grayscale(1) brightness(1.1); opacity: .45; }
.room-card.is-soon { box-shadow: none; background: transparent; border: 2px dashed var(--line); }
.room-thumb {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  background: var(--paper-2); display: flex; align-items: center; justify-content: center;
}
.room-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-thumb .ico { position: absolute; width: 26px; height: 26px; color: var(--ink-2); }
.bar { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--paper-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--sage); border-radius: 4px; }

.gift-box { align-items: center; }
.gift-art { width: 120px; display: block; animation: gift-in .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes gift-in { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.1) rotate(4deg); opacity: 1; } 100% { transform: none; } }
.gift-items { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 10px !important; }
.gift-item {
  width: 96px; padding: 8px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 800; text-align: center;
}
.gift-item img { width: 64px; height: 64px; object-fit: contain; display: block; }

.ad-bar { height: 12px; border-radius: 6px; background: var(--paper-2); overflow: hidden; display: block !important; }
.ad-bar i { display: block; height: 100%; width: 0; background: var(--terra); animation: ad-fill 2s linear forwards; }
@keyframes ad-fill { to { width: 100%; } }

/* ---------------- карандаш на поле ---------------- */

.tool-pencil img { width: 34px; height: 34px; display: block; }
.tool-pencil .count {
  position: absolute; right: -4px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--terra); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.tool-pencil.is-on { background: #fbefc9; box-shadow: 0 0 0 3px var(--accent), var(--shadow); }

.pick-bar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 14px; justify-content: center;
}
.pick-text { flex: 1; max-width: 220px; font-weight: 800; font-size: 16px; text-align: center; }
.btn-pick {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 112px; min-height: 52px; padding: 0 16px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: var(--terra); color: #fff; font-weight: 900; font-size: 17px;
  box-shadow: 0 3px 0 var(--terra-d);
}
.btn-pick img { width: 28px; height: 28px; }
.btn-pick:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn-pick:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.puzzle-container.is-picking .row-clue, .puzzle-container.is-picking .col-clue { cursor: pointer; background: rgba(233, 185, 73, .12); }
.puzzle-container.is-picking .row-clue.is-pick, .puzzle-container.is-picking .col-clue.is-pick { background: rgba(233, 185, 73, .55); }
.puzzle-container.is-picking .grid-cell.is-pick::before { opacity: .38; }
@media (orientation: landscape) and (max-height: 500px) {
  .pick-bar { grid-area: tools; flex-direction: column; padding: 8px 14px 8px 4px; }
  .pick-text { font-size: 14px; max-width: 120px; }
}

/* ---------------- всплывающие награды ---------------- */

.fx-layer { position: fixed; inset: 0; z-index: 35; pointer-events: none; }
.fx-pop {
  position: fixed; display: flex; align-items: center; gap: 4px;
  padding: 4px 12px 4px 6px; border-radius: 20px;
  background: var(--card); box-shadow: 0 4px 14px rgba(59, 44, 34, .3);
  font-weight: 900; font-size: 18px; white-space: nowrap;
  will-change: transform, opacity;
}
.fx-pop img { width: 30px; height: 30px; display: block; }
.fx-coins b { color: #a77a12; }
.fx-pencils b { color: var(--terra-d); }
.fx-stamp b { color: var(--sage-d); }

/* Клавиши-подсказки — только у мыши и клавиатуры */
@media (hover: hover) and (pointer: fine) {
  .tool[data-key]::before {
    content: attr(data-key); position: absolute; right: 4px; bottom: 2px;
    font-size: 10px; font-weight: 800; color: var(--ink-light); opacity: .8;
  }
  .tile:hover:not(:disabled) { background: #fffdf7; }
  .card-choice:hover, .variant:hover { box-shadow: 0 0 0 2px var(--line), var(--shadow); }
}

/* ---------------- награды: сундучок, сияние, выбор, подсказки ---------------- */

.fx-chest { position: fixed; z-index: 36; width: 92px; pointer-events: none; will-change: transform, opacity; }
.fx-chest img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(59, 44, 34, .35)); }
.fx-chest.is-rare img { filter: drop-shadow(0 0 10px rgba(255, 214, 120, .95)) drop-shadow(0 6px 10px rgba(59, 44, 34, .3)); }

/* Сияние: предмет из редкого сундучка мерцает золотом */
.obj.is-glow .spr-obj { filter: drop-shadow(0 0 5px rgba(255, 222, 140, .95)) drop-shadow(0 0 14px rgba(255, 196, 80, .55)); }
.glow-spark {
  position: absolute; width: 10px; height: 10px; pointer-events: none;
  background: #fff6cf; border-radius: 2px; transform: rotate(45deg) scale(0);
  box-shadow: 0 0 8px 2px rgba(255, 214, 120, .9);
  animation: glow-spark 2.6s ease-in-out infinite;
}
.glow-spark:nth-of-type(1) { left: 12%; top: 18%; }
.glow-spark:nth-of-type(2) { right: 10%; top: 38%; animation-delay: .9s; }
.glow-spark:nth-of-type(3) { left: 46%; top: 2%; animation-delay: 1.7s; }
@keyframes glow-spark { 0%, 60%, 100% { transform: rotate(45deg) scale(0); opacity: 0; } 75% { transform: rotate(45deg) scale(1); opacity: 1; } }
html.rm .glow-spark { display: none; }

/* «Хватает!»: на вещь, которую уже можно оформить */
.hs-badge.hs-afford { background: #fff3cf; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.hs-badge.hs-afford img { width: 22px; height: 22px; display: block; }
.variant.is-afford, .deco.is-afford { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.variant.is-afford .price { background: var(--accent); color: var(--ink); }

/* Подарок за комнату: три карточки */
.reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.reward-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 120px; padding: 12px 6px; cursor: pointer; border: 2px solid transparent;
  font: inherit; color: inherit;
}
.reward-card img { width: 56px; height: 56px; object-fit: contain; display: block; }
.reward-card.is-thing img { width: 72px; height: 72px; }
.reward-card b { font-size: 18px; font-weight: 900; text-align: center; line-height: 1.15; }
.reward-card.is-thing b { font-size: 14px; }
.reward-card.is-glow img { filter: drop-shadow(0 0 6px rgba(255, 214, 120, .95)); }
.reward-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .reward-card:hover { border-color: var(--accent); } }
/* выбранная карточка: рамка и галочка в уголке; «Забрать» — под карточками */
.reward-card { position: relative; transition: transform .12s ease-out, border-color .12s; }
.reward-card.is-picked { border-color: var(--terra); background: #fff3e2; transform: translateY(-2px); }
.reward-card.is-picked::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.choice-sheet .btn-main { margin-top: 14px; }
html.rm .reward-card.is-picked { transform: none; }

/* Невзятый подарок за комнату: карточка с сундучком и главная кнопка «Подарок» */
.card-gift { cursor: pointer; }
.thumb-gift { width: 60px; height: 60px; background: #fff3cf; }
.thumb-gift img { animation: letter-hop 1.6s ease-in-out infinite; }
.btn-main .btn-pic { width: 34px; height: 34px; margin: -6px 0; display: block; flex: none; }
.welcome-event { margin: 2px 0 0; }
html.rm .thumb-gift img { animation: none; }

/* Счётчик бесплатных подсказок и отказ, когда они кончились */
.tool-hint .count {
  position: absolute; right: -4px; top: -6px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--sage-d); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.tool-hint.is-out .ico { opacity: .45; }
.tool-hint.is-out .count { background: var(--ink-light); }
.is-shake { animation: cell-shake .35s ease-in-out 2; }
.tool.is-call { box-shadow: 0 0 0 3px var(--accent), 0 0 16px rgba(233, 185, 73, .9); }

/* Монетки, спрятанные в клетках поля */
.puzzle-title .puzzle-coins { display: inline-flex; align-items: center; gap: 3px; color: #a77a12; font-weight: 900; }
.puzzle-title .puzzle-coins[hidden] { display: none; }
.puzzle-coins img { width: 16px; height: 16px; display: block; }
.puzzle-coins.is-all .pz-dots { color: var(--sage-d); }
.puzzle-coins .pz-dots { font-style: normal; font-size: 12px; letter-spacing: 1px; margin-left: 2px; opacity: .85; }
.puzzle-coins .pz-dots:empty { display: none; }
.fx-line-coin { position: fixed; z-index: 60; width: 22px; height: 22px; pointer-events: none; }
.fx-line-coin img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(80,50,10,.35)); }
.cell-coin {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 80%; max-width: 30px;
  transform: translate(-50%, -50%); pointer-events: none;
  animation: cell-coin 1.1s ease-out forwards;
}
.cell-coin img { width: 100%; display: block; }
@keyframes cell-coin { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 30% { transform: translate(-50%, -80%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(.9); opacity: 0; } }

/* «Сияние» в клетке: золотая вспышка с лучами */
.cell-gold {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 220%; aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 200, .95) 0 18%, rgba(255, 207, 92, .75) 32%, rgba(255, 190, 70, 0) 68%);
  animation: cell-gold 1.4s ease-out forwards;
}
@keyframes cell-gold { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
html.rm .cell-gold { animation-duration: .01s; }

/* Плашка комнаты: полоса картинок */
.room-pill .room-bar {
  position: absolute; left: 14px; right: 14px; bottom: 5px; height: 4px;
  border-radius: 2px; background: rgba(127, 154, 110, .2); overflow: hidden; display: block;
}
.room-pill .room-bar i { display: block; height: 100%; width: 0; background: var(--sage-d); border-radius: 2px; transition: width .8s ease-out; }

/* ---------------- функции готовых предметов ---------------- */

.life { position: absolute; pointer-events: none; }
/* пар над носиком чайника */
.life-steam { width: 30%; height: 40%; transform: translate(-50%, -100%); }
.life-steam i {
  position: absolute; bottom: 0; left: 40%; width: 22%; height: 60%;
  border-radius: 50%; background: rgba(255, 255, 255, .75); filter: blur(3px);
  opacity: 0; animation: steam 3.2s ease-out infinite;
}
.life-steam i:nth-child(2) { left: 20%; animation-delay: 1.05s; }
.life-steam i:nth-child(3) { left: 55%; animation-delay: 2.1s; }
@keyframes steam {
  0% { transform: translateY(20%) scale(.6, .5); opacity: 0; }
  25% { opacity: .8; }
  100% { transform: translateY(-110%) translateX(30%) scale(1.3, 1); opacity: 0; }
}
/* отблеск на стекле маятника, туда-сюда */
.life-glint { width: 34%; height: 30%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 6px; }
.life-glint i {
  position: absolute; top: -20%; left: 30%; width: 26%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 214, .55), transparent);
  transform: rotate(14deg); animation: glint 2.4s ease-in-out infinite alternate;
}
@keyframes glint { from { left: -10%; } to { left: 80%; } }
/* ноты шкатулки */
.life-waltz { width: 40%; height: 50%; transform: translate(-50%, -100%); }
.life-waltz i {
  position: absolute; bottom: 0; left: 30%; font-style: normal; font-weight: 900;
  font-size: max(12px, 3.2cqw); color: #8a5a2b; text-shadow: 0 0 4px rgba(255, 246, 214, .95);
  opacity: 0; animation: note-up 4.5s ease-out infinite;
}
.life-waltz i:nth-child(2) { left: 60%; animation-delay: 1.5s; }
.life-waltz i:nth-child(3) { left: 10%; animation-delay: 3s; }
.obj.is-playing .life-waltz i { animation-duration: 1.7s; }
@keyframes note-up {
  0% { transform: translateY(0) rotate(-10deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(40%, -160%) rotate(12deg); opacity: 0; }
}
.obj.is-playing .spr-obj { animation: waltz-sway 1.02s ease-in-out 6; transform-origin: 50% 100%; }
@keyframes waltz-sway { 0%, 100% { transform: rotate(0); } 33% { transform: rotate(-2.5deg); } 66% { transform: rotate(2.5deg); } }
/* оранжерея: цветы у готовой вещи */
.life-bloom { left: 0; right: 0; bottom: 0; height: 30%; }
.bloom { position: absolute; width: max(12px, 2.6cqw); height: max(12px, 2.6cqw); bottom: 0; transform-origin: 50% 100%; animation: bloom-sway 3.6s ease-in-out infinite; }
.bloom-0 { left: 4%; }
.bloom-1 { right: 6%; bottom: 14%; animation-delay: 1.2s; }
.bloom-2 { left: 42%; bottom: -6%; animation-delay: 2.4s; }
.life-bloom.is-fresh .bloom { animation: bloom-in .8s cubic-bezier(.3, 1.8, .5, 1) both, bloom-sway 3.6s ease-in-out .8s infinite; }
.life-bloom.is-fresh .bloom-1 { animation-delay: .25s, 1.05s; }
.life-bloom.is-fresh .bloom-2 { animation-delay: .5s, 1.3s; }
@keyframes bloom-in { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
@keyframes bloom-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
html.rm .life-steam, html.rm .life-glint, html.rm .life-waltz { display: none; }

/* ---------------- меньше движения ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
html.rm *, html.rm *::before, html.rm *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
  transition-duration: 160ms !important; transition-delay: 0ms !important;
}
html.rm .hs-ring { animation: none !important; opacity: .9; }

/* ---------------- узкие и низкие экраны ---------------- */


@media (orientation: landscape) and (max-height: 500px) {
  /* облачко обучения сбоку от поля, а не поверх чисел столбцов */
  .coach { top: 50%; left: 12px; transform: translateY(-50%); white-space: normal; max-width: 26%; text-align: center; animation: none; }
  .coach.is-down { top: 50%; bottom: auto; left: auto; right: 8px; }
  .coach.is-down::after { left: auto; right: -8px; bottom: auto; top: 50%; margin: -8px 0 0; border: 8px solid transparent; border-right: 0; border-left-color: var(--ink); }

  /* приглашение: картинка слева, текст справа */
  .sheet-invite { width: min(100% - 24px, 640px); }
  .invite {
    width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: stretch;
    background: #f7efdf; border-radius: 12px; overflow: hidden;
  }
  .invite-art { width: auto; height: calc(100dvh - 140px); aspect-ratio: 572 / 470; object-fit: cover; object-position: top; }
  .invite-body { position: static; padding: 14px 18px; }
  .invite-title { font-size: 20px; }
  .invite-text { font-size: 15px; }
  .invite-sign { font-size: 14px; }

  .sheet-ba { width: min(100% - 24px, 560px); }
  .ba { width: calc(100dvh - 160px); }
}

/* Круг 7в: уютные покупки — бледный набросок вещи с ценником, цена на значке «Хватает!» */
.decor-spot { position: absolute; display: block; transform: translate(-50%, -100%); pointer-events: none; }
.decor-ghost { width: 100%; display: block; filter: grayscale(1) sepia(.3) brightness(1.15) contrast(.7); opacity: .32; }
.decor-ghost.is-blank { visibility: hidden; }
.decor-price {
  position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
  height: 26px; padding: 0 8px 0 3px; border-radius: 13px; border: 2px solid #fff; margin: 0;
  background: rgba(255, 250, 240, .92); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; line-height: 1;
  box-shadow: var(--shadow); white-space: nowrap;
}
.decor-price img { width: 18px; height: 18px; display: block; }
.decor-price.is-afford { background: #fff3cf; animation: decor-pulse 1.6s ease-in-out infinite; }
.decor-price::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
@keyframes decor-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
  50% { box-shadow: 0 0 0 5px rgba(233, 185, 73, .45), var(--shadow); }
}
html.rm .decor-price.is-afford { animation: none; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.spr-decor { filter: drop-shadow(0 2px 2px rgba(74, 50, 34, .3)); }
.hs-badge.has-price { width: auto; min-width: 36px; padding: 0 8px 0 3px; border-radius: 18px; gap: 2px; right: -16px; color: var(--ink); font-weight: 800; font-size: 13px; }
.thumb-decor img { object-fit: contain; }
.card-decor .price { font-size: 13px; }
.decor-sheet { text-align: center; }
.decor-art { width: 120px; }
.decor-text { margin: 0 0 12px; }
.decor-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; color: var(--ink-2, #6b5a4a); font-weight: 700; }
.btn-decor .price { background: rgba(255, 255, 255, .92); color: var(--ink); padding: 3px 10px 3px 6px; border-radius: 12px; margin-left: 8px; }