/* Ферма Киры. Одна раскладка «от телефона»: колонка до 480 px; на компьютере вокруг — размытая ферма. */
:root {
  --ink: #4a2e1f; --ink-2: #6b4a33; --muted: #8b6f5a;
  --cream: #fffaf0; --cream-2: #fbeed5; --line: #ecd6b0;
  --wood: #c98b4f; --wood-d: #9c6633; --wood-l: #f6dfae;
  --leaf: #8bcf4c; --leaf-2: #6fb53a; --leaf-d: #4c8a23;
  --pink: #f590ad; --pink-d: #d2678a; --gold: #ffcd3c; --gold-d: #e08a00;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='%23e9a31b'/%3E%3Ccircle cx='32' cy='30' r='26' fill='%23ffcd3c'/%3E%3Cellipse cx='32' cy='31' rx='12' ry='9' fill='%23f6a8b8'/%3E%3Cellipse cx='27.5' cy='31' rx='2.6' ry='3.4' fill='%23c4566f'/%3E%3Cellipse cx='36.5' cy='31' rx='2.6' ry='3.4' fill='%23c4566f'/%3E%3C/svg%3E");
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The game fills the whole screen. --app-h is set by app.js: an app opened from the iPhone Home Screen measures
   100vh shorter than the screen by the status bar, which left a green strip at the bottom. */
html { height: var(--app-h, 100%); background: #86a84c var(--farm-bg, url("/static/art/farms/hills-autumn.webp")) center bottom / cover no-repeat; }
html, body, .app, .app * { touch-action: manipulation; }   /* a double tap never zooms */
body {
  font-family: var(--font); color: var(--ink); background: #86a84c; overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none;
}
body::before {          /* desktop: the farm softly around the game column */
  content: ""; position: fixed; inset: -40px; background: var(--farm-bg, url("/static/art/farms/hills-autumn.webp")) center / cover;
  filter: blur(22px) saturate(1.1) brightness(.82); z-index: -1;
}
button { font: inherit; color: inherit; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 28px; height: 28px; flex: none; }

.app {
  position: relative; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; height: var(--app-h, 100dvh); margin: 0 auto; overflow: hidden;
  background: #a9d062; -webkit-user-select: none; user-select: none; box-shadow: 0 0 60px rgba(30, 20, 5, .45);
}

/* ---------- the farm ---------- */
.scene { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; }
.scene-in { position: absolute; left: 0; top: 0; background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; }
.pig { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pig-spr { position: absolute; background-repeat: no-repeat; cursor: pointer; }
.pig-shadow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(58, 42, 8, .34) 0%, rgba(58, 42, 8, .2) 42%, rgba(58, 42, 8, 0) 70%);
}
.heart {
  position: absolute; width: 22px; height: 20px; margin-left: -11px; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14.2 1 7.2A5.6 5.6 0 0 1 12 4.6 5.6 5.6 0 0 1 23 7.2C23 14.2 12 21 12 21z' fill='%23ff5f87'/%3E%3Cpath d='M6 5.5a3 3 0 0 0-2.6 2.8' stroke='%23ffc1d1' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: heart 1.6s ease-out forwards;
}
@keyframes heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-8px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-70px) scale(.9) rotate(-8deg); } }
.bfly { position: absolute; left: 0; top: 0; background-repeat: no-repeat; pointer-events: none; will-change: transform; }
/* further away: swimmers in the pond, tiny pigs on the hill, the sleeping pile in the house */
.pig.swim .pig-shadow { background: radial-gradient(ellipse at center, rgba(255, 255, 255, .8) 0 28%, rgba(255, 255, 255, .4) 44%, rgba(255, 255, 255, 0) 70%); }
.pig.tiny .pig-shadow { opacity: .55; }
.house-pile { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; border-radius: 50% 50% 0 0 / 64% 64% 0 0; }
.pile-pig { position: absolute; background-repeat: no-repeat; transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
.pile-pig.flip { animation-name: breathe-flip; }
@keyframes breathe { 50% { transform: scaleY(1.06); } }
@keyframes breathe-flip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) scaleY(1.06); } }
.far-badge {
  position: absolute; left: 0; top: 0; z-index: 2700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(255, 250, 238, .93); color: var(--ink-2); font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(60, 40, 10, .2);
}
.scene.paused .pile-pig { animation-play-state: paused; }
.weather { position: absolute; inset: 0; pointer-events: none; z-index: 2600; overflow: hidden; }
.fx { position: absolute; top: -4%; width: calc(20px * var(--s, 1)); height: calc(20px * var(--s, 1)); opacity: .95;
  background-repeat: no-repeat; background-size: contain; animation: fall 14s linear infinite; }
@keyframes fall { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(28px, 27vh, 0) rotate(120deg); }
  50% { transform: translate3d(-12px, 55vh, 0) rotate(250deg); } 75% { transform: translate3d(34px, 83vh, 0) rotate(380deg); }
  100% { transform: translate3d(6px, 112vh, 0) rotate(520deg); } }
