/* Меню «Битвы Фермеров» в мультяшном стиле: счётчики-пузыри, табличка на верёвках, сочная кнопка «Играть»,
   круглые кнопки с подписями. Базовый размер 390 x 700 внутри #menuIn. */
.m3 { --ink: #3a1d0a; --cream: #fff8e7; --cream2: #ffeec6; --wood-a: #f0b46a; --wood-b: #d38a3e; --wood-c: #a8612a;
  position: absolute; inset: 0; font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 800; color: var(--ink); }
.m3-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m3-hero { position: absolute; left: 0; top: 178px; width: 390px; height: 330px; touch-action: manipulation; }

/* счётчики-пузыри: кремовая подушка, иконка выступает слева */
.m3-top { position: absolute; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between; pointer-events: none; }
.m3-stat { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px 0 34px; margin-left: 16px; border-radius: 20px;
  background: linear-gradient(var(--cream), var(--cream2)); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 8px 14px rgba(40, 20, 0, .3); }
.m3-ico { position: absolute; left: -20px; top: -9px; width: 50px; height: 50px; filter: drop-shadow(0 3px 0 rgba(58, 29, 10, .35)); animation: m3bob 2.6s ease-in-out infinite; }
.m3-stat:nth-child(2) .m3-ico { animation-delay: -1.3s; }
.m3-val { display: flex; align-items: baseline; gap: 5px; }
.m3-val b { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.m3-val small { font-size: 12px; font-weight: 700; color: #8a5a2a; }

/* табличка на верёвках, слегка качается */
.m3-plate { position: absolute; left: 50%; top: 66px; width: 326px; margin-left: -163px; padding: 12px 0 10px; border-radius: 22px; line-height: 0;
  background: linear-gradient(var(--wood-a), var(--wood-b) 55%, var(--wood-c)); border: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .18), 0 6px 0 var(--ink), 0 14px 20px rgba(40, 20, 0, .35);
  transform-origin: 50% -15px; animation: m3swing 4s ease-in-out infinite; }
.m3-plate::before { content: ""; position: absolute; inset: 0; border-radius: 19px; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(90, 40, 0, .35) 25px 27px), radial-gradient(ellipse at 30% 30%, rgba(255, 255, 255, .18), transparent 60%); }
.m3-plate::after { content: ""; position: absolute; left: 34px; right: 34px; top: -15px; height: 15px; pointer-events: none;
  border-left: 4px solid #8a5a2a; border-right: 4px solid #8a5a2a; }
.m3-plate i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c0, #b88a2a 70%); border: 2px solid var(--ink); }
.m3-plate i:nth-child(1) { left: 26px; top: 8px; } .m3-plate i:nth-child(2) { right: 26px; top: 8px; }
.m3-plate i:nth-child(3), .m3-plate i:nth-child(4) { display: none; }
#m3-title { position: relative; }

/* низ: плашка гостя, «Играть», круглые кнопки */
.m3-menu { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m3-guest { display: none; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 12px; background: var(--cream); border: 2px solid var(--ink); color: #8a5a2a; font-size: 12px; font-weight: 700; }
.m3-guest.show { display: flex; }
.m3-play { position: relative; width: 286px; height: 84px; border-radius: 30px; border: 4px solid var(--ink); padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 0;
  background: linear-gradient(#ffd84a, #ffa21a 50%, #ff7a0a); box-shadow: inset 0 -7px 0 rgba(160, 50, 0, .45), 0 8px 0 var(--ink), 0 18px 22px rgba(60, 20, 0, .4);
  transition: transform .07s, box-shadow .07s; animation: m3wobble 2.2s ease-in-out infinite; }
.m3-play::before { content: ""; position: absolute; left: 16px; right: 16px; top: 7px; height: 30%; border-radius: 20px; background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .15)); pointer-events: none; }
.m3-play:active { transform: translateY(7px) scale(.98); box-shadow: inset 0 -7px 0 rgba(160, 50, 0, .45), 0 1px 0 var(--ink), 0 6px 10px rgba(60, 20, 0, .4); animation: none; }
.m3-play > * { position: relative; pointer-events: none; }
.m3-row { display: flex; gap: 8px; margin-top: 6px; }
.m3-rb { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; }
.m3-rb b { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 4px 0 rgba(255, 255, 255, .45), 0 5px 0 var(--ink); transition: transform .07s, box-shadow .07s; }
.m3-rb span, .m3-rb > :not(b) { pointer-events: none; }
.m3-rb { text-shadow: 0 0 3px var(--cream), 0 0 6px var(--cream); }
.m3-rb:active b { transform: translateY(4px); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 4px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--ink); }
.m3-rb * { pointer-events: none; }
.m3-g b { background: radial-gradient(circle at 35% 25%, #a8f58a, #3fae2a 70%); }
.m3-h b { background: radial-gradient(circle at 35% 25%, #ffc2e3, #e0559e 70%); }
.m3-b b { background: radial-gradient(circle at 35% 25%, #a8e0ff, #2f8fe8 70%); }
.m3-s b { background: radial-gradient(circle at 35% 25%, #fff0a0, #f2b81a 70%); }
.m3-gar b { background: radial-gradient(circle at 35% 25%, #ffc38a, #f2711a 70%); }
.m3-shop { pointer-events: auto; cursor: pointer; padding-right: 8px; }
.m3-shop:active { transform: translateY(3px); }
.m3-plus { width: 24px; height: 24px; margin-left: 6px; border-radius: 8px; border: 2px solid var(--ink); position: relative; background: linear-gradient(#b8ff6a, #3fae2a); box-shadow: 0 2px 0 var(--ink); }
.m3-plus::before, .m3-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 1px; }
.m3-plus::before { width: 12px; height: 4px; margin: -2px 0 0 -6px; } .m3-plus::after { width: 4px; height: 12px; margin: -6px 0 0 -2px; }
.m3-p b { background: radial-gradient(circle at 35% 25%, #e2e6ec, #8a94a3 70%); }
@keyframes m3wobble { 0%, 100% { transform: rotate(0) scale(1); } 45% { transform: rotate(0) scale(1); } 52% { transform: rotate(-1.5deg) scale(1.03); } 60% { transform: rotate(1.5deg) scale(1.03); } 68% { transform: rotate(0) scale(1); } }
@keyframes m3swing { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes m3bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .m3-play, .m3-plate, .m3-ico { animation: none; } }

.m3-dot { display: none; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, #e8433a 70%); border: 3px solid var(--ink); }
.m3-dot.show { display: block; animation: m3bob 1.2s ease-in-out infinite; }