/* «Деревянные фишки на доске» (ИНТЕРФЕЙС-ИГРА.md): интерфейс собран из фишек игры. Две формы: PLANK (дощечка)
   и TOKEN (круглая фишка), у каждой видна толщина (тёмная полоса снизу), рисованный значок и одно число или слово.
   Без бумаги, обводок со сдвинутой тенью, абзацев и прописных. Единственная тень контактная. */
@font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/shantell-700.woff2) format('woff2'); }
@font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/shantell-800.woff2) format('woff2'); }
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/mitr-400.woff2) format('woff2'); }
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/mitr-500.woff2) format('woff2'); }
@font-face { font-family: 'Mitr'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/mitr-600.woff2) format('woff2'); }
:root {
  --wood: #ecd5a0; --wood-press: #dcc088; --edge: #b78d4c; --rim: #7b5b36; --bark: #3b2a1b; --bark-2: #7a624a;
  --honey: #e7a63a; --honey-edge: #b4791e; --pine: #4e7a4b; --pine-edge: #345539; --madder: #b8532f; --sky: #86b1c2;
  --board: #f0e0b6; --seam: #d4ba84; --dim: #d9cfb9; --dim-edge: #a89c86; --cream-text: #fff4dc;
  --shade: rgba(42, 28, 14, .42); --contact: drop-shadow(0 2px 3px rgba(42, 28, 14, .28));
  --track: rgba(59, 42, 27, .22);
  --S: env(safe-area-inset-top, 0px); --B: env(safe-area-inset-bottom, 0px);
  --fb: 'Mitr', ui-rounded, 'Arial Rounded MT Bold', 'Hiragino Maru Gothic ProN', sans-serif;
  --fd: 'Shantell Sans', ui-rounded, 'Arial Rounded MT Bold', 'Hiragino Maru Gothic ProN', sans-serif;
  --cap-shadow: 0 1px 0 rgba(42, 28, 14, .85), 0 0 6px rgba(42, 28, 14, .5);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --plank-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%23b78d4c' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23ecd5a0' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-wood-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%23b78d4c' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23ecd5a0' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%23b78d4c' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23ecd5a0' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-wood-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%23b78d4c' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23ecd5a0' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --plank-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%23b4791e' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23e7a63a' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-honey-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%23b4791e' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23e7a63a' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%23b4791e' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23e7a63a' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-honey-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%23b4791e' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23e7a63a' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --plank-pine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%23345539' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%234e7a4b' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-pine-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%23345539' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%234e7a4b' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-pine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%23345539' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%234e7a4b' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-pine-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%23345539' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%234e7a4b' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --plank-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%23a89c86' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23d9cfb9' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-dim-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%23a89c86' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23d9cfb9' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%23a89c86' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23d9cfb9' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-dim-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%23a89c86' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23d9cfb9' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --plank-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%235c8797' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%2386b1c2' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-sky-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%235c8797' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%2386b1c2' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%235c8797' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%2386b1c2' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-sky-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%235c8797' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%2386b1c2' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --plank-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 4)' fill='%23d4ba84' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23f0e0b6' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --plank-board-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52' viewBox='0 0 72 52'%3E%3Cpath transform='translate(0 2)' fill='%23d4ba84' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='%23f0e0b6' stroke='%237b5b36' stroke-width='1.5' d='M15 1.3L57.2 1C64.9 0.9 71.1 7.2 70.9 14.8L71 32.4C71.2 40.1 64.7 46.2 57 46L14.7 46.2C7.1 46.1 0.9 39.7 1.1 32.1L1 15.2C0.8 7.5 7.4 1.2 15 1.3Z'/%3E%3Cpath transform='translate(0 0)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2' stroke-linecap='round' d='M16 3.4L56 3.1'/%3E%3C/svg%3E");
  --token-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 6)' fill='%23d4ba84' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23f0e0b6' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
  --token-board-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cpath transform='translate(0 4)' fill='%23d4ba84' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='%23f0e0b6' stroke='%237b5b36' stroke-width='1.5' d='M32 2.2C48.3 1.9 61.2 14.7 61 31.2C60.8 47.3 48.1 60.2 31.8 60C15.6 59.8 2.9 47 3.1 30.7C3.3 14.8 15.9 2.4 32 2.2Z'/%3E%3Cpath transform='translate(0 2)' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1.3' stroke-linecap='round' d='M17 12.5C22 7.6 27 6 32 5.9'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