.fx-leaf.fx-v0 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 5 4.6-1.7-1.4 5 4.2 2.2-4.6 2.4 1 4.6-4.6-1.8L12 23l-1.8-6.3-4.6 1.8 1-4.6L2 11.5l4.2-2.2-1.4-5 4.6 1.7z' fill='%23f08a24'/%3E%3C/svg%3E"); }
.fx-leaf.fx-v1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6 7 5 15 12 22c7-7 6-15 0-20z' fill='%23f5c33b'/%3E%3Cpath d='M12 5v16' stroke='%23d99a1a' stroke-width='1.2'/%3E%3C/svg%3E"); }
.fx-leaf.fx-v2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 5 4.6-1.7-1.4 5 4.2 2.2-4.6 2.4 1 4.6-4.6-1.8L12 23l-1.8-6.3-4.6 1.8 1-4.6L2 11.5l4.2-2.2-1.4-5 4.6 1.7z' fill='%23d9502b'/%3E%3C/svg%3E"); }
.fx-leaf.fx-v3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6 7 5 15 12 22c7-7 6-15 0-20z' fill='%23e8a03a'/%3E%3C/svg%3E"); }
.fx-snow { border-radius: 50%; background: radial-gradient(circle, #fff 0 45%, rgba(255, 255, 255, 0) 70%); width: calc(10px * var(--s, 1)); height: calc(10px * var(--s, 1)); }
.fx-petal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c5 4 5 12 0 18-5-6-5-14 0-18z' fill='%23fff8ec'/%3E%3C/svg%3E"); }
.fx-fluff { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 240, .95) 0 30%, rgba(255, 255, 240, 0) 70%); }
.scene.paused .fx { animation-play-state: paused; }

