/* Archer's Farm: title mode buttons, and the race button. Loaded after style.css and kart.css. */

/* ---------------------------------------------------------- title modes */
.title-modes { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.mode-btn {
  display: flex; align-items: center; gap: 10px; padding: 12px 24px 12px 16px; min-height: 64px; border-radius: 99px;
  font-size: var(--text-m); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.mode-btn svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.mode-btn.m-kart { background: linear-gradient(#ff8a5c, #ff4f4f); box-shadow: 0 6px 0 #b8312f, 0 10px 16px rgba(0,0,0,.18); }
.mode-btn.m-people { background: linear-gradient(#b58cff, #7d4fe0); box-shadow: 0 6px 0 #4f2d9e, 0 10px 16px rgba(0,0,0,.18); }
.mode-btn img { width: 44px; height: 44px; margin: -6px 0; }
/* grown-ups: the unlock-everything code */
.p-code input { width: 7em; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--edge); font: inherit; font-size: 20px; text-align: center; background: #fff; }
.p-code input.bad { border-color: #e0483f; animation: wiggle .5s; }
.mode-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }

/* ---------------------------------------------------------- race button (farm HUD) */
.hud-br { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shop-btn.kart-btn { width: calc(var(--btn) * .95); height: calc(var(--btn) * .95); font-size: 15px; background: radial-gradient(circle at 40% 30%, #ff9a6a, #ff5a3a); box-shadow: 0 6px 0 #b8312f, 0 10px 16px rgba(0,0,0,.2); }
.shop-btn.kart-btn:active { box-shadow: 0 2px 0 #b8312f; }