#project, #coins, #goal, #finds { position: absolute; }
#finds { top: calc(var(--S) + 92px); right: 12px; height: 32px; gap: 4px; font: 600 15px/1 var(--fb); font-variant-numeric: tabular-nums; }
#finds .ic { width: 20px; height: 20px; }
#finds.all { opacity: .6; }
/* без приближения двойным тапом на iPhone (щипок остаётся) */
html { touch-action: manipulation; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--board); color: var(--bark); font: 400 15px/1.35 var(--fb); overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#stage, #stage canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#ui { position: fixed; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#ui button, #ui a, #ui input, .sheet-wrap { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
img.ic { display: block; flex: none; width: 20px; height: 20px; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- PLANK: дощечка из 9 кусков, толщина снизу ---------- */
.pk { --pk: var(--plank-wood); --pkf: var(--plank-wood-f); display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  border-style: solid; border-color: transparent; border-width: 8px 10px 11px; border-image: var(--pk) 20 fill / 20px stretch;
  filter: var(--contact); color: var(--bark); white-space: nowrap; transition: transform 120ms var(--ease); }
.pk.honey { --pk: var(--plank-honey); --pkf: var(--plank-honey-f); }
.pk.pine { --pk: var(--plank-pine); --pkf: var(--plank-pine-f); color: var(--cream-text); }
.pk.dim { --pk: var(--plank-dim); --pkf: var(--plank-dim-f); color: var(--bark-2); }
.pk.sky { --pk: var(--plank-sky); --pkf: var(--plank-sky-f); }
.pk.board { --pk: var(--plank-board); --pkf: var(--plank-board-f); }
/* мелкая дощечка (подписи на карте, сумка): углы вдвое меньше */
.pk.s { border-width: 4px 7px 6px; border-image-width: 10px; min-height: 20px; gap: 4px; filter: none; }
button.pk:active, a.pk:active, .pk.press { transform: translateY(2px); border-image-source: var(--pkf); transition-duration: 80ms; }

/* ---------- TOKEN: круглая фишка ---------- */
.tk { --tk: var(--token-wood); --tkf: var(--token-wood-f); --s: 60px; --is: 34px; position: relative; flex: none; display: block; width: var(--s); height: var(--s); transition: transform 120ms var(--ease); }
.tk::before { content: ''; position: absolute; left: 0; top: -3%; width: 100%; height: 106.25%; background: var(--tk) center / 100% 100% no-repeat; filter: var(--contact); }
.tk > .ic { position: absolute; left: 50%; top: 50%; width: var(--is); height: var(--is); transform: translate(-50%, -50%); }
.tk.honey { --tk: var(--token-honey); --tkf: var(--token-honey-f); }
.tk.pine { --tk: var(--token-pine); --tkf: var(--token-pine-f); }
.tk.dim { --tk: var(--token-dim); --tkf: var(--token-dim-f); }
.tk.dim > .ic { opacity: .5; }
.tk.sky { --tk: var(--token-sky); --tkf: var(--token-sky-f); }
button.tk:active, button:active > .tk, .tk.press { transform: translateY(2px); transition-duration: 80ms; }
button.tk:active::before, button:active > .tk::before, .tk.press::before { background-image: var(--tkf); }
.tk > svg.glyph { position: absolute; left: 50%; top: 50%; width: 55%; height: 55%; transform: translate(-50%, -50%); fill: none; stroke: var(--bark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.check { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; z-index: 1; }
.check::before { content: ''; position: absolute; inset: 0 0 -1px; background: var(--token-pine) center / 100% 100% no-repeat; }
.check svg { position: absolute; inset: 4px 4px 5px; width: 12px; height: 12px; fill: none; stroke: var(--cream-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- кольцо, полоса, фишка-цена ---------- */
.ring { position: absolute; left: 50%; top: 50%; width: calc(var(--s) * 1.19); height: calc(var(--s) * 1.19); transform: translate(-50%, -49%) rotate(-90deg); pointer-events: none; overflow: visible; }
.ring circle { fill: none; stroke-width: 5; }
.ring .tr { stroke: var(--track); }
.ring .fl { stroke: var(--honey); }
.ring.sky .fl { stroke: var(--sky); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring.pine .fl { stroke: var(--pine); }
.ring.sky .tr { stroke: rgba(59, 42, 27, .3); }
.bar { position: relative; flex: none; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--pine); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); transition: width 400ms ease-out; }
.bar.honey > i { background: var(--honey); }
.bar.big { height: 12px; border-radius: 6px; }
.bar.big > i { border-radius: 6px; }
.chip { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px 0 4px; border-radius: 12px; background: rgba(59, 42, 27, .08); font: 600 13px/1 var(--fb); color: var(--bark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip .ic { width: 16px; height: 16px; }
.chip.short b, .chip .short { color: var(--madder); }
.chip b { font-weight: 600; }
.chip.ok { background: rgba(78, 122, 75, .16); }
.chip i.pot { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#b8604a 0 25%, #4f7f86 0 50%, #c49a45 0 75%, #6f8f4f 0); box-shadow: 0 0 0 1.5px var(--rim); margin: 0 1px; }

/* ---------- кнопки ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 12px 0 0; font: 600 16px/1.1 var(--fb); }
.btn .ic { width: 22px; height: 22px; }
.btn.sec { min-height: 44px; margin-top: 8px; font-size: 15px; }
.btn .chip { background: rgba(59, 42, 27, .12); }
.mini { flex: none; min-height: 36px; padding: 0 2px; font: 600 13px/1 var(--fb); gap: 4px; }
.mini .ic { width: 16px; height: 16px; }
a.pk { text-decoration: none; }
.privacy { margin: 12px auto 0; font: 500 12px/1 var(--fb); color: var(--bark-2); display: flex; width: max-content; min-height: 30px; }

/* ---------- верх ---------- */
.top { position: absolute; top: calc(var(--S) + 8px); }
#day { left: 12px; height: 36px; padding: 0 2px 0 0; font: 600 15px/1 var(--fb); }
#day .ic, #souls .ic { width: 22px; height: 22px; }
#souls { right: 12px; height: 36px; font: 600 17px/1 var(--fb); font-variant-numeric: tabular-nums; }
#souls b { font-weight: 600; min-width: 4ch; text-align: right; }
.pop { animation: pop 180ms ease-out; }
@keyframes pop { 50% { transform: scale(1.15); } }
#project { top: calc(var(--S) + 52px); left: 12px; max-width: 236px; height: 32px; font: 500 13px/1 var(--fb); }
#project .ic { width: 20px; height: 20px; }
#project span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#project .bar { width: 70px; }
#project em { font: 600 13px/1 var(--fb); font-style: normal; font-variant-numeric: tabular-nums; }
#coins { top: calc(var(--S) + 52px); right: 12px; height: 32px; font: 600 15px/1 var(--fb); font-variant-numeric: tabular-nums; }
#coins .ic { width: 20px; height: 20px; }
#btn-sound { position: absolute; top: calc(var(--S) + 92px); left: 12px; --s: 32px; }
#btn-sound svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); fill: none; stroke: var(--bark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
#btn-sound svg .x { stroke: var(--madder); stroke-width: 2.6; opacity: 0; }
#btn-sound.off svg .x { opacity: 1; }
#btn-sound.off svg .w { opacity: .35; }
/* цель первого дня: хижина. Самая заметная дощечка, пока палатка */
#goal { top: calc(var(--S) + 92px); left: 52px; height: 34px; gap: 5px; font: 600 13px/1 var(--fb); }
#goal > .ic { width: 22px; height: 22px; }
#goal .chip { height: 20px; background: rgba(59, 42, 27, .12); }
#goal.ready { animation: bob 2.4s ease-in-out infinite; }
#goal .t { font-variant-numeric: tabular-nums; }
#goal .n { margin-left: 2px; padding: 2px 6px; border-radius: 9px; background: rgba(59, 42, 27, .12); font-variant-numeric: tabular-nums; }
/* лист Today: дела дня, «завтра», лидеры */
.sheet h3 { margin: 16px 0 4px; font: 700 18px/1.2 var(--fd); color: var(--bark); }
.row.done .nm { opacity: .6; }
.row.on { background: rgba(231, 166, 58, .18); border-radius: 12px; }
/* срочный заказ: медовая полоска слева */
.row.rush { box-shadow: inset 3px 0 0 var(--honey); border-radius: 4px 12px 12px 4px; }
.row > b.num { margin-left: auto; font-variant-numeric: tabular-nums; }
/* зачем ресурс: «→ Hut · Rough axe · Workshop» под работой и товаром */
.nm small.why { color: var(--pine); font-weight: 600; }
.tile .nm small.why { font-size: 11px; line-height: 1.15; }
/* ресурс, на который можно нажать (сумка, лавка) → лист «зачем» */
.bagi { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.row > .bagi > .tk { --s: 40px; --is: 24px; }
.row.dimrow .nm { opacity: .7; }
.row.tool { margin-top: 10px; border-bottom: 0; }

/* ---------- записки ---------- */
#toasts { position: absolute; z-index: 9; top: calc(var(--S) + 136px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { max-width: 300px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 4px; font: 500 14px/1.2 var(--fb); animation: tin 160ms var(--ease); transition: opacity 240ms; white-space: normal; }
.toast > .ic { width: 22px; height: 22px; }
.toast .w { font: 700 17px/1 var(--fd); }
.toast .big { font: 800 22px/1 var(--fd); color: var(--honey); -webkit-text-stroke: .6px var(--bark); paint-order: stroke; }
.toast .mini { min-height: 30px; pointer-events: auto; }
.toast.out { opacity: 0; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.dots i.on { background: var(--honey); box-shadow: 0 0 0 1px var(--honey-edge); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- низ: фишки действий ---------- */
#me { position: absolute; left: 12px; bottom: calc(var(--B) + 108px); height: 32px; gap: 4px; }
#me b { font: 700 15px/1 var(--fd); }
#me .ic { width: 18px; height: 18px; margin-left: 4px; }
#me em { font: 600 12px/1 var(--fb); font-style: normal; }
#me.lvl .ic { animation: star 300ms ease-out; }
@keyframes star { 50% { transform: scale(1.4); } }
#bag { position: absolute; right: 12px; bottom: calc(var(--B) + 108px); display: flex; gap: 6px; }
#bag .pk { height: 30px; min-height: 30px; border-width: 6px 8px 9px; border-image-width: 16px; font: 600 13px/1 var(--fb); font-variant-numeric: tabular-nums; gap: 4px; }
#bag .ic { width: 18px; height: 18px; }
#actions { position: absolute; left: 50%; bottom: calc(var(--B) + 12px); width: 350px; margin-left: -175px; display: grid; grid-template-columns: repeat(5, 70px); }
.act { position: relative; height: 92px; }
.act > .tk { position: absolute; left: 50%; bottom: 18px; margin-left: calc(var(--s) / -2); }
.act > em { position: absolute; left: -4px; right: -4px; bottom: 0; height: 14px; display: flex; align-items: center; justify-content: center; gap: 3px; font: 500 11px/1 var(--fb); font-style: normal; color: var(--cream-text); text-shadow: var(--cap-shadow); font-variant-numeric: tabular-nums; white-space: nowrap; }
.act > em .ic { width: 14px; height: 14px; }
#btn-work > .tk { --s: 74px; --is: 40px; bottom: 11px; }
#btn-job > .tk, #btn-shop > .tk { --is: 32px; }
.dot { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--madder); box-shadow: 0 0 0 1.5px var(--cream-text); color: var(--cream-text); font: 600 10px/14px var(--fb); text-align: center; z-index: 1; }
.bob > .tk, .tk.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }

/* ---------- подписи на карте ---------- */
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; font: 600 11px/1 var(--fb); color: var(--bark); white-space: nowrap; will-change: transform; }
.tag.pk.s { height: 22px; padding: 0 1px; }
.tag.f { height: 20px; font-weight: 500; }
.tag .ic { width: 14px; height: 14px; }
.tag.me { display: block; width: 46px; height: 40px; filter: drop-shadow(0 1px 1px rgba(42, 28, 14, .35)); }
.tag.me svg { position: absolute; left: 0; top: 0; width: 46px; height: 40px; overflow: visible; }
.tag.me b { position: absolute; left: 4px; top: 3px; width: 38px; text-align: center; font: 600 11px/16px var(--fb); color: var(--cream-text); }
.tag.place { font: 700 15px/1.1 var(--fd); color: var(--cream-text); text-shadow: 0 1px 0 var(--bark), 0 0 4px rgba(59, 42, 27, .6); }
.float { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; font: 600 15px/1 var(--fb); color: var(--cream-text); text-shadow: var(--cap-shadow); opacity: 0; will-change: transform, opacity; }
.float .ic { width: 16px; height: 16px; }
.float.go { animation: rise 700ms ease-out forwards; }
@keyframes rise { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -46px; } }

/* ---------- лоток (лист) ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; background: var(--shade); animation: fade 200ms; }
.sheet-wrap.clear { background: none; }
.sheet { position: relative; width: 100%; max-width: 480px; max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--board); border-radius: 18px 18px 0 0; border-top: 6px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 -2px 6px rgba(42, 28, 14, .25); padding: 14px 16px calc(var(--B) + 16px); animation: up 240ms var(--ease); }
.sheet.short { max-height: 54vh; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheet > .close { position: absolute; top: 10px; right: 10px; --s: 36px; z-index: 2; }
.sheet h2 { margin: 0 0 10px; padding-right: 44px; font: 700 24px/1.15 var(--fd); color: var(--bark); }
.hint { margin: -4px 0 10px; font: 400 13px/1.35 var(--fb); color: var(--bark-2); }
.btn + .hint { margin-top: 12px; }
.sub { margin: 16px 0 6px; font: 500 13px/1.2 var(--fb); color: var(--bark-2); }
.row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 4px; border-bottom: 1px solid var(--seam); }
.row:last-child { border-bottom: 0; }
.row > .tk { --s: 40px; --is: 24px; }
.row .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 500 15px/1.2 var(--fb); }
.row .nm small { font: 500 13px/1.2 var(--fb); color: var(--bark-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.row .nm small .ic { width: 14px; height: 14px; }
.row .left { font: 600 15px/1 var(--fb); font-variant-numeric: tabular-nums; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { position: relative; display: flex; align-items: center; gap: 8px; height: 76px; padding: 0 2px; text-align: left; white-space: normal; }
.tile > .ic { width: 36px; height: 36px; }
.tile .nm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font: 600 15px/1.1 var(--fb); }
.tile .nm .chip { height: 22px; }
.tile .nm small { font: 500 12px/1.1 var(--fb); color: var(--bark-2); }
.tile.on { --pk: var(--plank-honey); --pkf: var(--plank-honey-f); }
.tile.dim { --pk: var(--plank-dim); --pkf: var(--plank-dim-f); color: var(--bark-2); }
.tile.dim > .ic { opacity: .5; }
.tile.tall { height: auto; min-height: 76px; padding-top: 6px; padding-bottom: 6px; }
.tile .order { position: absolute; left: 6px; top: -8px; padding: 3px 7px; border-radius: 10px; background: var(--pine); color: var(--cream-text); font: 800 12px/1 var(--fd); box-shadow: 0 2px 0 var(--pine-edge); }
.tile.addon { height: auto; min-height: 96px; flex-wrap: wrap; align-content: center; padding: 2px 2px; }
.tile.addon .nm { flex: 1; font-size: 14px; }
.tile.addon .cost { width: 100%; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tile.addon .cost .chip { height: 22px; padding-right: 6px; }
.tile.addon .mini { margin-left: auto; min-height: 30px; border-width: 6px 8px 9px; border-image-width: 16px; }
.tile.owned { --pk: var(--plank-wood); }
.inp { display: flex; gap: 10px; margin-top: 6px; }
.inp label { flex: 1; min-width: 0; height: 52px; display: flex; }
.inp input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: 600 20px/1 var(--fb); color: var(--bark); padding: 0 4px; -webkit-user-select: text; user-select: text; }
.inp input::placeholder { color: var(--bark-2); opacity: .5; }
.inp .btn { flex: none; width: 84px; margin: 0; }
.code { display: flex; justify-content: center; height: 56px; margin: 8px 0 4px; width: 100%; font: 600 22px/1 var(--fb); letter-spacing: .08em; -webkit-user-select: all; user-select: all; pointer-events: auto; }
.line { margin: -2px 0 6px; font: 400 14px/1.35 var(--fb); color: var(--bark-2); }

/* лист дома */
.hhead { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding-right: 40px; }
.hhead > .tk { --s: 64px; --is: 40px; }
.hhead .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hhead .who > div { display: flex; align-items: center; gap: 8px; }
.hhead b { font: 700 22px/1 var(--fd); }
.hhead .bar { flex: 1; max-width: 160px; }
.hhead small { font: 500 14px/1.2 var(--fb); color: var(--bark-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hhead .brush { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; z-index: 1; }
.hhead .brush::before { content: ''; position: absolute; inset: 0 0 -1px; background: var(--token-honey) center / 100% 100% no-repeat; }
.hhead .brush svg { position: absolute; inset: 5px; width: 12px; height: 12px; fill: none; stroke: var(--bark); stroke-width: 2.4; stroke-linecap: round; }
.ladder { position: relative; display: flex; justify-content: space-between; padding: 8px 18px 4px; }
.ladder::before { content: ''; position: absolute; left: 50px; right: 50px; top: 36px; border-top: 3px dotted var(--seam); }
.ladder .st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 12px/1 var(--fb); color: var(--bark-2); }
.ladder .tk { --s: 56px; --is: 36px; }
.ladder .on { color: var(--bark); font-weight: 600; }
.ladder .ring { --s: 56px; }
.need { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 0; }
.btn .t { font-variant-numeric: tabular-nums; }
.later .row { min-height: 46px; }
.later .tk { --s: 34px; --is: 22px; }
.later .nm { font-size: 14px; color: var(--bark-2); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sw { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 1.5px var(--rim); }
.sw.on::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 3px var(--honey); }
.sw:active { transform: translateY(2px); }
.swatches.off .sw { opacity: .45; }
/* редактор облика */
.look .lrow { display: flex; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--seam); overflow-x: auto; scrollbar-width: none; }
.look .lrow::-webkit-scrollbar { display: none; }
.look .lrow > span { flex: none; width: 58px; font: 500 12px/1.1 var(--fb); color: var(--bark-2); }
.look .sw { flex: none; width: 32px; height: 32px; }
.look .opt { flex: none; min-height: 32px; height: 32px; border-width: 6px 8px 9px; border-image-width: 16px; font: 500 13px/1 var(--fb); }
.look .opt.on { --pk: var(--plank-honey); --pkf: var(--plank-honey-f); font-weight: 600; }

/* ---------- мини-игра: лоток без заголовка, мир виден сверху ---------- */
.mg { pointer-events: auto; position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; touch-action: none; -webkit-user-select: none; user-select: none; }
.mg-sheet { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; padding: 12px 16px calc(var(--B) + 18px); background: var(--board); border-radius: 18px 18px 0 0; border-top: 6px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 -2px 6px rgba(42, 28, 14, .25); animation: up 240ms var(--ease); }
.mg-hint { font: 500 13px/1 var(--fb); height: 32px; }
.mg-hint .ic { width: 18px; height: 18px; }
.mg-pad { position: relative; width: min(300px, calc(100vw - 32px)); aspect-ratio: 1; margin: 2px 0; }
.g-chop { aspect-ratio: 300 / 240; }
.mg-pad > * { position: absolute; }
.mg-at { translate: -50% -50%; }
.mg-target { left: 50%; top: 50%; --s: 84px; --is: 48px; }
/* рубка ★2: две половины, куда бить */
.mg-half { top: 5%; bottom: 5%; width: 41%; border: 3px dashed rgba(59, 42, 27, .22); border-radius: 18px; }
.mg-half.l { left: 3%; } .mg-half.r { right: 3%; }
.mg-half.bump { background: rgba(231, 166, 58, .18); }
/* прялка ★2: стрелка направления вокруг колеса */
.mg-spin .dir path { fill: none; stroke: var(--honey-edge); stroke-width: 16; stroke-linecap: round; }
.mg-spin .dir .hd { fill: var(--honey-edge); stroke: var(--honey-edge); stroke-width: 8; stroke-linejoin: round; }
/* поплавок ★2: поклёвка */
.mg-bob.tug { animation: mg-tug 420ms ease-out; }
@keyframes mg-tug { 0% { rotate: 0deg; } 20% { rotate: -14deg; } 45% { rotate: 10deg; } 70% { rotate: -5deg; } 100% { rotate: 0deg; } }
/* куст ★2: пчела на ягоде */
.mg-bee { position: absolute; right: -8px; top: -10px; width: 46px; height: 37px; opacity: 0; scale: .4; translate: 18px -14px; transition: opacity 180ms, scale 180ms, translate 260ms; pointer-events: none; }
.mg-bee svg { width: 100%; height: 100%; display: block; }
.mg-bush.bee .mg-bee { opacity: 1; scale: 1; translate: 0 0; animation: mg-buzz 300ms ease-in-out infinite alternate; }
@keyframes mg-buzz { from { rotate: -8deg; } to { rotate: 8deg; } }
.mg-ring { width: var(--rs, 88px); height: var(--rs, 88px); opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 2; }
.mg-ring svg { width: 100%; height: 100%; overflow: visible; }
.mg-ring circle { fill: none; }
.mg-word { position: absolute; left: 0; right: 0; top: 8px; text-align: center; font: 800 34px/1 var(--fd); color: var(--honey); opacity: 0; pointer-events: none; z-index: 3;
  text-shadow: 1.5px 0 0 var(--bark), -1.5px 0 0 var(--bark), 0 1.5px 0 var(--bark), 0 -1.5px 0 var(--bark), 1px 1px 0 var(--bark), -1px -1px 0 var(--bark), 1px -1px 0 var(--bark), -1px 1px 0 var(--bark); }
.mg-word.show { animation: hit 820ms linear forwards; }
.mg-word.g { color: var(--cream-text); } .mg-word.m { color: var(--dim); }
@keyframes hit { 0% { opacity: 1; transform: rotate(-6deg) scale(1.25); } 15% { opacity: 1; transform: rotate(-6deg) scale(1); } 76% { opacity: 1; transform: rotate(-6deg) scale(1); } 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }
.bump { animation: mg-bump 260ms var(--ease); }
.shake { animation: mg-shake 320ms ease-out; }
@keyframes mg-bump { from { scale: 1.18; } }
@keyframes mg-shake { 20% { rotate: -9deg; } 40% { rotate: 8deg; } 60% { rotate: -5deg; } 80% { rotate: 3deg; } }
/* прялка: колесо со спицами крутится за пальцем, шкала скорости справа */
.mg-spin { inset: 0; width: 100%; height: 100%; overflow: visible; }
.mg-spin .track { fill: none; stroke: rgba(59, 42, 27, .22); stroke-width: 9; stroke-dasharray: 26 20; }
.mg-spin .wh path { stroke: var(--bark-2); stroke-width: 16; stroke-linecap: round; }
.mg-spin .rim { fill: none; stroke: var(--bark); stroke-width: 34; }
.mg-spin .rim + .hub { fill: var(--honey); stroke: var(--bark); stroke-width: 8; }
.mg-spin .knob { fill: var(--madder); stroke: var(--bark); stroke-width: 7; }
.mg-spin .wh { filter: drop-shadow(0 6px 0 rgba(42, 28, 14, .25)); }
.mg-gauge2 { left: 84%; width: 34px; top: 8%; bottom: 8%; border-radius: 17px; background: var(--wood); border: 2px solid var(--rim); box-shadow: inset 0 0 0 3px var(--board); overflow: hidden; }
.mg-gauge2 .bd { position: absolute; left: 0; right: 0; background: rgba(78, 122, 75, .35); }
.mg-gauge2 .bd > i { position: absolute; left: 0; right: 0; background: rgba(78, 122, 75, .7); }
.mg-gauge2 .nd { position: absolute; left: -2px; right: -2px; height: 8px; margin-top: -4px; border-radius: 4px; background: var(--madder); border: 1.5px solid var(--bark); transition: top 60ms linear; }
.mg-gauge2.in .nd { background: var(--honey); }
/* прядь: дуга вокруг фишки наполняется, пока держишь */
.mg-arc { left: 50%; top: 50%; width: 132px; height: 132px; pointer-events: none; opacity: .45; transition: opacity 120ms; }
.mg-arc.on { opacity: 1; }
.mg-arc svg { width: 100%; height: 100%; rotate: -90deg; }
.mg-arc circle { fill: none; stroke-width: 8; }
.mg-arc .tr { stroke: var(--track); }
.mg-arc .fl { stroke: var(--pine); stroke-linecap: round; }
.mg-arc.full .fl { stroke: var(--honey); }
/* покос: поле, снопы, маки и камни, след взмаха */
.g-reap { overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--rim);
  background: repeating-linear-gradient(170deg, transparent 0 26px, rgba(180, 121, 30, .12) 26px 30px), linear-gradient(#e9d38f, #d9bd6c); }
.mg-crop { width: 64px; height: 64px; animation: mg-sprout 180ms var(--ease); }
.mg-crop > .ic, .mg-crop > svg { width: 100%; height: 100%; display: block; filter: var(--contact); }
.mg-crop.bad { width: 54px; height: 54px; }
@keyframes mg-sprout { from { scale: .3; translate: -50% -10%; opacity: 0; } }
.mg-crop.good > .ic { transform-origin: 50% 90%; animation: mg-sway 900ms ease-in-out infinite alternate; }
@keyframes mg-sway { from { rotate: -5deg; } to { rotate: 5deg; } }
.mg-crop.cut { animation: mg-reaped 420ms ease-out forwards; }
@keyframes mg-reaped { to { translate: -50% -110%; rotate: 35deg; scale: .7; opacity: 0; } }
.mg-crop.hit { animation: mg-shake 320ms ease-out, mg-red 500ms; }
@keyframes mg-red { 30% { filter: drop-shadow(0 0 6px #c8402a); } }
.mg-crop.gone { transition: opacity 380ms, scale 380ms; opacity: 0; scale: .7; }
.mg-swipe { inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.mg-swipe polyline { fill: none; stroke: rgba(255, 252, 240, .9); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(231, 166, 58, .8)); }
.mg-dust.gold { background: #f0c75a; }
.mg-moves small { font: 600 14px/1 var(--fb); color: var(--bark-2); margin-left: 1px; }

/* сруб: стена из брёвен растёт вверх, едущее бревно на верёвках */
.g-nail { overflow: hidden; border-radius: 14px; background: linear-gradient(#cfe3e8, #f0e0b6 75%); box-shadow: inset 0 0 0 2px var(--rim); }
.mg-wall { inset: 0; transition: translate 400ms var(--ease); }
.mg-ground { position: absolute; left: 0; right: 0; top: 94%; height: 40%; background: #8aa35a; border-top: 2px solid var(--pine-edge); }
.mg-log { position: absolute; border: 2px solid var(--bark); border-radius: 999px; background: linear-gradient(#c99a5c, #9a6a38 70%, #84582c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.mg-log::before, .mg-log::after { content: ''; position: absolute; top: 8%; bottom: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #e8c98e 0 18%, #d2a868 19% 34%, #e8c98e 35% 52%, #c79a5a 53%); border: 1.5px solid var(--bark); }
.mg-log::before { left: 2px; } .mg-log::after { right: 2px; }
.mg-log.drop { animation: mg-drop 260ms cubic-bezier(.5, 0, .9, .5); }
@keyframes mg-drop { from { translate: 0 -120%; } }
.mg-log.perfect { animation: mg-drop 260ms cubic-bezier(.5, 0, .9, .5), mg-gold 700ms 260ms; }
@keyframes mg-gold { 0% { box-shadow: 0 0 0 4px var(--honey); } 100% { box-shadow: 0 0 0 0 rgba(231, 166, 58, 0); } }
.mg-log.cut { animation: mg-cut-fall 700ms ease-in forwards; }
.mg-log.cut.l { --rot: -40deg; --dx: -30px; } .mg-log.cut.r { --rot: 40deg; --dx: 30px; }
@keyframes mg-cut-fall { 0% { translate: 0 -120%; } 30% { translate: 0 0; rotate: 0deg; opacity: 1; } 100% { translate: var(--dx) 260%; rotate: var(--rot); opacity: 0; } }
.mg-log.miss { animation: mg-cut-fall 800ms ease-in forwards; --dx: 0; --rot: 25deg; }
.mg-hang { position: absolute; }
.mg-hang > .mg-log { inset: 0; }
.mg-rope { position: absolute; bottom: 50%; height: 400px; width: 2px; background: var(--bark-2); }
.mg-rope:first-child { left: 22%; } .mg-rope:nth-child(2) { right: 22%; }
.mg-hang.wait { opacity: 0; }

/* пила: доска, карандашная линия, распил за пальцем */
.mg-wood { inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity 260ms; }
.mg-plank rect { fill: var(--wood); stroke: var(--rim); stroke-width: 6; }
.mg-plank .gr { fill: none; stroke: rgba(123, 91, 54, .22); stroke-width: 5; }
.mg-pencil { fill: none; stroke: rgba(59, 42, 27, .55); stroke-width: 7; stroke-dasharray: 22 16; stroke-linecap: round; }
.mg-cutline { fill: none; stroke: var(--bark); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.mg-start { fill: rgba(231, 166, 58, .35); stroke: var(--honey-edge); stroke-width: 6; animation: mg-glow 900ms ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.mg-end { fill: var(--bark); opacity: .35; }
.mg-pencil.far { opacity: .35; }
/* ★5 опилки: доска присыпана, конец распила не виден */
.mg-wood.dusty .mg-plank rect { fill: #e6c993; }
.mg-wood.dusty .mg-end { opacity: 0; }
.stars { display: grid; gap: 6px; margin-top: 12px; }
.stars .st { flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 0 1px; white-space: normal; }
.stars .st b { font: 800 16px/1 var(--fd); }
.stars .st small { font: 500 10px/1.05 var(--fb); text-align: center; overflow-wrap: anywhere; }
.star-line { margin: 8px 0 0; font: 500 13px/1.35 var(--fb); color: var(--bark-2); }
.mg-star { font: 800 15px/1 var(--fd); color: var(--honey-edge); margin-right: 6px; }
@keyframes mg-glow { to { scale: 1.25; opacity: .6; } }
.mg-wood.split .mg-plank, .mg-wood.split .mg-cutline { animation: mg-split 420ms ease-in forwards; }
@keyframes mg-split { to { translate: 0 60px; opacity: 0; } }
.mg-saw { width: 64px; height: 40px; pointer-events: none; z-index: 2; transform-origin: 20% 70%; transition: scale 120ms; }
.mg-saw svg { width: 100%; height: 100%; display: block; filter: var(--contact); transform: scaleX(-1); }
.mg-saw:not(.on) { animation: mg-hover 800ms ease-in-out infinite alternate; }
@keyframes mg-hover { to { scale: 1.12; } }
.mg-saw.fast svg { animation: mg-shake 220ms linear infinite; }
.mg-dust { width: 6px; height: 6px; border-radius: 2px; background: #d9b77a; pointer-events: none; animation: mg-dust 500ms ease-out forwards; }
@keyframes mg-dust { to { translate: calc(-50% + var(--dx)) 26px; opacity: 0; } }
/* кладка: шесть камней разной формы на растворе, тройки уходят, сверху сыплются новые */
.g-chisel { overflow: hidden; border-radius: 14px; background: #d6c9ad; box-shadow: inset 0 0 0 2px var(--rim), inset 0 3px 0 rgba(255, 255, 255, .35); }
.mg-stone { width: calc(100% / 6); height: calc(100% / 6); transition: left 150ms var(--ease), top 300ms cubic-bezier(.45, 0, .7, 1.25); }
.mg-stone svg { display: block; width: 86%; height: 86%; margin: 7%; filter: var(--contact); transition: scale 120ms var(--ease); }
.mg-stone.pick svg { scale: 1.16; }
.mg-stone.pick::after { content: ''; position: absolute; inset: 3%; border: 3px solid var(--honey); border-radius: 12px; }
.mg-stone.pop svg { transition: scale 180ms ease-in, opacity 180ms; scale: .2; opacity: 0; }
.mg-dots { align-items: center; }
.mg-moves { display: flex; align-items: center; gap: 4px; font: 700 19px/1 var(--fd); color: var(--bark); }
.mg-moves .ic { width: 22px; height: 22px; }
.mg-goal { width: 140px; height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.mg-goal i { display: block; height: 100%; width: 0; background: var(--pine); transition: width 300ms var(--ease); }
.mg-pts { font: 600 14px/1 var(--fb); color: var(--bark-2); }
.mg-needs { display: flex; gap: 8px; }
.mg-need { display: flex; align-items: center; gap: 3px; font: 700 15px/1 var(--fd); color: var(--bark); }
.mg-need svg { width: 22px; height: 22px; }
.mg-stone.key svg { filter: var(--contact) drop-shadow(0 0 3px rgba(231, 166, 58, .8)); }
.mg-pts b { color: var(--bark); font-weight: 700; }
/* щепки камня */
.mg-chip { width: 9px; height: 9px; background: #aaa394; border: 1.5px solid var(--bark); border-radius: 2px; pointer-events: none; animation: mg-chip 560ms ease-out forwards; }
@keyframes mg-chip { to { translate: calc(-50% + var(--dx)) -48px; rotate: 170deg; opacity: 0; } }
/* поплавок: столб воды, рябь, полоска улова */
.mg-water { left: 30%; width: 40%; top: 2%; bottom: 2%; border-radius: 16px; overflow: hidden; border: 2px solid var(--rim);
  background: linear-gradient(#b4d6e2, #5c8797); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.mg-band { position: absolute; left: 0; right: 0; background: rgba(255, 244, 220, .22); border-block: 2px dashed rgba(255, 244, 220, .75); }
.mg-band > i { position: absolute; left: 0; right: 0; background: rgba(255, 244, 220, .32); }
.mg-bob { position: absolute; left: 50%; width: 30px; height: 46px; translate: -50% -50%; }
.mg-bob svg { width: 100%; height: 100%; display: block; }
.mg-bob.in svg { animation: mg-wob 520ms ease-in-out infinite alternate; }
@keyframes mg-wob { from { rotate: -7deg; } to { rotate: 7deg; } }
.mg-catch { left: 80%; width: 16px; top: 24%; bottom: 4%; border-radius: 8px; background: var(--track); border: 1.5px solid var(--rim); overflow: hidden; }
.mg-catch > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pine); }
.mg-fish { left: calc(80% + 8px); top: 3%; translate: -50% 0; --s: 50px; --is: 32px; }
/* куст: девять кустов, ягода наливается */
.mg-bush { --s: 82px; }
.mg-berry { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.mg-berry > .ic, .mg-fly > .ic { width: 100%; height: 100%; }
.mg-bush:not([data-s]) .mg-berry, .mg-bush[data-s=""] .mg-berry, .mg-bush[data-s="picked"] .mg-berry { opacity: 0; }
.mg-bush[data-s="green"] .mg-berry { filter: saturate(.25) hue-rotate(75deg) brightness(1.1); }
.mg-bush[data-s="fall"] .mg-berry { animation: mg-fall 350ms ease-in forwards; filter: saturate(.5); }
@keyframes mg-fall { to { translate: 0 28px; opacity: 0; } }
.mg-fly { width: 48px; height: 48px; pointer-events: none; z-index: 2; animation: mg-fly 620ms var(--ease) forwards; }
@keyframes mg-fly { to { translate: -50% -190%; scale: .7; opacity: 0; } }
/* тетива: мишень и шкала натяга */
.mg-butt { width: 150px; height: 150px; }
.mg-butt svg { width: 100%; height: 100%; display: block; filter: var(--contact); }
/* тетива ★3-★5: куст прикрывает мишень, ветер, сумерки */
.mg-cover { width: 170px; height: 136px; z-index: 1; scale: 0; transform-origin: 50% 90%; transition: scale 160ms var(--ease); pointer-events: none; }
.mg-cover.on { scale: 1; }
.mg-cover svg { width: 100%; height: 100%; display: block; filter: var(--contact); }
.mg-gauge.hid .mg-zone { background: rgba(122, 98, 74, .3); }
.mg-gauge.hid .mg-zone > i { opacity: 0; }
.mg-gauge.dark .mg-zone { opacity: 0; }
.mg-night { inset: -2%; border-radius: 18px; background: radial-gradient(circle at 50% 36%, rgba(44, 58, 120, .16), rgba(22, 30, 78, .5)); opacity: 0; pointer-events: none; }
.mg-night.on { opacity: 1; }
.mg-wind { left: 4%; right: 4%; top: 14%; height: 44%; pointer-events: none; opacity: 0; }
.mg-wind > i { position: absolute; left: 0; width: 46%; height: 5px; border-radius: 3px; background: rgba(255, 244, 220, .95); box-shadow: 0 0 0 1.5px rgba(59, 42, 27, .35); }
.mg-wind > i:nth-child(1) { top: 20%; } .mg-wind > i:nth-child(2) { top: 50%; left: 20%; width: 36%; } .mg-wind > i:nth-child(3) { top: 78%; left: 8%; }
.mg-wind.blow { animation: mg-blow 620ms ease-out; }
@keyframes mg-blow { 0% { opacity: 0; translate: -30% 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: 60% 0; } }
.mg-hole { position: absolute; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%; background: var(--bark); box-shadow: 0 0 0 2.5px var(--cream-text); animation: mg-bump 220ms var(--ease); }
.mg-gauge { left: 6%; right: 6%; top: 72%; height: 34px; border-radius: 17px; background: var(--wood); border: 2px solid var(--rim); box-shadow: 0 4px 0 var(--edge), 0 5.5px 0 var(--rim); transition: opacity 200ms; }
.mg-zone { position: absolute; top: 3px; bottom: 3px; background: rgba(231, 166, 58, .45); border-radius: 6px; transition: opacity 200ms; }
.mg-zone > i { position: absolute; top: 0; bottom: 0; background: var(--honey); border-radius: 4px; }
.mg-needle { position: absolute; top: -9px; bottom: -9px; width: 6px; margin-left: -3px; background: var(--bark); border-radius: 3px; }
.mg-gauge.draw .mg-needle { background: var(--madder); box-shadow: 0 0 0 1.5px var(--bark); }
.mg-gauge.wait { opacity: .55; }
.mg-gauge.wait .mg-zone { opacity: 0; }
/* ступка: шесть трав, карточка рецепта сверху */
.mg-herb { --s: 86px; --is: 52px; }
.mg-card { inset: 2%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 16px;
  background: var(--board); border: 2px solid var(--rim); box-shadow: 0 5px 0 var(--seam), 0 6.5px 0 var(--rim); transition: opacity 220ms, scale 220ms; }
.mg-card.gone { opacity: 0; scale: .92; pointer-events: none; }
.mg-card b { font: 700 20px/1 var(--fd); color: var(--bark); }
.mg-rec { display: flex; gap: 10px; }
.mg-rec .tk { --s: 76px; --is: 46px; }
.mg-rec em { position: absolute; right: -3px; top: -5px; width: 24px; height: 24px; border-radius: 50%; background: var(--bark); color: var(--cream-text); font: 700 13px/24px var(--fb); font-style: normal; text-align: center; }
.mg-rec .x { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; padding: 2px 7px; border-radius: 10px; background: var(--madder); color: var(--cream-text); font: 800 14px/1.1 var(--fd); }
.mg-card.two { gap: 10px; }
.mg-card.two .mg-rec .tk { --s: 62px; --is: 38px; }
.mg-flask { display: block; flex: none; align-self: center; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--bark); }
.mg-flask.red { background: var(--madder); } .mg-flask.blue { background: var(--sky); }
.mg-ask { left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 14px; background: var(--board); border: 2px solid var(--rim); font: 700 17px/1 var(--fd); color: var(--bark); opacity: 0; transition: opacity 200ms; pointer-events: none; }
.mg-ask.on { opacity: 1; }
.mg-herb.lit { scale: 1.12; }
.mg-herb.slide { transition: left 420ms var(--ease), top 420ms var(--ease); }
.mg-time { width: 70%; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.mg-time > i { display: block; height: 100%; background: var(--pine); }
.mg-dots { display: flex; gap: 8px; padding: 4px 0 0; }
.mg-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rim); }
.mg-dots i.p { background: var(--honey); box-shadow: inset 0 0 0 1.5px var(--honey-edge); }
.mg-dots i.g { background: var(--pine); box-shadow: none; }
.mg-dots i.m { background: rgba(59, 42, 27, .25); box-shadow: none; }

/* ---------- загрузка ---------- */
#loading, #lost { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: var(--board); text-align: center; }
#loading { z-index: 10; transition: opacity .3s; }
#loading.done { opacity: 0; pointer-events: none; }
#lost { z-index: 11; }
#loading .tk, #lost .tk { --s: 112px; --is: 64px; }
#loading h1, #lost h1 { margin: 4px 0 0; font: 800 26px/1.1 var(--fd); color: var(--bark); }
#loading-text { font: 400 13px/1.3 var(--fb); color: var(--bark-2); }
#lost .btn { width: 240px; }
.lbar { position: relative; width: 160px; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.lbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 5px; background: var(--honey); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); transform-origin: left; animation: lfill 1.2s steps(8, end) infinite; }
@keyframes lfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#debug { position: absolute; left: 6px; bottom: calc(var(--B) + 150px); font: 10px/1.2 ui-monospace, monospace; color: var(--cream-text); text-shadow: 0 1px 0 #000; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }
.shead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 44px; margin-bottom: 6px; }
.shead h2 { margin: 0; padding: 0; }
.shead .pk { height: 32px; font: 600 15px/1 var(--fb); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 10px; font: 400 14px/1.3 var(--fb); color: var(--bark-2); }
.empty .ic { width: 48px; height: 48px; }
.phead { display: flex; align-items: center; gap: 10px; padding-right: 44px; margin-bottom: 8px; }
.phead .tk { --s: 40px; --is: 24px; }
.phead h2 { margin: 0; padding: 0; }
.pbar { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.pbar .bar { flex: 1; }
.pbar b { font: 700 20px/1 var(--fd); font-variant-numeric: tabular-nums; }
.row.building { border-bottom: 0; }
.row.building > .tk { --s: 48px; --is: 30px; }
.row .nm small b { font-weight: 600; color: var(--bark); }
.tile .nm > span { display: flex; gap: 4px; flex-wrap: wrap; }
.hhead .who .bar { flex: none; width: 100%; max-width: 170px; height: 8px; }
#join { position: absolute; left: 50%; bottom: calc(var(--B) + 24px); transform: translateX(-50%); min-height: 52px; padding: 0 14px; font: 600 16px/1 var(--fb); }
#join .ic { width: 24px; height: 24px; }
#join:active { transform: translateX(-50%) translateY(2px); }

/* карточка жителя */
.mebar { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; }
.mebar .bar { flex: 1; }
.mebar small { flex: none; font: 500 12px/1 var(--fb); color: var(--bark-2); font-variant-numeric: tabular-nums; }
.pts { display: flex; align-items: center; gap: 6px; height: 40px; margin: 0 0 6px; font: 600 15px/1 var(--fb); }
.pts .ic { width: 24px; height: 24px; }
.row.stat .nm .bar { width: 100%; max-width: 160px; height: 6px; margin-top: 3px; }
.row.stat .big { flex: none; min-width: 28px; text-align: right; font: 800 22px/1 var(--fd); color: var(--bark); }
.row.stat .plus { min-width: 40px; font: 800 20px/1 var(--fd); }
.req { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 3px; border-radius: 9px; background: var(--track); color: var(--bark-2); font: 600 12px/16px var(--fb); font-variant-numeric: tabular-nums; }
.req.ok { background: var(--pine); color: var(--cream-text); }
.sub { display: flex; align-items: center; gap: 6px; }
.sub .ic { width: 18px; height: 18px; }
.gear { display: flex; gap: 10px; margin: 2px 0 6px; }
.gear .tk { --s: 52px; --is: 32px; }
.gear .tk.off { opacity: .4; filter: grayscale(1); }
.bag { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.look .lrow { flex-wrap: wrap; overflow: visible; padding: 6px 0; row-gap: 6px; }
.look .lrow > span { width: 100%; }

/* обучение первого дня: дощечка над нужной кнопкой и пульс */
.tut { position: fixed; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 6px; max-width: min(300px, calc(100vw - 16px)); min-height: 40px; padding: 0 4px 0 6px; font: 600 15px/1.2 var(--fb); pointer-events: auto; will-change: transform; }
.tut::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 8px); bottom: -9px; border: 8px solid transparent; border-bottom: 0; border-top-color: var(--rim); }
.tut.below::after { bottom: auto; top: -9px; border: 8px solid transparent; border-top: 0; border-bottom-color: var(--rim); }
.tut.in > span { animation: tutIn 360ms ease-out; }
.tut-x { flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--bark-2); font: 600 18px/1 var(--fb); }
@keyframes tutIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tut-pulse::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; box-shadow: 0 0 0 3px var(--honey); animation: tutPulse 1200ms ease-out infinite; pointer-events: none; }
@keyframes tutPulse { 0% { opacity: .9; transform: scale(.94); } 70% { opacity: 0; transform: scale(1.18); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tut-pulse::after { animation: none; } .tut.in > span { animation: none; } }

/* ---------- дом изнутри (ui/home.ts): комната сверху, лист снизу ---------- */
body.inside #labels, body.inside #actions, body.inside #goal, body.inside #day, body.inside #souls, body.inside #project, body.inside #finds, body.inside #btn-sound, body.inside #me, body.inside #bag, body.inside #join, body.inside #coins { visibility: hidden; }
.sheet.home-sheet { max-height: 54vh; }
.htiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile.slot { flex-direction: column; justify-content: center; gap: 2px; height: auto; min-height: 112px; padding: 6px 2px; text-align: center; }
.tile.slot .nm { align-items: center; font-size: 14px; }
.tile.slot .nm small { font-size: 11px; }
.thumb { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.thumb.ghost { opacity: .35; filter: grayscale(.7); }
.frow { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 4px 2px; border-top: 1px solid var(--seam); }
.frow.on { background: rgba(231, 166, 58, .18); border-radius: 12px; }
.frow.dimrow .nm, .frow.dimrow .thumb { opacity: .6; }
.frow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 600 15px/1.2 var(--fb); }
.frow .nm small { font: 500 12px/1.2 var(--fb); color: var(--bark-2); }
.frow + .need, .frow + .swatches, .need + .swatches { margin: 2px 0 8px; }
.need .mini { margin-left: 4px; }
.back { margin: 0 0 8px; }


/* задания недели (ui/today.ts): строка-кнопка ведёт туда, где это делается; награда справа */
button.row.task { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--seam); text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.row.task:disabled { cursor: default; }
.row .rw { display: flex; gap: 4px; flex: none; }
.row .rw .chip { height: 22px; }
#goal .t { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row > .check, .frow > .check { position: relative; top: auto; right: auto; flex: none; }