/* ---------- top: coins, pigs, settings ---------- */
.hud { position: absolute; top: calc(var(--safe-t) + 10px); left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; z-index: 4000; transition: opacity .3s; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(255, 250, 238, .94); font-weight: 900; font-size: 21px; color: var(--ink); font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 rgba(150, 100, 45, .35), 0 8px 18px rgba(60, 40, 10, .14);
}
.pill .ico { width: 32px; height: 32px; }
.pill.bump { animation: bump .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 40% { transform: scale(1.16); } }
.round-btn {
  width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 250, 238, .94); color: var(--wood-d);
  display: grid; place-items: center; box-shadow: 0 3px 0 rgba(150, 100, 45, .35), 0 8px 18px rgba(60, 40, 10, .14); cursor: pointer;
}
.round-btn svg { width: 24px; height: 24px; }
.hud #cup { margin-left: auto; }
.round-btn:active { transform: translateY(2px); }
.hello {
  position: absolute; top: calc(var(--safe-t) + 70px); left: 50%; z-index: 4000; pointer-events: none; opacity: 0;
  transform: translateX(-50%) translateY(-6px) scale(.9); padding: 10px 20px; border-radius: 20px; background: var(--cream);
  font-weight: 900; font-size: 20px; color: var(--ink); box-shadow: 0 6px 18px rgba(60, 40, 10, .2); transition: all .35s cubic-bezier(.3, 1.4, .5, 1);
}
.hello.on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---------- bottom: Решать, Новая свинка ---------- */
.dock { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 14px + var(--lift, 0px)); display: grid; grid-template-columns: 1.12fr 1fr; gap: 10px; z-index: 4000; transition: opacity .3s; }
.app:not(.ready) .dock, .app:not(.ready) .hud { opacity: 0; }
.btn {
  position: relative; border: 0; border-radius: 22px; font-weight: 900; cursor: pointer; transition: transform .08s, box-shadow .08s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.btn:active { transform: translateY(4px); }
.btn.go {
  min-height: 74px; font-size: 27px; color: #fff; text-shadow: 0 2px 0 rgba(40, 90, 10, .35);
  background: linear-gradient(180deg, #a8de66 0%, var(--leaf-2) 100%); box-shadow: 0 6px 0 var(--leaf-d), 0 14px 24px rgba(40, 80, 10, .28);
}
.btn.go:active { box-shadow: 0 2px 0 var(--leaf-d), 0 6px 12px rgba(40, 80, 10, .25); }
.btn.go small { font-size: 13px; font-weight: 800; opacity: .92; margin-top: 3px; text-shadow: none; }
.btn.buy {
  overflow: hidden; min-height: 74px; font-size: 16px; color: var(--pink-d); background: #fff5f7;
  box-shadow: 0 6px 0 #e7a8ba, 0 14px 24px rgba(120, 40, 60, .2); gap: 4px;
}
.btn.buy:active { box-shadow: 0 2px 0 #e7a8ba; }
.buy-price { display: inline-flex; align-items: center; gap: 4px; font-size: 19px; color: var(--ink); }
.buy-price .ico { width: 22px; height: 22px; }
.buy-fill { position: absolute; left: 0; bottom: 0; height: 7px; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #ffbccd, #f37c9e); transition: width .6s; }
.btn.buy.ready { color: #fff; background: linear-gradient(180deg, #ffb6c9, var(--pink)); box-shadow: 0 6px 0 var(--pink-d), 0 14px 24px rgba(160, 40, 80, .3); animation: glow 1.8s ease-in-out infinite; }
.btn.buy.ready .buy-price { color: #fff; }
.btn.buy.ready .buy-fill { display: none; }
@keyframes glow { 50% { transform: translateY(-2px) scale(1.02); } }
.btn.nope { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* ---------- menu over a pig ---------- */
.pigmenu {
  position: absolute; z-index: 4500; padding: 6px 8px 8px; border-radius: 20px; background: rgba(255, 250, 240, .97);
  box-shadow: 0 5px 0 rgba(150, 100, 45, .3), 0 12px 26px rgba(60, 40, 10, .25); animation: menuIn .22s cubic-bezier(.3, 1.5, .5, 1);
}
.pigmenu::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -9px; margin-left: -10px; border: 10px solid transparent; border-bottom: 0; border-top-color: rgba(255, 250, 240, .97); }
.pigmenu.below::after { bottom: auto; top: -9px; border: 10px solid transparent; border-top: 0; border-bottom-color: rgba(255, 250, 240, .97); }
@keyframes menuIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }
.pighead { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 2px 5px; font-size: 17px; font-weight: 900; color: var(--ink); }
.rename { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f3e4c8; color: var(--wood-d); display: grid; place-items: center; cursor: pointer; }
.rename svg { width: 16px; height: 16px; }
.acts { display: flex; gap: 6px; }
.acts button {
  width: 62px; height: 66px; padding: 0; border: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: linear-gradient(180deg, #fff, #fff1dc); box-shadow: 0 3px 0 #e6c9a0; font-size: 11px; font-weight: 900; color: var(--ink);
}
.acts button:active { transform: translateY(2px); box-shadow: 0 1px 0 #e6c9a0; }
.acts svg { width: 28px; height: 28px; }
.acts small { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 900; color: var(--gold-d); }
.acts small::before { content: ""; width: 12px; height: 12px; background: var(--coin) center / contain no-repeat; }
.acts .need small { color: var(--pink-d); font-size: 9.5px; }
.acts .need small::before { display: none; }

/* ---------- «Позвать»: a tap on the empty meadow ---------- */
.callmenu {
  position: absolute; z-index: 4500; width: 232px; max-height: 240px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px;
  background: rgba(255, 250, 240, .97); box-shadow: 0 5px 0 rgba(150, 100, 45, .3), 0 12px 26px rgba(60, 40, 10, .25); animation: menuIn .2s cubic-bezier(.3, 1.5, .5, 1);
}
.calltitle { text-align: center; font-size: 15px; font-weight: 900; color: var(--ink-2); }
.callnames { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.callnames button {
  min-height: 38px; padding: 4px 6px; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(180deg, #fff, #fff1dc); box-shadow: 0 2px 0 #e6c9a0;
  font-size: 14px; font-weight: 900; color: var(--ink); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.callnames button small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); }
.callnames button:disabled { opacity: .5; }
.callmark { position: absolute; z-index: 4400; width: 26px; height: 12px; margin: -6px 0 0 -13px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse, rgba(255, 255, 255, .95) 0 35%, rgba(255, 255, 255, 0) 70%); animation: eggpulse 1s ease-in-out infinite; }

/* ---------- the name of a pig ---------- */
.sheet.top { align-items: flex-start; padding-top: calc(var(--safe-t) + 90px); }
.name-input { width: 100%; margin: 4px 0 6px; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--line); background: #fff; font: inherit; font-size: 22px; font-weight: 900; color: var(--ink); text-align: center; -webkit-user-select: text; user-select: text; }
.name-input:focus { outline: none; border-color: var(--leaf-2); }

/* ---------- solving ---------- */
.app[data-screen="solve"] .hud, .app[data-screen="solve"] .dock, .app[data-screen="summary"] .dock { display: none; }
.solve {
  position: absolute; inset: 0; z-index: 5000; display: grid; grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(255, 248, 232, .62), rgba(255, 246, 226, .9) 55%);
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
}
.solve-top { display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) 12px 0; }
.progress { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: center; font-weight: 900; font-size: 14px; color: var(--wood-d); }
.bar { height: 12px; border-radius: 99px; overflow: hidden; background: #f0dfc0; box-shadow: inset 0 2px 3px rgba(120, 80, 30, .25); }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a8de66, var(--leaf-2)); transition: width .5s; }
.streak { display: flex; align-items: center; gap: 1px; min-width: 46px; font-weight: 900; font-size: 20px; color: #e0691c; animation: bump .45s; }
.streak svg { width: 26px; height: 26px; }
.solve-mid { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 18px 16px 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.solve-mid > .board { margin-top: auto; }
.solve-mid > :last-child { margin-bottom: auto; }
.solve.steps-on .answer-row { display: none; }
.solve.steps-on .board { padding-bottom: 14px; }
.solve.steps-on .hint { display: none; }
.board {
  position: relative; width: 100%; max-width: 420px; padding: 26px 18px 18px; border-radius: 28px; text-align: center; color: var(--ink);
  background:
    repeating-linear-gradient(177deg, rgba(160, 100, 40, .07) 0 2px, transparent 2px 19px),
    linear-gradient(180deg, #f8e4b6 0%, #ecc887 100%);
  border: 4px solid #b9814a;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(150, 95, 40, .22), 0 9px 0 var(--wood-d), 0 18px 30px rgba(80, 50, 20, .28);
}
.board::before, .board::after { content: ""; position: absolute; width: 38px; height: 38px; top: -16px; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
.board::before { left: -10px; transform: rotate(-24deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 5 4.6-1.7-1.4 5 4.2 2.2-4.6 2.4 1 4.6-4.6-1.8L12 23l-1.8-6.3-4.6 1.8 1-4.6L2 11.5l4.2-2.2-1.4-5 4.6 1.7z' fill='%23f08a24'/%3E%3C/svg%3E"); }
.board::after { right: -8px; transform: rotate(28deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6 7 5 15 12 22c7-7 6-15 0-20z' fill='%23f5c33b'/%3E%3Cpath d='M12 5v16' stroke='%23d99a1a' stroke-width='1.2'/%3E%3C/svg%3E"); }
.board.pop { animation: boardIn .38s cubic-bezier(.25, 1.4, .5, 1); }
@keyframes boardIn { from { transform: translateY(14px) scale(.96); opacity: .3; } }
.board.check { border-color: var(--leaf-2); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 9px 0 var(--leaf-d), 0 18px 30px rgba(40, 80, 10, .25); }
.check-badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 16px; border-radius: 999px;
  background: var(--leaf-2); color: #fff; font-weight: 900; font-size: 15px; box-shadow: 0 3px 0 var(--leaf-d);
}
.hint {
  position: absolute; bottom: 20px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #b9814a;
  background: #fff8e8; color: var(--wood-d); font-weight: 900; font-size: 22px; cursor: pointer; box-shadow: 0 3px 0 #d7a86d;
}
.hint:active { transform: translateY(2px); box-shadow: none; }
.story { margin: 0 6px 10px; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink-2); }
.eq { font-size: clamp(32px, 10.4vw, 48px); font-weight: 900; letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums; color: #4a2c1c; text-shadow: 0 2px 0 rgba(255, 255, 255, .55); }
.answer-row { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 30px; font-weight: 900; color: var(--ink-2); }
.answer {
  min-width: 128px; padding: 4px 16px; border-radius: 16px; background: #fffdf6; border: 3px dashed #c99b62; font-size: 38px; line-height: 1.2;
  color: #2e7d1f; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.answer.empty { color: #d4b386; }
.answer.shake { animation: shake .4s; }
.talk { display: flex; align-items: flex-end; gap: 4px; width: 100%; max-width: 420px; min-height: 92px; }
.helper { flex: none; height: 92px; pointer-events: none; }
.helper-sprite { height: 92px; width: 92px; background-repeat: no-repeat; }
.reward {
  position: absolute; left: 50%; top: 18%; z-index: 5; display: flex; align-items: center; gap: 6px; pointer-events: none; opacity: 0;
  transform: translateX(-50%); font-weight: 900; font-size: 38px; color: var(--gold-d); text-shadow: 0 2px 0 #fff, 0 6px 14px rgba(160, 90, 0, .25);
}
.reward .ico { width: 40px; height: 40px; }
.reward small { font-size: 15px; color: var(--ink-2); text-shadow: none; }
.reward.go { animation: reward 1.15s ease-out; }
@keyframes reward { 0% { opacity: 0; transform: translate(-50%, 18px) scale(.7); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  70% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(.95); } }
.flycoin { position: fixed; width: 26px; height: 26px; margin: -13px 0 0 -13px; z-index: 9999; pointer-events: none; background: var(--coin) center / contain no-repeat;
  animation: fly .85s cubic-bezier(.5, -.4, .75, 1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) scale(.75); opacity: .3; } }
.bubble {
  position: relative; flex: 1; min-width: 0; margin-bottom: 8px; padding: 12px 14px 14px; border-radius: 20px; background: #fff; border: 3px solid #f2c9a0;
  box-shadow: 0 6px 16px rgba(80, 50, 20, .14); font-size: 16px; line-height: 1.4; animation: boardIn .3s;
}
.bubble::before { content: ""; position: absolute; left: -13px; bottom: 22px; border: 10px solid transparent; border-left: 0; border-right: 13px solid #f2c9a0; }
.bubble::after { content: ""; position: absolute; left: -8px; bottom: 25px; border: 7px solid transparent; border-left: 0; border-right: 9px solid #fff; }
.bubble-check { margin: 0 0 6px; font-weight: 800; color: #b0582c; }
.bubble-text { margin: 0 0 10px; color: var(--ink); font-weight: 600; }
.btn.small { display: inline-flex; flex-direction: row; gap: 6px; padding: 11px 22px; min-height: 0; font-size: 18px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 #dcbf92; }
.btn.small.go { color: #fff; background: linear-gradient(180deg, #a8de66, var(--leaf-2)); box-shadow: 0 4px 0 var(--leaf-d); }
.btn.small.warn { color: #fff; background: linear-gradient(180deg, #ffb6c9, var(--pink)); box-shadow: 0 4px 0 var(--pink-d); }
#again { width: 100%; background: linear-gradient(180deg, #ffe08a, #ffc94a); box-shadow: 0 4px 0 #d79c18; color: #6b3d00; }
.steps { width: 100%; max-width: 420px; padding: 12px 12px 14px; border-radius: 22px; background: #fffdf7; box-shadow: 0 6px 18px rgba(80, 50, 20, .15); text-align: left; }
.steps ol { list-style: none; margin: 0 0 10px; padding: 0; counter-reset: s; display: grid; gap: 8px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: start; opacity: 0; animation: stepIn .45s forwards; }
.steps li::before { content: counter(s); grid-row: span 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; background: var(--leaf-2); }
.steps li:nth-child(2)::before { background: #f0a43a; }
.steps li:nth-child(3)::before { background: #59a7d6; }
.steps li:nth-child(4)::before { background: var(--pink); }
.steps b { font-size: 15px; color: var(--ink-2); }
.steps span { font-size: 14px; color: var(--muted); }
.steps code { justify-self: start; margin-top: 2px; padding: 2px 10px; border-radius: 10px; background: #eef8e2; color: #2e5f17; font-family: inherit; font-size: 21px; font-weight: 900; }
#clear { width: 100%; opacity: 0; animation: stepIn .4s forwards; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.solve.steps-on .keypad { display: none; }
.solve.steps-on .solve-mid { padding-bottom: calc(var(--safe-b) + 10px + var(--lift, 0px)); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 12px calc(var(--safe-b) + 12px + var(--lift, 0px)); background: rgba(255, 246, 228, .92); border-top: 2px solid var(--line); }
.keypad button {
  height: clamp(50px, 7.4vh, 64px); border: 0; border-radius: 16px; cursor: pointer; font-size: 30px; font-weight: 900; color: #5a3a26;
  background: linear-gradient(180deg, #fffdf8, var(--cream-2)); box-shadow: 0 4px 0 #dcbf92; display: grid; place-items: center;
}
.keypad button:active { transform: translateY(3px); box-shadow: 0 1px 0 #dcbf92; }
.keypad svg { width: 30px; height: 30px; }
.keypad .ok { color: #fff; background: linear-gradient(180deg, #a8de66, var(--leaf-2)); box-shadow: 0 4px 0 var(--leaf-d); }
.keypad.off button { opacity: .45; pointer-events: none; }

/* ---------- summary ---------- */
.summary { position: absolute; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; background: rgba(60, 40, 20, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sum-card {
  position: relative; width: min(92%, 380px); padding: 36px 22px 22px; border-radius: 30px; background: var(--cream); text-align: center;
  box-shadow: 0 12px 0 #e2c79b, 0 26px 50px rgba(60, 40, 20, .35); animation: boardIn .45s cubic-bezier(.25, 1.4, .5, 1);
}
.ribbon {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%) rotate(-2deg); padding: 9px 28px; border-radius: 12px; white-space: nowrap;
  background: linear-gradient(180deg, #ffe08a, #f4a81d); color: #7a3e00; font-weight: 900; font-size: 22px; box-shadow: 0 4px 0 #c27a00, 0 10px 20px rgba(160, 90, 0, .3);
  animation: bump .6s .3s;
}
.sum-line { margin: 4px 0 8px; font-size: 23px; font-weight: 900; }
.sum-coins { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 56px; font-weight: 900; color: var(--gold-d); font-variant-numeric: tabular-nums; }
.sum-coins .ico { width: 58px; height: 58px; }
.sum-first { margin: 6px 0; font-size: 18px; color: var(--ink-2); }
.sum-note { margin: 6px 0; font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.sum-time { margin: 4px 0; font-size: 14px; color: var(--muted); }
.sum-card .btn.go { width: 100%; margin-top: 14px; min-height: 64px; font-size: 24px; }

/* ---------- sheets ---------- */
.sheet { position: absolute; inset: 0; z-index: 7000; display: flex; align-items: flex-end; justify-content: center; background: rgba(40, 25, 10, .35); }
.sheet-card { width: 100%; padding: 20px 18px calc(var(--safe-b) + 20px + var(--lift, 0px)); border-radius: 26px 26px 0 0; background: var(--cream); animation: sheetUp .28s ease-out;
  max-height: calc(var(--app-h, 100dvh) - var(--safe-t) - 10px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }   /* a small phone scrolls a tall sheet */
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } }
.sheet-card h2 { margin: 0 0 12px; font-size: 22px; }
.sheet-card h3 { margin: 16px 0 8px; font-size: 16px; color: var(--ink-2); }
.sheet-card p { margin: 6px 0 12px; font-size: 16px; color: var(--ink-2); }
.sheet-card .btn.small { width: 100%; margin-top: 8px; }
.switch { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; }
.switch input { width: 26px; height: 26px; accent-color: var(--leaf-2); }
.levels { display: grid; gap: 8px; }
.level { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border-radius: 16px; border: 3px solid var(--line); background: #fff; cursor: pointer; text-align: left; }
.level b { font-size: 18px; font-weight: 900; }
.level small { font-size: 14px; font-weight: 700; color: var(--muted); }
.level.on { border-color: var(--leaf-2); background: #eef8e2; }
.level:disabled { opacity: .55; }
.muted { color: var(--muted); font-size: 14px !important; }
.row { display: flex; gap: 10px; }
.row .btn.small { flex: 1; }

.toast {
  position: absolute; left: 50%; bottom: calc(var(--safe-b) + 108px + var(--lift, 0px)); z-index: 9000; max-width: 88%; padding: 10px 16px; border-radius: 14px;
  background: rgba(60, 40, 25, .92); color: #fff; font-weight: 800; font-size: 15px; text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 16px); transition: all .25s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
/* for the grown-up: the server runs older code than this page (see code_is_newer in web.py) */
.stale {
  position: absolute; left: 12px; right: 12px; top: calc(var(--safe-t) + 66px); z-index: 9600; margin: 0; padding: 9px 12px; border-radius: 14px;
  background: #fff3c4; border: 2px solid #e2a400; color: #5b3a00; font-size: 14px; font-weight: 800; line-height: 1.3; text-align: center; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx, .btn.buy.ready, .heart { animation: none !important; }
  .fx { display: none; }
}
@media (min-width: 481px) { .app { border-radius: 0; } }

/* ---------- results and the pig's question ---------- */
.res { width: 100%; border-collapse: collapse; }
.res th { padding: 4px 6px; font-size: 12px; font-weight: 800; color: var(--muted); text-align: right; }
.res td { padding: 9px 6px; border-top: 2px solid var(--line); font-size: 18px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.res th:first-child, .res td:first-child { text-align: left; }
.res td small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); }
.res tr.now td { background: #eef8e2; }
.res tr.now td:first-child { border-radius: 10px 0 0 10px; }
.res tr.now td:last-child { border-radius: 0 10px 10px 0; }
.res-total { font-weight: 800; }
.res-hint { font-size: 14px !important; line-height: 1.4; }
.sheet.center { align-items: center; }
.sheet-card.ask { width: min(92%, 380px); border-radius: 26px; text-align: center; padding: 14px 18px 18px; animation: boardIn .35s cubic-bezier(.25, 1.4, .5, 1); }
.ask-pig { width: 96px; height: 96px; margin: 0 auto 2px; background-repeat: no-repeat; }
.sheet-card .ask-text { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.sheet-card.ask .btn.small { font-size: 16px; padding: 12px 8px; white-space: nowrap; }

/* ---------- decorations drawn by Astra (static/art/ui) ---------- */
.fx-leaf.fx-v0 { background-image: url("/static/art/ui/leaf-1.webp"); }
.fx-leaf.fx-v1 { background-image: url("/static/art/ui/leaf-2.webp"); }
.fx-leaf.fx-v2 { background-image: url("/static/art/ui/leaf-4.webp"); }
.fx-leaf.fx-v3 { background-image: url("/static/art/ui/leaf-3.webp"); }
.fx-leaf { width: calc(24px * var(--s, 1)); height: calc(24px * var(--s, 1)); }
.fx-snow.fx-v0, .fx-snow.fx-v2 { border-radius: 0; background: url("/static/art/ui/snow-1.webp") center / contain no-repeat; width: calc(16px * var(--s, 1)); height: calc(16px * var(--s, 1)); }
.fx-petal { background-image: url("/static/art/ui/blossom-1.webp"); }
.fx-petal.fx-v1, .fx-petal.fx-v3 { background-image: url("/static/art/ui/blossom-2.webp"); }
.board::before { width: 46px; height: 46px; top: -20px; left: -12px; background-image: url("/static/art/ui/leaf-1.webp"); }
.board::after { width: 42px; height: 42px; top: -18px; right: -10px; background-image: url("/static/art/ui/leaf-2.webp"); }
.rosette { position: absolute; top: -58px; right: -8px; width: 104px; transform: rotate(10deg); pointer-events: none; animation: bump .6s .4s; }
.reward::before, .reward::after { content: ""; position: absolute; width: 26px; height: 26px; background: url("/static/art/ui/star.webp") center / contain no-repeat; }
.reward::before { left: -30px; top: -10px; transform: rotate(-14deg); }
.reward::after { right: -28px; top: 14px; width: 20px; height: 20px; background-image: url("/static/art/ui/sparkle.webp"); }
.heart { width: 24px; height: 22px; margin-left: -12px; background: url("/static/art/ui/heart.webp") center / contain no-repeat; }
.summary.party .sum-card::before, .summary.party .sum-card::after { content: ""; position: absolute; top: -70px; width: 120px; height: 120px; pointer-events: none;
  background: url("/static/art/ui/confetti.webp") center / contain no-repeat; animation: confetti 1.6s ease-out both; }
.summary.party .sum-card::before { left: -14px; }
.summary.party .sum-card::after { right: -14px; background-image: url("/static/art/ui/ribbon-bit.webp"); animation-delay: .15s; }
@keyframes confetti { 0% { opacity: 0; transform: translateY(-30px) rotate(-20deg) scale(.6); } 30% { opacity: 1; } 100% { opacity: .95; transform: translateY(26px) rotate(14deg) scale(1); } }

/* ---------- fingers on the farm: every move of a finger reaches the game (stroking a pig) ---------- */
.app .scene, .app .scene * { touch-action: none; }

/* ---------- time of year in the settings ---------- */
.themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.theme { position: relative; height: 74px; padding: 0; border-radius: 14px; border: 3px solid var(--line); background: #cfe3b0 22% 20% / 300% no-repeat; cursor: pointer; overflow: hidden; }   /* the mill and the trees: where the seasons differ most */
.theme span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; background: rgba(255, 250, 240, .9); font-size: 13px; font-weight: 900; color: var(--ink); }
.theme.on { border-color: var(--leaf-2); box-shadow: 0 0 0 3px #d5efb9; }

/* ---------- little surprises: 52 and 67 ---------- */
.egg { display: inline-block; color: #e2462f; text-shadow: 0 2px 0 #fff, 0 0 14px rgba(255, 205, 60, .95); animation: eggpulse 1.1s ease-in-out infinite; }
.egg.gold { color: #d98a00; }
@keyframes eggpulse { 50% { transform: scale(1.18) rotate(-3deg); } }
.sixseven {
  position: absolute; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 230, 120, .55), rgba(255, 230, 120, 0) 62%); animation: sixfade 2.1s ease-out forwards;
}
.sixseven b {
  font-size: clamp(64px, 23vw, 112px); line-height: .95; font-weight: 900; letter-spacing: .02em; color: #ff3d6e;
  -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 6px 0 #b3123f, 0 0 28px rgba(255, 220, 60, .95), 0 14px 30px rgba(120, 20, 60, .35);
  animation: sixpop .7s cubic-bezier(.2, 1.7, .4, 1) both;
}
.sixseven b + b { color: #ffb400; text-shadow: 0 6px 0 #b96a00, 0 0 28px rgba(255, 90, 140, .9), 0 14px 30px rgba(120, 70, 0, .35); animation-delay: .22s; }
/* 52 — «ПИСЯТДВА»: one word in one line, two colours without a gap; app.js fits the size to the width */
.sixseven.word { flex-direction: row; font-size: clamp(40px, 14.5vw, 70px); }
.sixseven.word b { font-size: 1em; letter-spacing: 0; white-space: nowrap; transform: scaleY(1.3); animation-name: wordpop; }   /* taller letters: the word is as loud as the two lines of SIX SEVEN */
@keyframes wordpop { 0% { opacity: 0; transform: scale(.2, .26) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.1, 1.45) rotate(4deg); } 100% { opacity: 1; transform: scale(1, 1.3) rotate(-2deg); } }
@keyframes sixpop { 0% { opacity: 0; transform: scale(.2) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.14) rotate(4deg); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); } }
@keyframes sixfade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .egg, .sixseven b { animation: none; } }
.res th, .res td { padding-right: 10px; }

/* ---------- the door: a new farm or coming back (welcome.html, decisions D57) ---------- */
html.door-page.autumn { --farm-bg: url("/static/art/farms/hills-autumn.webp"); }
html.door-page.winter { --farm-bg: url("/static/art/farms/hills-winter.webp"); }
html.door-page.spring { --farm-bg: url("/static/art/farms/hills-spring.webp"); }
html.door-page.summer { --farm-bg: url("/static/art/farms/hills-summer.webp"); }
.door {
  display: flex; flex-direction: column; align-items: center;
  background: #a9d062 var(--farm-bg) center bottom / cover no-repeat;
}
.door-title {
  position: relative; z-index: 2; width: min(94%, 380px); margin-top: calc(var(--safe-t) + 22px); padding: 30px 20px 46px; text-align: center;
  background: url("/static/art/ui/board.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 10px 14px rgba(70, 40, 10, .28));
  animation: boardIn .6s cubic-bezier(.25, 1.4, .5, 1) both;
}
.door-title h1 { margin: 0; font-size: 34px; line-height: 1.02; font-weight: 900; color: var(--ink); letter-spacing: .01em; text-shadow: 0 2px 0 rgba(255, 245, 220, .7); }
.door-title p { margin: 8px 0 0; font-size: clamp(12.5px, 3.7vw, 15px); font-weight: 800; color: var(--ink-2); white-space: nowrap; }   /* stays on the plank: it covers 15–80 % of the picture's height */
.door-pig {
  --h: min(30vh, 210px); position: relative; flex: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.door-shadow {
  position: absolute; left: 50%; bottom: 8%; width: calc(var(--h) * .62); height: calc(var(--h) * .13); margin-left: calc(var(--h) * -.31);
  border-radius: 50%; background: radial-gradient(ellipse at center, rgba(50, 60, 10, .42), rgba(50, 60, 10, 0) 70%);
}
.door-spr {
  position: absolute; left: 50%; bottom: calc(8% + var(--h) * .02); height: var(--h); width: calc(var(--h) * 252 / 256);
  transform: translateX(-50%); background: url("/static/art/pigs/idle.webp") 0 0 / 400% 100% no-repeat;
  animation: door-idle .67s steps(4) infinite;
}
.door-spr.scarf { background-image: url("/static/art/pigs/idle_scarf.webp"); }
/* happy: 6 frames; its pig is drawn smaller in the frame (room for the jump), so the frame is 1.16 times taller */
.door-spr.happy {
  height: calc(var(--h) * 1.164); width: calc(var(--h) * 1.164 * 239 / 256);
  background-image: url("/static/art/pigs/happy.webp"); background-size: 600% 100%; animation: door-happy .5s steps(6) 1 backwards;
}
.door-spr.scarf.happy { background-image: url("/static/art/pigs/happy_scarf.webp"); }
@keyframes door-idle { to { background-position: 133.333% 0; } }
@keyframes door-happy { to { background-position: 120% 0; } }
.door-actions {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; width: 100%;
  padding: 0 16px calc(var(--safe-b) + 18px);
}
.door-actions .btn.go { width: 100%; }
.door-actions .btn.small { width: 100%; justify-content: center; padding: 15px 18px; font-size: 18px; }
.door-note {
  margin: 0; align-self: center; padding: 7px 14px; border-radius: 999px; background: rgba(255, 250, 240, .9);
  color: var(--ink-2); font-size: 13.5px; font-weight: 800; text-align: center; box-shadow: 0 3px 0 rgba(150, 100, 45, .2);
}
.door-sheet { padding: calc(var(--safe-t) + 18px) 12px 0; }
.door-form { width: 100%; max-width: 420px; border-radius: 26px; padding: 18px 18px 16px; animation: boardIn .35s cubic-bezier(.25, 1.4, .5, 1); }
.door-form h2 { margin: 0 0 6px; font-size: 24px; }
.door-form label { display: block; margin: 12px 0 2px; font-size: 17px; font-weight: 900; color: var(--ink); }
.door-form .name-input { margin: 4px 0 4px; font-size: 20px; }
.door-hint { display: block; color: var(--muted); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.door-error { min-height: 1.3em; margin: 10px 0 2px !important; color: #c0392b !important; font-size: 15px !important; font-weight: 800; line-height: 1.3; }
.door-error:empty { min-height: 0; margin: 4px 0 0 !important; }
.door-form .row { margin: 6px 0 10px; }
.door-form .row .btn.small { margin-top: 0; padding: 13px 10px; }
.pass { position: relative; }
.pass .name-input { padding-right: 58px; }
.eye {
  position: absolute; right: 6px; top: 50%; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: var(--muted); cursor: pointer;
}
.eye svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .door-spr, .door-title { animation: none; } }
@media (max-height: 640px) { .door-title { margin-top: calc(var(--safe-t) + 10px); padding: 22px 18px 34px; } .door-title h1 { font-size: 28px; } }

/* ---------- the account in the settings, the best of all players in the results ---------- */
.acc-line { margin: 2px 0 8px !important; }
.acc-line b { color: var(--ink); }
.acc .row .btn.small { margin-top: 0; }
.door-form { text-align: left; }
.res-all { margin: 4px 0 6px; padding: 10px 12px 6px; border-radius: 16px; background: #fff6df; box-shadow: inset 0 0 0 2px var(--line); }
.res-all-title { margin: 0 0 4px !important; font-size: 14px !important; font-weight: 900; color: var(--ink-2) !important; text-transform: none; }
.res.res-small td, .res.res-small th { padding: 4px 6px; font-size: 15px; }