/* ฟาร์มหมู vs ฟาร์มแกะ — menu skin: the title / entry screen (ui.js mainMenu, overlay.fm-title), the profile card, and a
   shared polish pass for every other DOM menu (rows, icon discs, wallet chips, tile buttons, inputs) so the whole UI reads
   as one set. Visual only: no menu logic depends on this file.
   Loaded after the inline <style> of index.html. All title sizes are design px of a 960x540 screen times --u, so desktop,
   tablets, phone landscape and the auto-rotated portrait phone (html.fm-rot, --vw/--vh = rotated viewport) show the same
   layout; max(px, …) keeps text and touch targets readable on small phones. */
.overlay.fm-title {
  --u: min(calc(var(--vw, 1vw) * 100 / 960), calc(var(--vh, 1vh) * 100 / 540));
  --tdark: #5a3418; --tmid: #9a6a40;
  display: block; padding: 0; overflow: hidden;
  background: #8fd0f4 url(../../art/farm/title_bg_hd.webp) center 40% / cover no-repeat;
}
/* soft vignette so the cards read on the painted scene */
.overlay.fm-title::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, #0000 58%, #2a180a59 100%), linear-gradient(#ffffff1f, #0000 18%, #0000 72%, #2a180a47); }
.overlay.fm-title > .ov-card, body.hd-ui .overlay.fm-title > .ov-card {
  position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 10);
  width: 100%; height: 100%; max-width: none !important; max-height: none; margin: 0; border-radius: 0;
  border: 0 !important; border-image: none !important; background: transparent !important; box-shadow: none;
  padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 14); text-align: left; color: var(--tdark);
  overflow: hidden auto; image-rendering: auto;
}
.overlay.fm-title .ov-card button { font-family: inherit; image-rendering: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- top bar: profile card · side switch · wallet · sound · settings ---------- */
.fm-ttop { display: flex; align-items: center; gap: calc(var(--u) * 10); flex: 0 0 auto; min-width: 0; }
.fm-tsp { flex: 1 1 0; min-width: 0; }
.overlay.fm-title .ov-card button.fm-prof {
  display: flex; align-items: center; gap: calc(var(--u) * 8); flex: 0 1 auto; min-width: 0; max-width: calc(var(--u) * 280); margin: 0;
  min-height: max(44px, calc(var(--u) * 58)); padding: calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 3) calc(var(--u) * 3);
  border: max(2px, calc(var(--u) * 3)) solid #fff; border-image: none; border-radius: 999px;
  background: linear-gradient(#fffaf0, #ffe6bd); box-shadow: 0 calc(var(--u) * 4) 0 #c08848, 0 calc(var(--u) * 7) calc(var(--u) * 12) #0004;
  color: var(--tdark); text-shadow: none;
}
.overlay.fm-title .ov-card button.fm-prof:active { transform: translateY(2px); box-shadow: 0 1px 0 #c08848; }
.overlay.fm-title .fm-prof .fm-av { position: relative; flex: 0 0 auto; width: max(38px, calc(var(--u) * 50)); height: max(38px, calc(var(--u) * 50)); font-size: 0 !important; }
.overlay.fm-title .fm-prof .fm-avimg { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #0003); }
.overlay.fm-title .fm-prof .fm-av i { position: absolute; right: -1px; bottom: -3px; min-width: max(18px, calc(var(--u) * 22)); padding: 0 4px; border-radius: 999px;
  font: 700 max(10px, calc(var(--u) * 12))/1.5 Kanit, Prompt, Tahoma, sans-serif; font-style: normal; color: #fff; text-align: center;
  background: linear-gradient(#ffcf4a, #f09a1a); border: 2px solid #fff; box-shadow: 0 1px 2px #0004; text-shadow: 0 1px 0 #a05a00; }
.overlay.fm-title .fm-prof .fm-pn { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; color: var(--tdark) !important; text-shadow: none !important; font-size: inherit !important; }
.overlay.fm-title .fm-prof .fm-pn b { display: block; font-size: max(13px, calc(var(--u) * 19)); color: var(--tdark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay.fm-title .fm-prof .fm-pn small { font-size: max(10.5px, calc(var(--u) * 13)); color: var(--tmid) !important; text-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* lead review 2026-10-27: a long name / farm name (ui.js mainMenu) gets a smaller font and the ✎ icon makes room — the whole pill
   still opens the profile, and ⚙️ stays on screen */
.overlay.fm-title .fm-prof .fm-pn b.fm-nl { font-size: max(12px, calc(var(--u) * 15)); }
.overlay.fm-title .fm-prof .fm-pn b.fm-nxl { font-size: max(11px, calc(var(--u) * 12.5)); line-height: 1.1; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }   /* (13+ letters: up to two lines) */
.overlay.fm-title .fm-prof .fm-pn small.fm-nl { font-size: max(10px, calc(var(--u) * 11)); }
.overlay.fm-title .fm-prof.fm-plong .fm-pedit { display: none; }
.overlay.fm-title .fm-prof .fm-pedit { flex: 0 0 auto; width: max(16px, calc(var(--u) * 24)); height: auto; opacity: .9; }

/* side switch 🐷 | 🐑 (side.js markup) as one segmented pill */
.overlay.fm-title .fm-sides { display: flex; flex: 0 0 auto; gap: 0; margin: 0; padding: max(2px, calc(var(--u) * 4)); border-radius: 999px;
  background: #fff8e8d9; border: max(2px, calc(var(--u) * 3)) solid #fff; box-shadow: 0 calc(var(--u) * 4) 0 #c08848, 0 calc(var(--u) * 7) calc(var(--u) * 12) #0004; }
.overlay.fm-title .ov-card .fm-sides button { min-height: max(40px, calc(var(--u) * 48)); margin: 0; padding: 0 max(8px, calc(var(--u) * 12)); border: 0; border-image: none; border-radius: 999px;
  background: transparent; outline: 0; box-shadow: none; color: var(--tmid); text-shadow: none; font-size: max(13px, calc(var(--u) * 16)); font-weight: 600; white-space: nowrap; }
.overlay.fm-title .ov-card .fm-sides button .gi { height: 1.5em; vertical-align: -.42em; }
.overlay.fm-title .ov-card .fm-sides button.on { color: #fff; text-shadow: 0 1px 0 #a03060, 1px 0 0 #a03060, -1px 0 0 #a03060, 0 -1px 0 #a03060;
  background: linear-gradient(#ffa6c8, #ec6a98 55%, #d8507e); box-shadow: inset 0 -3px 0 #c0446e, inset 0 2px 0 #ffd0e2; }
.overlay.fm-title .ov-card .fm-sides button[data-side="1"].on { text-shadow: 0 1px 0 #1d5d96, 1px 0 0 #1d5d96, -1px 0 0 #1d5d96, 0 -1px 0 #1d5d96;
  background: linear-gradient(#9ad8ff, #4aa6ec 55%, #2f88d0); box-shadow: inset 0 -3px 0 #2a72b4, inset 0 2px 0 #cdeeff; }

/* wallet chips */
.overlay.fm-title .fm-wallet { flex: 0 0 auto; flex-wrap: nowrap; gap: calc(var(--u) * 8); margin: 0; font-size: max(13px, calc(var(--u) * 17)); min-width: 0; }
.overlay.fm-title .fm-wallet span { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 4);
  min-height: max(40px, calc(var(--u) * 44)); border: max(2px, calc(var(--u) * 3)) solid #fff !important; border-radius: 999px; font-weight: 700; color: var(--tdark);
  background: linear-gradient(#fffdf4, #ffeccb); box-shadow: 0 calc(var(--u) * 3) 0 #c08848, 0 calc(var(--u) * 6) calc(var(--u) * 10) #0003; }
.overlay.fm-title .fm-wallet .gi { height: 1.7em; margin: -.3em .12em -.3em 0; vertical-align: middle; filter: drop-shadow(0 1px 1px #0003); }
.overlay.fm-title .ov-card .fm-wallet button.fm-topup, .overlay.fm-title .ov-card .fm-wallet button { min-height: max(40px, calc(var(--u) * 44)); }   /* the 💎 top-up button (payui.js) sits in the wallet */

/* round icon buttons (sound, settings) */
.overlay.fm-title .ov-card button.fm-ibtn { flex: 0 0 auto; display: grid; place-items: center; margin: 0; padding: 0;
  width: max(44px, calc(var(--u) * 56)); height: max(44px, calc(var(--u) * 56)); min-height: 0; border: max(2px, calc(var(--u) * 3)) solid #fff; border-image: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fffdf6, #ffe2b0); box-shadow: 0 calc(var(--u) * 4) 0 #c08848, 0 calc(var(--u) * 7) calc(var(--u) * 12) #0004; }
.overlay.fm-title .ov-card button.fm-ibtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c08848; }
.overlay.fm-title .fm-ibtn .fm-iic { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 2px 1px #0003); }

/* ---------- body: logo + big buttons (left) · mode tiles (right) ---------- */
.fm-tbody { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: calc(var(--u) * 18); align-items: center; }
.fm-tleft { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 10); min-width: 0; }
.overlay.fm-title .fm-logo { display: block; width: min(100%, calc(var(--u) * 410)); max-height: calc(var(--u) * 140); height: auto; object-fit: contain; margin: 0 auto calc(var(--u) * 4);
  image-rendering: auto; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 6) #2a180a66); animation: fmTBob 4.5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes fmTBob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(calc(var(--u) * -5)) rotate(.6deg); } }

/* shared look of the big left buttons */
.overlay.fm-title .ov-card button.fm-go, .overlay.fm-title .ov-card button.fm-feat {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 10); width: min(100%, calc(var(--u) * 380)); margin: 0;
  border: max(2px, calc(var(--u) * 4)) solid #fff; border-image: none; border-radius: 999px; text-align: left; color: #fff; isolation: isolate; }
.overlay.fm-title .ov-card button.fm-go > span, .overlay.fm-title .ov-card button.fm-feat > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto;
  color: #fff !important; font-size: inherit !important; text-shadow: none !important; line-height: 1.15; }
.overlay.fm-title .ov-card button.fm-go b, .overlay.fm-title .ov-card button.fm-feat b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay.fm-title .ov-card button.fm-go small, .overlay.fm-title .ov-card button.fm-feat small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none !important; }
.overlay.fm-title .ov-card button.fm-go small .gi, .overlay.fm-title .ov-card button.fm-feat small .gi { height: 1.35em; }
/* glossy top highlight */
.overlay.fm-title .ov-card button.fm-go::before, .overlay.fm-title .ov-card button.fm-feat::before { content: ''; position: absolute; z-index: -1; left: 6%; right: 6%; top: 5%; height: 42%;
  border-radius: 999px; background: linear-gradient(#ffffff70, #ffffff10); pointer-events: none; }

/* ▶ เข้าฟาร์ม — the primary button: green, glowing, a light sweep runs across it */
.overlay.fm-title .ov-card button.fm-go { min-height: max(56px, calc(var(--u) * 88)); padding: calc(var(--u) * 6) calc(var(--u) * 22) calc(var(--u) * 6) calc(var(--u) * 10);
  background: linear-gradient(#b4f46a, #5ccb34 52%, #3ea824); box-shadow: 0 0 0 max(2px, calc(var(--u) * 3)) #2f7a1c, 0 calc(var(--u) * 7) 0 calc(var(--u) * 2) #2a6a18, 0 calc(var(--u) * 12) calc(var(--u) * 20) #0005; }
.overlay.fm-title .ov-card button.fm-go::after { content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 22%; left: 0; transform: translateX(-200%) skewX(-20deg);
  background: linear-gradient(90deg, #fff0, #fff8, #fff0); animation: fmTSweep 3.6s ease-in-out infinite; pointer-events: none; will-change: transform; }
/* the glow pulses on its own layer (opacity only, no repaint of the button) */
.overlay.fm-title .fm-gow { position: relative; display: flex; justify-content: center; width: min(100%, calc(var(--u) * 380)); }
.overlay.fm-title .fm-gow > button.fm-go { width: 100%; }
.overlay.fm-title .fm-gow::before { content: ''; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 calc(var(--u) * 26) calc(var(--u) * 8) #fff27a; opacity: 0; animation: fmTGlow 2.6s ease-in-out infinite; will-change: opacity; }
.overlay.fm-title .ov-card button.fm-go .fm-goic { flex: 0 0 auto; height: max(44px, calc(var(--u) * 70)); width: auto; margin: calc(var(--u) * -6) 0; vertical-align: 0; filter: drop-shadow(0 3px 2px #0004); }
.overlay.fm-title .ov-card button.fm-go b { font-size: max(22px, calc(var(--u) * 36)); font-weight: 800; letter-spacing: .5px;
  text-shadow: 0 2px 0 #2a6a18, 1px 1px 0 #2a6a18, -1px 1px 0 #2a6a18, 1px -1px 0 #2a6a18, -1px -1px 0 #2a6a18, 0 3px 4px #1a4a0c88; }
.overlay.fm-title .ov-card button.fm-go small { font-size: max(11px, calc(var(--u) * 14)); color: #f4ffe6 !important; text-shadow: 0 1px 0 #2a6a18 !important; }
.overlay.fm-title .ov-card button.fm-go:hover { filter: brightness(1.06); }
.overlay.fm-title .ov-card button.fm-go:active { transform: translateY(3px); }
@keyframes fmTGlow { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
@keyframes fmTSweep { 0%, 55% { transform: translateX(-200%) skewX(-20deg); } 100% { transform: translateX(620%) skewX(-20deg); } }

/* ⚔️ ศึกขโมยสัตว์ (pink) and ▶ ด่านต่อไป (orange) */
.overlay.fm-title .ov-card button.fm-feat { min-height: max(44px, calc(var(--u) * 62)); padding: calc(var(--u) * 4) calc(var(--u) * 20) calc(var(--u) * 4) calc(var(--u) * 10); }
.overlay.fm-title .ov-card button.fm-feat .fm-tic { flex: 0 0 auto; height: max(30px, calc(var(--u) * 48)); width: auto; margin: calc(var(--u) * -4) 0; vertical-align: 0; filter: drop-shadow(0 2px 2px #0004); }
.overlay.fm-title .ov-card button.fm-feat b { font-size: max(15px, calc(var(--u) * 22)); font-weight: 700; }
.overlay.fm-title .ov-card button.fm-feat small { font-size: max(10.5px, calc(var(--u) * 13)); }
.overlay.fm-title .ov-card button.fm-steal { background: linear-gradient(#ffa0c4, #ee5f93 55%, #d24479); box-shadow: 0 0 0 max(2px, calc(var(--u) * 3)) #a8305e, 0 calc(var(--u) * 6) 0 calc(var(--u) * 1) #922a52, 0 calc(var(--u) * 10) calc(var(--u) * 16) #0004; }
.overlay.fm-title .ov-card button.fm-steal b { text-shadow: 0 2px 0 #922a52, 1px 1px 0 #922a52, -1px 1px 0 #922a52, 1px -1px 0 #922a52, -1px -1px 0 #922a52, 0 2px 4px #6a1a3a88; }
.overlay.fm-title .ov-card button.fm-steal small { color: #fff0f6 !important; }
.overlay.fm-title .ov-card button.fm-next { width: min(100%, calc(var(--u) * 360)); min-height: max(44px, calc(var(--u) * 54));
  background: linear-gradient(#ffd27a, #f6a23a 55%, #e2861e); box-shadow: 0 0 0 max(2px, calc(var(--u) * 3)) #a8641a, 0 calc(var(--u) * 5) 0 calc(var(--u) * 1) #8e5214, 0 calc(var(--u) * 9) calc(var(--u) * 14) #0004; }
.overlay.fm-title .ov-card button.fm-next b { font-size: max(13.5px, calc(var(--u) * 17)); text-shadow: 0 2px 0 #8e5214, 1px 1px 0 #8e5214, -1px 1px 0 #8e5214, 1px -1px 0 #8e5214, -1px -1px 0 #8e5214, 0 2px 4px #5a320888; }
.overlay.fm-title .ov-card button.fm-next small { color: #fff6e6 !important; }
.overlay.fm-title .ov-card button.fm-next .fm-tic { height: max(28px, calc(var(--u) * 40)); }
.overlay.fm-title .ov-card button.fm-feat:hover { filter: brightness(1.06); }
.overlay.fm-title .ov-card button.fm-feat:active { transform: translateY(3px); }

/* ---------- mode tiles ---------- */
.fm-tright { display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 8); min-width: 0; min-height: 0; }
.overlay.fm-title .fm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: max(84px, calc(var(--u) * 128)); gap: calc(var(--u) * 11); margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 8); }
.overlay.fm-title .ov-card button.fm-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); min-width: 0; min-height: 0; height: 100%; margin: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 8); border: max(2px, calc(var(--u) * 3)) solid #fff; border-image: none; border-radius: calc(var(--u) * 20);
  background: linear-gradient(#fffdf7, #ffefd2 60%, #ffe2b4); box-shadow: 0 calc(var(--u) * 5) 0 #c99350, 0 calc(var(--u) * 9) calc(var(--u) * 14) #0004;
  color: var(--tdark); text-shadow: none; text-align: center; transition: transform .14s ease, filter .14s ease; }
.overlay.fm-title .ov-card button.fm-tile:hover { transform: translateY(calc(var(--u) * -3)); filter: brightness(1.04); }
.overlay.fm-title .ov-card button.fm-tile:active { transform: translateY(calc(var(--u) * 3)); box-shadow: 0 calc(var(--u) * 1) 0 #c99350, 0 calc(var(--u) * 3) calc(var(--u) * 6) #0003; }
.overlay.fm-title .ov-card button.fm-tile > .fm-tic { flex: 0 1 auto; min-height: 0; height: max(38px, calc(var(--u) * 62)); width: auto; max-width: 90%; margin: 0 0 calc(var(--u) * 2); vertical-align: 0;
  object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) #0003); transition: transform .2s ease; }
.overlay.fm-title .ov-card button.fm-tile:hover > .fm-tic { transform: scale(1.08) rotate(-3deg); }
.overlay.fm-title .ov-card button.fm-tile > b { display: block; max-width: 100%; font-size: max(12.5px, calc(var(--u) * 14.5)); font-weight: 700; line-height: 1.15; color: var(--tdark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay.fm-title .ov-card button.fm-tile > small { display: block; max-width: 100%; font-size: max(10px, calc(var(--u) * 12.5)); line-height: 1.2; color: var(--tmid) !important; text-shadow: none !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay.fm-title .ov-card button.fm-tile > small .gi { height: 1.3em; }
.overlay.fm-title .ov-card button.fm-tile > .fm-badge { position: absolute; top: calc(var(--u) * -8); right: calc(var(--u) * 4); min-width: max(20px, calc(var(--u) * 26)); height: max(20px, calc(var(--u) * 26));
  font-size: max(11px, calc(var(--u) * 14)); border: 2px solid #fff; box-shadow: 0 2px 3px #0004; animation: fmTPop 1.6s ease-in-out infinite; }
@keyframes fmTPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* wide feature tiles: icon left, text right */
.overlay.fm-title .ov-card button.fm-tile.wide { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center;
  column-gap: calc(var(--u) * 8); row-gap: calc(var(--u) * 2); justify-items: start; text-align: left; padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 8);
  background: linear-gradient(#f4ffe6, #dff7c0 60%, #c8ec9c); box-shadow: 0 calc(var(--u) * 5) 0 #7fb048, 0 calc(var(--u) * 9) calc(var(--u) * 14) #0004; }
.overlay.fm-title .ov-card button.fm-tile.wide > .fm-tic { grid-row: 1 / -1; align-self: center; height: max(52px, calc(var(--u) * 74)); margin: 0; }
.overlay.fm-title .ov-card button.fm-tile.wide > b { grid-column: 2; grid-row: 1; align-self: end; font-size: max(14px, calc(var(--u) * 19)); color: #2f5a14; }
.overlay.fm-title .ov-card button.fm-tile.wide > small { grid-column: 2; grid-row: 2; align-self: start; white-space: normal; text-wrap: balance; color: #5a7a30 !important; }
.overlay.fm-title .ov-card button.fm-tile.wide.hot { background: linear-gradient(#fff3f8, #ffdcea 60%, #ffc6dc); box-shadow: 0 calc(var(--u) * 5) 0 #d77a9e, 0 calc(var(--u) * 9) calc(var(--u) * 14) #0004; }
.overlay.fm-title .ov-card button.fm-tile.wide.hot > b { color: #9a2a5a; } .overlay.fm-title .ov-card button.fm-tile.wide.hot > small { color: #b05a80 !important; }
.overlay.fm-title .ov-card button.fm-tile.wide.hot::after { content: '-30%'; position: absolute; top: calc(var(--u) * -8); right: calc(var(--u) * 10); padding: 0 calc(var(--u) * 8);
  border-radius: 999px; border: 2px solid #fff; background: linear-gradient(#ff7a9a, #e8395f); color: #fff; font: 700 max(10px, calc(var(--u) * 13))/1.6 Kanit, Prompt, Tahoma, sans-serif;
  box-shadow: 0 2px 3px #0004; transform: rotate(4deg); }

/* announcements from the back office: one compact strip above the tiles */
.overlay.fm-title .fm-announce { margin: 0; max-height: calc(var(--u) * 62); overflow: auto; border: 2px solid #fff; border-radius: calc(var(--u) * 14);
  background: #fff6dcee; box-shadow: 0 calc(var(--u) * 3) 0 #e0a040; font-size: max(11.5px, calc(var(--u) * 14)); padding: calc(var(--u) * 3) calc(var(--u) * 12); }

.overlay.fm-title .fm-tright:has(> .fm-announce) .fm-tiles { grid-auto-rows: max(76px, calc(var(--u) * 114)); }
/* short screens (phones): a little tighter */
@media (max-height: 460px), (max-width: 560px) {
  .overlay.fm-title .fm-tiles { gap: max(6px, calc(var(--u) * 10)); }
}
/* an upright window that is not auto-rotated (narrow desktop window): stack the columns and scroll */
@media (max-aspect-ratio: 5/6) {
  html:not(.fm-rot) .overlay.fm-title { --u: calc(var(--vw, 1vw) * 100 / 520); }
  html:not(.fm-rot) .overlay.fm-title > .ov-card { overflow: auto; }
  html:not(.fm-rot) .fm-ttop { flex-wrap: wrap; justify-content: center; }
  html:not(.fm-rot) .fm-tsp { display: none; }
  html:not(.fm-rot) .fm-tbody { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; }
  html:not(.fm-rot) .overlay.fm-title .fm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.fm-title *, .overlay.fm-title *::before, .overlay.fm-title *::after { animation: none !important; transition: none !important; }
}

/* ================= profile (ui.js profileMenu) ================= */
.fm-pcard { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px auto 10px; max-width: 600px; text-align: left; }
.fm-pava { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #fff 0, #ffe1ec 62%, #f8b9d0 100%); border: 4px solid #fff;
  box-shadow: 0 0 0 3px #e86a96, 0 6px 0 #c04a74, 0 10px 18px #0003; }
.fm-pcard.sheep .fm-pava { background: radial-gradient(circle at 50% 36%, #fff 0, #ddf1ff 62%, #a9d8fa 100%); box-shadow: 0 0 0 3px #4aa6ec, 0 6px 0 #2a72b4, 0 10px 18px #0003; }
.fm-pava .fm-avbig { height: 122px; width: auto; max-width: 118px; object-fit: contain; margin-top: -6px; filter: drop-shadow(0 3px 2px #0003); }
.fm-pava .fm-pside { position: absolute; right: -12px; bottom: -8px; width: 54px; height: 54px; filter: drop-shadow(0 2px 2px #0004); }
.fm-pava .fm-plv { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 0 12px; border-radius: 999px; border: 2px solid #fff; white-space: nowrap;
  background: linear-gradient(#ffd25a, #f09a1a); color: #fff; font-size: 15px; line-height: 1.6; text-shadow: 0 1px 0 #a05a00; box-shadow: 0 2px 3px #0004; }
.fm-pcard .fm-form { flex: 1 1 260px; max-width: 340px; margin: 0; }
.overlay.fm .fm-form label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; color: var(--ink-d); }
.overlay.fm .fm-form input { border-radius: 12px; border: 3px solid #e4c48e; background: #fffdf6; box-shadow: inset 0 2px 0 #00000010; transition: border-color .15s, box-shadow .15s; }
.overlay.fm .fm-form input:focus { outline: none; border-color: #ec6a98; box-shadow: 0 0 0 3px #ffd0e2, inset 0 2px 0 #00000010; }
.overlay.fm .fm-stats { gap: 6px; padding: 8px; border-radius: 16px; }
.overlay.fm .fm-stats > div { padding: 3px 10px; border-radius: 999px; background: #fffaf0; box-shadow: inset 0 0 0 2px #f2dcb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-height: 460px), (max-width: 560px) {
  .fm-pcard { gap: 14px; margin: 2px auto 6px; }
  .fm-pava { width: 92px; height: 92px; } .fm-pava .fm-avbig { height: 86px; max-width: 84px; } .fm-pava .fm-pside { width: 40px; height: 40px; right: -10px; bottom: -6px; }
  .fm-pava .fm-plv { font-size: 12px; top: -11px; }
  .overlay.fm .fm-stats { gap: 4px; padding: 6px; font-size: 13px; }
  .overlay.fm .fm-pcard ~ .fm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .overlay.fm .fm-pcard .fm-form { gap: 4px; } .overlay.fm .fm-pcard .fm-form input { font-size: 16px; padding: 3px 8px; }
}
html.fm-rot .overlay.fm .fm-pcard ~ .fm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.fm-rot .overlay.fm .fm-pcard .fm-form { gap: 4px; } html.fm-rot .overlay.fm .fm-pcard .fm-form input { font-size: 16px; padding: 3px 8px; }
html.fm-rot .fm-pcard { gap: 14px; margin: 2px auto 6px; }
html.fm-rot .fm-pava { width: 92px; height: 92px; } html.fm-rot .fm-pava .fm-avbig { height: 86px; max-width: 84px; }
html.fm-rot .fm-pava .fm-pside { width: 40px; height: 40px; right: -10px; bottom: -6px; }
html.fm-rot .fm-pava .fm-plv { font-size: 12px; top: -11px; }
html.fm-rot .overlay.fm .fm-stats { gap: 4px; padding: 6px; font-size: 13px; }

/* ================= shared polish for every other menu ================= */
/* HD kit buttons and tabs: stretch the art instead of tiling it (no seams or bands on tall / wide buttons) */
body.hd-ui .ov-card button, body.hd-ui .fm-drawer button, body.hd-ui .fm-tabs button { border-image-repeat: stretch; }
/* softer, warmer backdrop behind menus */
.overlay.fm:not(.fm-title) { background: radial-gradient(ellipse 80% 80% at 50% 50%, #1c140a8c, #1c140ad9); }
/* wallet chips: round pills with painted icons */
.overlay.fm:not(.fm-title) .fm-wallet { gap: 8px; }
.overlay.fm:not(.fm-title) .fm-wallet span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 12px 1px 5px; border: 2px solid #fff !important; border-radius: 999px;
  background: linear-gradient(#fffdf4, #ffeccb); box-shadow: 0 2px 0 #dcb87a, 0 3px 6px #0002; }
.overlay.fm:not(.fm-title) .fm-wallet .gi { height: 1.45em; margin: -.2em .1em -.2em 0; vertical-align: middle; }
/* list rows: rounded cream cards with a white inner rim and a soft lift */
.overlay.fm .fm-row, .overlay.fm .fm-q, .overlay.fm .fm-ach, .overlay.fm .fm-hunt, .fm-drawer .fm-mrow, .overlay.fm .fm-away div {
  border: 2px solid #e6c690 !important; border-radius: 14px; background: linear-gradient(#fffdf6, #fff0d2);
  box-shadow: inset 0 0 0 2px #ffffffb0, 0 3px 0 #e2c18a, 0 4px 8px #6a3a1014; }
.overlay.fm .fm-q.done, .overlay.fm .fm-ach.ready { border-color: #8ccf5a !important; background: linear-gradient(#fbfff2, #e8f8d0);
  box-shadow: inset 0 0 0 2px #ffffffb0, 0 3px 0 #9ccc6a, 0 4px 8px #3a6a1014; }
.overlay.fm .fm-info { border-radius: 16px; border: 2px solid #e6c690 !important; background: linear-gradient(#fffdf6, #fff2d8); box-shadow: inset 0 0 0 2px #ffffffb0, 0 3px 0 #e2c18a; }
.overlay.fm .fm-day { border-radius: 14px; box-shadow: inset 0 0 0 2px #ffffffb0, 0 3px 0 #e2c18a; }
.overlay.fm .fm-rec { border-radius: 10px; }
.overlay.fm .fm-breed { border-radius: 14px; box-shadow: 0 3px 0 #0000001a; }
/* icons in rows sit on a soft round disc */
.overlay.fm .fm-row > .fm-ic:not(.fm-cos):not(.fm-accic):not(:has(> img:not(.gi))), .overlay.fm .fm-ach > .fm-ic:not(:has(> img:not(.gi))), .fm-drawer .fm-mrow > .fm-ic:not(:has(> img:not(.gi))) {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0, #fff3d6 55%, #f6dca6 100%); box-shadow: inset 0 -2px 0 #e8c88e, 0 1px 2px #0002; }
.overlay.fm .fm-row > .fm-ic:not(.fm-cos):not(.fm-accic) > .gi, .overlay.fm .fm-ach > .fm-ic > .gi { height: 36px; max-width: 40px; margin: 0; vertical-align: 0; }
/* shop rows with a 64 px farmer portrait (.fm-fo) get a wider picture column */
.overlay.fm .fm-row:has(> .fm-ic > .fm-fo) { grid-template-columns: 64px minmax(0, 1fr) auto; }
/* plain menu buttons (settings, mini-games, pause) become tiles like the title screen */
.overlay.fm:not(.fm-title) .fm-menu > button:not(.pri):not(.ok) {
  color: var(--ink-d); text-shadow: none; border: 3px solid #fff !important; border-image: none !important; border-radius: 16px;
  background: linear-gradient(#fffdf7, #ffefd2 60%, #ffe2b4); box-shadow: 0 0 0 2px #e6c690, 0 5px 0 #c99350, 0 8px 12px #0003; padding: 6px 10px 8px; min-height: 60px; }
.overlay.fm:not(.fm-title) .fm-menu > button:not(.pri):not(.ok):hover { filter: brightness(1.04); transform: translateY(-2px); }
.overlay.fm:not(.fm-title) .fm-menu > button:not(.pri):not(.ok):active { transform: translateY(3px); box-shadow: 0 0 0 2px #e6c690, 0 2px 0 #c99350; }
.overlay.fm:not(.fm-title) .fm-menu > button:not(.pri):not(.ok) small { color: var(--ink-m) !important; text-shadow: none !important; }
.overlay.fm:not(.fm-title) .fm-menu > button { justify-content: center; }
.overlay.fm:not(.fm-title) .fm-menu > button > .gi:first-child { height: 2.2em; margin: 0 0 2px; filter: drop-shadow(0 2px 1px #0003); }
.overlay.fm:not(.fm-title) .fm-menu > button:disabled { filter: grayscale(.5); opacity: .7; }
/* progress bars: a rounded cream track with a glossy green fill (the label stays centred on top) */
body .overlay.fm .fm-bar { height: 18px; border: 0; border-radius: 999px; background: #ecd8b0; box-shadow: inset 0 2px 3px #6a3a1040, 0 0 0 2px #fff; }
body .overlay.fm .fm-bar i { inset: 3px auto 3px 3px; height: auto; margin: 0; max-width: calc(100% - 6px); border-radius: 999px;
  background: linear-gradient(#c2f77e, #6cd13e 55%, #4cb22a); box-shadow: inset 0 1px 0 #ffffff90; }
body .overlay.fm .fm-bar span { line-height: 18px; text-shadow: 0 1px 0 #fff8; }
.overlay.fm .ov-diff { color: var(--ink-m); }
/* the main pink / green action of a menu gets a soft drop shadow so it stands out */
.overlay.fm:not(.fm-title) .ov-diff button.pri, .overlay.fm:not(.fm-title) .ov-diff button.ok { filter: drop-shadow(0 3px 4px #0003); }
@media (prefers-reduced-motion: reduce) {
  .overlay.fm *, .fm-drawer * { transition: none !important; }
}