/* ฟาร์มหมู vs ฟาร์มแกะ — graphics pass 2026-10-27 (gfx audit items 1-26): painted art + cream/wood styling for the menus that
   still looked unfinished. Loaded after menus.css; selectors are a step more specific than the old rules (and than the <style>
   blocks some modules inject at run time) so they win without !important wherever possible. Visual only. */

/* ---------- #1 collection book: HD portraits, rarity ribbons, painted mystery card backs ---------- */
.overlay.fm .fm-breeds:has(.fm-bk) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.overlay.fm .fm-breed.fm-bk { position: relative; justify-content: flex-start; gap: 3px; min-height: 176px; padding: 8px 6px 9px; box-sizing: border-box;
  border: 3px solid var(--rc) !important; border-radius: 16px; background: linear-gradient(#fffdf7, #fff1d6); opacity: 1;
  box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #d9b57c, 0 6px 10px #6a3a1022; }
.overlay.fm .fm-bkpic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 38%, #fff 0, #fff6e2 52%, color-mix(in srgb, var(--rc) 40%, #f4d9a4) 100%); box-shadow: inset 0 -3px 0 #0000001a, 0 1px 2px #0002; }
.overlay.fm .fm-bkpic img { width: 84px; height: 84px; object-fit: contain; image-rendering: auto; }
.overlay.fm .fm-bkpic img.fm-px { width: auto; height: 56px; image-rendering: pixelated; }
.overlay.fm .fm-breed.fm-bk > b { font-size: 13.5px; line-height: 1.25; color: #4a2c18; text-align: center; }
.overlay.fm .fm-breed.fm-bk small { font-size: 11.5px; color: #7a5a38; line-height: 1.3; text-align: center; }
.overlay.fm .fm-rib { display: grid; place-items: center; width: 116px; max-width: 100%; height: 34px; padding: 0 18px 7px; box-sizing: border-box; flex: 0 0 auto;
  background: url(../../art/farm/menu/rib_0.webp) center / 100% 100% no-repeat; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
  text-shadow: 0 1px 0 #0007, 1px 0 0 #0006, -1px 0 0 #0006, 0 -1px 0 #0006; }
.overlay.fm .fm-rib.r1 { background-image: url(../../art/farm/menu/rib_1.webp); }
.overlay.fm .fm-rib.r2 { background-image: url(../../art/farm/menu/rib_2.webp); }
.overlay.fm .fm-rib.r3 { background-image: url(../../art/farm/menu/rib_3.webp); }
.overlay.fm .fm-rib.r4 { background-image: url(../../art/farm/menu/rib_4.webp); color: #6a3a00; text-shadow: 0 1px 0 #fff8, 1px 0 0 #fff6, -1px 0 0 #fff6; }
.overlay.fm .fm-breed.fm-bk.unk { justify-content: flex-end; border: 0 !important; padding-bottom: 7px;
  background: url(../../art/farm/menu/card_back.webp) center / 100% 100% no-repeat; box-shadow: 0 4px 8px #6a3a1030; }

/* ---------- #2 steal battle menu: pill side switch, two painted mode cards, painted hint row ---------- */
.overlay.fm .fm-stlab { margin: 4px 0 2px; font-weight: 700; color: var(--ink-d, #4a2c18); }
body .overlay.fm:not(.fm-title) .fm-sides { display: flex; width: max-content; max-width: 100%; margin: 4px auto 8px; gap: 0; padding: 4px; border-radius: 999px;
  background: #fff8e8; border: 3px solid #fff; box-shadow: 0 0 0 2px #e6c690, 0 4px 0 #c08848, 0 7px 12px #0003; }
body .overlay.fm:not(.fm-title) .ov-card .fm-sides button { min-height: 44px; min-width: 120px; margin: 0; padding: 0 18px; border: 0; border-image: none; border-radius: 999px; outline: 0;
  background: transparent; box-shadow: none; color: #7a5a38; text-shadow: none; font-size: 16px; font-weight: 700; white-space: nowrap; }
body .overlay.fm:not(.fm-title) .ov-card .fm-sides button .gi { height: 1.5em; vertical-align: -.42em; }
body .overlay.fm:not(.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; }
body .overlay.fm:not(.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; }
.overlay.fm .fm-stmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 8px; }
body .overlay.fm .ov-card button.fm-stmode { display: flex; align-items: center; gap: 10px; min-height: 96px; padding: 8px 12px; text-align: left; color: #4a2c18; text-shadow: none;
  border: 3px solid #fff !important; border-image: none !important; border-radius: 18px; background: linear-gradient(#fffdf7, #ffefd2 60%, #ffe2b4);
  box-shadow: 0 0 0 3px var(--rim, #f0a040), 0 5px 0 var(--rimd, #c06a1a), 0 9px 14px #0003; }
body .overlay.fm .ov-card button.fm-stmode.bot { --rim: #6cc04a; --rimd: #3a8a2a; }
body .overlay.fm .ov-card button.fm-stmode img { flex: 0 0 auto; width: 92px; height: 80px; object-fit: contain; filter: drop-shadow(0 2px 2px #0003); }
body .overlay.fm .ov-card button.fm-stmode span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body .overlay.fm .ov-card button.fm-stmode b { font-size: 17px; line-height: 1.2; color: #4a2c18; text-shadow: 0 1px 0 #fff8e8 !important; }   /* (no same-colour outline from the generic menu <b>: it filled the letter holes) */
body .overlay.fm .ov-card button.fm-stmode small { font-size: 12.5px; line-height: 1.3; color: #6a4a2a !important; text-shadow: none !important; font-weight: 600; }
body .overlay.fm .ov-card button.fm-stmode small.fm-net.on { color: #1d7a40 !important; } body .overlay.fm .ov-card button.fm-stmode small.fm-net.off { color: #b8304f !important; }
body .overlay.fm .ov-card button.fm-stmode:hover { filter: brightness(1.04); transform: translateY(-2px); }
body .overlay.fm .ov-card button.fm-stmode:active { transform: translateY(3px); box-shadow: 0 0 0 3px var(--rim, #f0a040), 0 2px 0 var(--rimd, #c06a1a); }
body .overlay.fm .ov-card button.fm-stmode:disabled { filter: grayscale(.55); opacity: .75; }
.overlay.fm .fm-sthint { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 2px 0 6px; }
.overlay.fm .fm-sthint span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #fff6e2; border: 2px solid #ecd2a2; color: #5a3a1a; font-size: 12.5px; line-height: 1.3; }
.overlay.fm .fm-sthint .gi { height: 1.6em; vertical-align: -.45em; }

/* ---------- #6 mini-games: three painted tiles + segmented difficulty pills ---------- */
.overlay.fm .fm-mdiff { display: flex; align-items: center; justify-content: center; gap: 0; width: max-content; max-width: 100%; margin: 6px auto 10px; padding: 4px; border-radius: 999px;
  background: #fff8e8; border: 3px solid #fff; box-shadow: 0 0 0 2px #e6c690, 0 4px 0 #c08848; }
.overlay.fm .fm-mdiff > span { padding: 0 10px 0 8px; font-weight: 700; color: #7a5a38; }
body .overlay.fm .ov-card .fm-mdiff button { min-height: 44px; min-width: 76px; margin: 0; padding: 0 16px; border: 0; border-image: none; border-radius: 999px; background: transparent;
  box-shadow: none; color: #7a5a38; text-shadow: none; font-size: 15px; font-weight: 700; }
body .overlay.fm .ov-card .fm-mdiff button.on { color: #fff; background: linear-gradient(#ffc26a, #f39a2a 55%, #de7c14); box-shadow: inset 0 -3px 0 #c06a10, inset 0 2px 0 #ffe2b0;
  text-shadow: 0 1px 0 #9a4a00, 1px 0 0 #9a4a00, -1px 0 0 #9a4a00, 0 -1px 0 #9a4a00; }
.overlay.fm .fm-mgames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 8px; }
body .overlay.fm .ov-card button.fm-mgame { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 0; padding: 6px 6px 9px; text-align: center; color: #4a2c18; text-shadow: none;
  border: 3px solid #fff !important; border-image: none !important; border-radius: 18px; background: linear-gradient(#fffdf7, #ffefd2);
  box-shadow: 0 0 0 2px #e6c690, 0 5px 0 #c99350, 0 8px 12px #0003; }
body .overlay.fm .ov-card button.fm-mgame small .gi { height: 1.35em; width: auto; vertical-align: -.35em; }
body .overlay.fm .ov-card button.fm-mgame > img:first-child { width: 100%; aspect-ratio: 360 / 264; height: auto; object-fit: cover; border-radius: 12px; }
body .overlay.fm .ov-card button.fm-mgame b { font-size: 17px; line-height: 1.2; margin-top: 2px; }
body .overlay.fm .ov-card button.fm-mgame small { font-size: 12px; line-height: 1.3; color: #6a4a2a !important; text-shadow: none !important; }
body .overlay.fm .ov-card button.fm-mgame:hover { filter: brightness(1.04); transform: translateY(-2px); }
body .overlay.fm .ov-card button.fm-mgame:active { transform: translateY(3px); box-shadow: 0 0 0 2px #e6c690, 0 2px 0 #c99350; }

/* ---------- #7 stage select: chapter strips, quiet locked tiles, glowing current tile, crowned boss tiles ---------- */
.overlay.fm .fm-chap { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 56px; margin: 10px 0 2px; padding: 6px 16px;
  border-radius: 14px; background: var(--chap) center / cover no-repeat; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e6c690, 0 4px 8px #6a3a1030; overflow: hidden; }
.overlay.fm .fm-chap b, .overlay.fm .fm-chap small { position: relative; padding: 1px 12px; border-radius: 999px; background: #5a3414d9; box-shadow: 0 0 0 2px #fff3d6aa;
  color: #fff3c4 !important; text-shadow: 0 1px 0 #2a1406 !important; }
.overlay.fm .fm-chap b { font-size: 16px; line-height: 1.35; } .overlay.fm .fm-chap small { margin-top: 3px; font-size: 12px; font-weight: 600; color: #ffe9c0 !important; }
.overlay.fm .fm-chap + .fm-stages { margin-top: 8px; }
body .overlay.fm .ov-card .fm-stage { position: relative; min-height: 78px; overflow: visible; }
body .overlay.fm .ov-card .fm-stage.locked { opacity: .78; filter: saturate(.55); }
body .overlay.fm .ov-card .fm-stage.locked .fm-tag .gi { height: 1.2em; opacity: .85; }
body .overlay.fm .ov-card .fm-stage small.fm-sname { font-size: 11.5px; line-height: 1.2; color: #fff7e6; text-shadow: 1px 1px 0 #4a2c18; max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
body .overlay.fm .ov-card .fm-stage small.fm-spow { font-size: 11px; color: #ffe9a8; text-shadow: 1px 1px 0 #4a2c18; }
body .overlay.fm .ov-card .fm-stage.cur { z-index: 1; animation: fmStageBob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff27a) drop-shadow(0 0 10px #ffc23a); }
@keyframes fmStageBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
body .overlay.fm .ov-card .fm-stage .fm-bossb { position: absolute; top: -14px; right: 4px; width: 38px; height: 38px; pointer-events: none; filter: drop-shadow(0 2px 2px #0005); transform: rotate(12deg); }
body .overlay.fm .ov-card .fm-stage.boss:not(.locked) { box-shadow: 0 0 0 3px #ffd84a, 0 0 10px 2px #ffd84a88; border-radius: 10px; }
.overlay.fm .fm-stages.fm-adv { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
@media (prefers-reduced-motion: reduce) { body .overlay.fm .ov-card .fm-stage.cur { animation: none; } }

/* ---------- #15 achievements: tier medals, a real sub-line, locked reward instead of "…" ---------- */
.overlay.fm .fm-ach .fm-qt .fm-amedal { height: 1.5em; width: auto; vertical-align: -.4em; margin-right: 4px; }
.overlay.fm .fm-ach .fm-qt > small { font-size: 12px; color: #7a5a38; }
body .overlay.fm .ov-card .fm-ach button.fm-alock:disabled { filter: none; opacity: 1; color: #6a5030; text-shadow: none; background: #efe2c6; border-image: none; border: 2px dashed #c8a878;
  border-radius: 12px; font-size: 13px; font-weight: 600; min-width: 96px; }
body .overlay.fm .ov-card .fm-ach button.fm-alock .gi { height: 1.25em; vertical-align: -.3em; opacity: .8; }
.overlay.fm .fm-ach button .fm-amedal { height: 34px; width: auto; margin: 0; }

/* ---------- #14 the friends badge is drawn like the canvas badges beside it: desktop (.fr-tall) the same wood plate as ออเดอร์ /
   กันภัย / เทศกาล (art/farm/ui/hd/btn_square_hd 9-sliced at its 80 px corners, 6 canvas units wide = .41em of the badge font)
   with the icon, the count bubble and a caption; phones the orange top-bar button (btn_wood_hd), icon only ---------- */
body .fr-btn { border: 1px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #4a2c18; overflow: visible;
  border-image: url(../../art/farm/ui/hd/btn_wood_hd.png) 74 fill / .45em / 0 stretch; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
body .fr-btn.fr-tall { border-image: url(../../art/farm/ui/hd/btn_square_hd.png) 80 fill / .41em / 0 stretch; }
body .fr-btn .fr-bi { width: 74%; height: auto; max-height: 74%; object-fit: contain; filter: drop-shadow(0 1px 1px #0004); }
body .fr-btn.fr-tall .fr-bi { width: 80%; max-height: 54%; align-self: start; margin-top: 14%; }
body .fr-btn.fr-tall::after { content: 'เพื่อน'; position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; pointer-events: none;
  font: 700 .385em/1 Kanit, Prompt, Tahoma, sans-serif; color: #fff7e6; text-shadow: 0 1px 0 #3a1e0a, 1px 0 0 #3a1e0a, -1px 0 0 #3a1e0a, 0 -1px 0 #3a1e0a; }
body .fr-btn:active { transform: translateY(2px); }

/* ---------- #5 Lv60 town HUD: cream / wood round badges (40 px desktop, 44 px touch), painted icons, a caption on hover;
   phones: the top row wraps into two rows left of the chat bar ---------- */
body .tw-hud .tw-r { width: max(40px, calc(var(--u) * 20)); height: max(40px, calc(var(--u) * 20)); font-size: max(18px, calc(var(--u) * 9.5)); position: relative;
  border: 2px solid #fff6e0; background: radial-gradient(circle at 50% 32%, #fffaf0 0, #f6dfb0 62%, #e6bf80 100%); color: #4a2c18;
  box-shadow: 0 0 0 1.5px #a8682f, 0 2px 0 #7a4620, 0 4px 7px rgba(0,0,0,.28); }
body .tw-hud .tw-r .gi, body .tw-hud .tw-r img { height: 74%; width: auto; max-width: 80%; vertical-align: 0; pointer-events: none; filter: drop-shadow(0 1px 1px #0003); }
body .tw-hud .tw-bar .tw-mic { background: radial-gradient(circle at 50% 32%, #dcffd8 0, #8fd884 60%, #4fa848 100%); }
body .tw-hud .tw-bar .tw-mic.on { background: radial-gradient(circle at 50% 32%, #ffd0d0 0, #f07070 60%, #d43a4a 100%); }
body .tw-hud .tw-bar .tw-chatbtn.on { background: radial-gradient(circle at 50% 32%, #fff0d8 0, #ffb870 60%, #e8853a 100%); }
body .tw-hud .tw-pill { height: max(32px, calc(var(--u) * 15)); font-size: max(13px, calc(var(--u) * 7)); padding: 0 max(12px, calc(var(--u) * 7)); color: #4a2c18;
  background: linear-gradient(#fffaf0, #f3d9a6); border: 2px solid #fff6e0; box-shadow: 0 0 0 1.5px #a8682f, 0 2px 0 #7a4620; }
body .tw-hud .tw-pill.ok { background: linear-gradient(#e8ffd8, #9be07a); } body .tw-hud .tw-pill.warn { background: linear-gradient(#ffe8d8, #f0a070); }
body .tw-hud .tw-top, body .tw-hud .tw-bar { gap: max(5px, calc(var(--u) * 3)); }
@media (hover: hover) {
  body .tw-hud .tw-r[title]:hover::before { content: attr(title); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; pointer-events: none;
    padding: 2px 8px; border-radius: 8px; background: #4a2c14ee; color: #fff3d6; font: 600 11px/1.4 Kanit, Prompt, Tahoma, sans-serif; box-shadow: 0 2px 4px #0005; }
}
body .tw-hud.cmp .tw-top { right: calc(var(--u) * 4 + (var(--barx, 0) + 2) * 46px + 6px); flex-wrap: wrap; justify-content: flex-end; row-gap: 5px;
  max-width: calc(var(--vw, 1vw) * 100 - (var(--barx, 0) + 2) * 46px - 230px); white-space: normal; }
/* lead review 2026-10-27: on 640×360 / 568×320 the 230 px kept free on the left wrapped ☰ เมนูตลาด onto a second line, where the open chat
   input (the dock's own second line) covered its top half. Small phones keep only the เข้าบ้าน / 👥 column free (the row fits on one
   line), and the input line always starts under the row's measured bottom (--rowb) when the row still wraps */
@media (max-width: 700px) { body .tw-hud.cmp .tw-top { max-width: calc(var(--vw, 1vw) * 100 - (var(--barx, 0) + 2) * 46px - 120px); } }
body .tw-hud.cmp .tw-dock.open .tw-in { margin-top: max(0px, calc(var(--rowb, 0px) + 4px - var(--u) * 47 - 44px)); }
@media (pointer: coarse) { body .tw-hud .tw-r { width: 44px; height: 44px; font-size: 20px; } body .tw-hud .tw-pill { height: 40px; } }
html.fm-rot body .tw-hud .tw-r { width: 44px; height: 44px; font-size: 20px; } html.fm-rot body .tw-hud .tw-pill { height: 40px; }

/* ---------- #21 animal market: fuse row as A + B → result portraits; painted empty states ---------- */
.overlay.fm .fm-row.fm-fuse { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
.overlay.fm .fm-fusepics { display: flex; align-items: center; gap: 4px; }
.overlay.fm .fm-fp { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.overlay.fm .fm-fp .fm-th { width: 64px; height: 64px; object-fit: contain; image-rendering: auto; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0, #fff4dc 55%, #f2d6a0 100%); box-shadow: inset 0 -2px 0 #0000001a; }
.overlay.fm .fm-fp.res .fm-th { box-shadow: 0 0 0 3px #ffd84a, 0 0 12px 2px #ffd84aaa; }
.overlay.fm .fm-fp .fm-stars { font-size: 10.5px; letter-spacing: 0; }
.overlay.fm .fm-fplus { font-size: 24px; font-weight: 800; color: #c0601a; padding: 0 2px; }
.overlay.fm .fm-farrow { width: 42px; height: 42px; filter: drop-shadow(0 2px 2px #0003); }
.overlay.fm .fm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 10px; text-align: center; }
.overlay.fm .fm-empty img { width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 4px #0002); }
.overlay.fm .fm-empty p { margin: 0; max-width: 480px; color: #6a4626; font-size: 14.5px; line-height: 1.45; }
@media (max-width: 640px), (max-height: 460px) {
  .overlay.fm .fm-row.fm-fuse { grid-template-columns: minmax(0, 1fr) auto; } .overlay.fm .fm-row.fm-fuse .fm-fusepics { grid-column: 1 / -1; justify-content: center; }
  .overlay.fm .fm-fp .fm-th { width: 50px; height: 50px; } .overlay.fm .fm-farrow { width: 34px; height: 34px; } .overlay.fm .fm-empty img { width: 84px; height: 84px; }
}
html.fm-rot .overlay.fm .fm-row.fm-fuse { grid-template-columns: minmax(0, 1fr) auto; } html.fm-rot .overlay.fm .fm-row.fm-fuse .fm-fusepics { grid-column: 1 / -1; justify-content: center; }
html.fm-rot .overlay.fm .fm-fp .fm-th { width: 50px; height: 50px; } html.fm-rot .overlay.fm .fm-empty img { width: 84px; height: 84px; }

/* ---------- #25 top-up while closed: the painted gem, a friendly line, the free ways as chips ---------- */
.overlay.fm .py-closed { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 8px 4px; }
.overlay.fm .py-closed > img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 6px #2a6a9a40); animation: fmGemBob 2.4s ease-in-out infinite; }
@keyframes fmGemBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.overlay.fm .py-closed p { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: #5a3a1a; } .overlay.fm .py-closed p b { font-size: 18px; color: #4a2c18; }
.overlay.fm .py-earn { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.overlay.fm .py-earn span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: #fff6e2; border: 2px solid #ecd2a2; color: #5a3a1a; font-size: 13.5px; font-weight: 600; }
.overlay.fm .py-earn .gi { height: 1.5em; vertical-align: -.4em; }
@media (prefers-reduced-motion: reduce) { .overlay.fm .py-closed > img { animation: none; } }

/* ---------- #23 notification settings: two roomy columns, bigger painted icons ---------- */
.overlay.fm .nt-card .nt-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.overlay.fm .nt-card button.nt-cat { grid-template-columns: 36px minmax(0, 1fr) 26px; min-height: 54px; }
.overlay.fm .nt-card .nt-ci .gi, .overlay.fm .nt-card .nt-mi .gi { height: 30px; width: auto; max-width: 34px; vertical-align: 0; }
.overlay.fm .nt-card button.nt-cat b { font-size: 15px; } .overlay.fm .nt-card .nt-cn small { font-size: 12.5px; }
@media (max-width: 480px) { html:not(.fm-rot) .overlay.fm .nt-card .nt-cats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- #12 character command cards: bigger button text, readable locked buttons, an ⓘ for the number lines ---------- */
body .overlay.fm .fm-cc .fm-cc-grid button { min-height: 56px !important; padding: 5px 10px !important; }
body .overlay.fm .fm-cc .fm-cc-grid button.fm-cc-img { padding-left: 58px !important; }
body .overlay.fm .fm-cc .fm-cc-grid button .fm-cc-l { font-size: 15px; line-height: 1.25; font-weight: 700; }
body .overlay.fm .fm-cc .fm-cc-grid button small { font-size: 12.5px !important; line-height: 1.3; }
body .overlay.fm .fm-cc .fm-cc-grid button.fm-cc-off { filter: none; opacity: 1; color: #5a4528 !important; text-shadow: none !important; background: #e9dcc2 !important;
  border: 2px dashed #c4a676 !important; border-image: none !important; border-radius: 12px; box-shadow: none; }
body .overlay.fm .fm-cc .fm-cc-grid button.fm-cc-off small, body .overlay.fm .fm-cc .fm-cc-grid button.fm-cc-off .fm-cc-l { color: #5a4528 !important; text-shadow: none !important; }
body .overlay.fm .fm-cc .fm-cc-grid button.fm-cc-off .gi { opacity: .75; }
body .overlay.fm .fm-cc .fm-cc-pic { background: radial-gradient(circle at 50% 38%, #fff 0, #fff4dc 60%, #f2d6a0 100%); }
body .overlay.fm .fm-cc button.fm-cc-more { display: inline-flex; align-items: center; min-height: 32px !important; margin: 3px 0; padding: 0 12px !important; border: 2px solid #d8b47c !important; border-image: none !important;
  border-radius: 999px; background: #fff6e2 !important; color: #7a5a38 !important; text-shadow: none !important; font-size: 13px !important; font-weight: 600; box-shadow: none; }
body .overlay.fm .fm-cc .fm-cc-st .fm-cc-stat { opacity: 1; color: #6a4a2a; font-size: 13px; background: #fff6e2; border-radius: 8px; padding: 2px 8px; margin: 2px 0; }
body .overlay.fm.fm-cc-sheet .fm-cc .fm-cc-grid button .fm-cc-l { font-size: 14px; } body .overlay.fm.fm-cc-sheet .fm-cc .fm-cc-grid button { min-height: 52px !important; }

/* ---------- #16 Lv30 menus (fish job, ranger hut, orchard shop): 60 px portraits on a disc, 12.5 px text, small inline gear icons,
   chip buttons for the gardener's fish ---------- */
.overlay.fm .fm-row:has(> .fm-ic > .fm-wic) { grid-template-columns: 66px minmax(0, 1fr) auto; }
.overlay.fm .fm-row > .fm-ic:has(> .fm-wic) { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 0, #fff3d6 55%, #f2d6a0 100%); box-shadow: inset 0 -2px 0 #e2c08a, 0 1px 2px #0002; }
.overlay.fm .fm-row > .fm-ic > .fm-wic { width: 56px !important; height: 56px !important; object-fit: contain; }
.overlay.fm .fm-row .fm-qt .fm-wic { width: 26px !important; height: 26px !important; vertical-align: -7px; }
.overlay.fm .fm-row .fm-qt > small { font-size: 12.5px; line-height: 1.5; }
.overlay.fm .fm-row .fm-qt > span:first-child { font-size: 15px; font-weight: 700; }
.overlay.fm .fm-prefchips { margin: 6px 0 2px; justify-content: flex-start; flex-wrap: wrap; }
body .overlay.fm .ov-card .fm-prefchips button { min-height: 40px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: #5a3a1a; text-shadow: none; border: 2px solid #e2c08a !important;
  border-image: none !important; border-radius: 999px; background: #fff8ea; box-shadow: 0 2px 0 #d8b47c; }
body .overlay.fm .ov-card .fm-prefchips button.pri { color: #fff; background: linear-gradient(#ffa6c8, #ec6a98); border-color: #fff !important; box-shadow: 0 0 0 2px #d8507e, 0 2px 0 #b03a66;
  text-shadow: 0 1px 0 #a03060; }
body .overlay.fm .ov-card .fm-prefchips button:disabled { opacity: .55; filter: grayscale(.4); }

/* ---------- #19 short phone screens (landscape 812×375 and the turned portrait page): the volume card, the first creator and
   the settings list fit without scrolling to their buttons ---------- */
@media (max-height: 460px) {
  .overlay .ov-card.fm-vol .fm-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .overlay .ov-card.fm-vol .fm-volrow { grid-template-columns: 34px minmax(0, 1fr); padding: 3px 6px; gap: 4px; }
  .overlay .ov-card.fm-vol .fm-volrow .fm-ic .gi { height: 26px; }
  body .overlay .ov-card.fm-vol .fm-volrow > .fm-ic { width: 34px !important; height: 34px !important; }   /* the 46 px disc ran under the label */
  .overlay .ov-card.fm-vol .fm-qs + .ov-diff { position: sticky; bottom: -6px; z-index: 2; margin: 6px 0 0; padding-top: 4px; background: linear-gradient(#fff4dc00, #fff4dc 35%); }
  .overlay .ov-card.fm-vol .ov-diff { margin: 4px 0 0; gap: 6px; } .overlay .ov-card.fm-vol .ov-diff button { min-height: 44px; padding: 0 10px; font-size: 14px; }
  body .cr-ov .cr-stage { max-height: 140px; }
  body .cr-ov .ov-card button.cr-card { min-height: 62px; gap: 1px; }
  body .cr-ov .ov-card button.cr-card canvas { width: 44px; height: 44px; }
  body .cr-ov .ov-card button.cr-card b { font-size: 13px; } body .cr-ov .ov-card button.cr-card small { font-size: 10.5px; line-height: 1.15; }
  /* lead review 2026-10-27: "⭐ ใช้ตัวละครเดิม" broke onto two lines and pushed the skin swatches 13-19 px under the pane's fold (640×360,
     667×375, 568×320): one line, a smaller portrait and tighter headings — the swatches (still 44 px) show without scrolling */
  body .cr-ov .ov-card button.cr-card b { font-size: 12px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body .cr-ov .ov-card button.cr-card canvas { width: 40px; height: 40px; } body .cr-ov .cr-pane h3 { margin: 2px 0 1px; }
  .overlay.fm .fm-mgames { gap: 8px; } body .overlay.fm .ov-card button.fm-mgame > img:first-child { height: 96px; aspect-ratio: auto; }
  body .overlay.fm .ov-card button.fm-mgame b { font-size: 15px; } body .overlay.fm .ov-card button.fm-mgame small { font-size: 11px; }
  body .overlay.fm .ov-card button.fm-stmode { min-height: 70px; padding: 4px 10px; } body .overlay.fm .ov-card button.fm-stmode img { width: 66px; height: 56px; }
  .overlay.fm .fm-mdiff { margin: 2px auto 6px; } .overlay.fm .fm-sthint span { font-size: 12px; padding: 2px 8px; }
  body .cr-ov .cr-name input { font-size: 16px; padding: 4px 10px; }
  body .overlay.fm:not(.fm-title) .fm-menu:has(> button:nth-child(7)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body .overlay.fm:not(.fm-title) .fm-menu:has(> button:nth-child(7)) > button { min-height: 48px; padding: 4px 6px 6px; font-size: 14px; }
}
html.fm-rot .overlay .ov-card.fm-vol .fm-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html.fm-rot .overlay .ov-card.fm-vol .fm-volrow { grid-template-columns: 34px minmax(0, 1fr); padding: 3px 6px; gap: 4px; }
html.fm-rot body .overlay .ov-card.fm-vol .fm-volrow > .fm-ic { width: 34px !important; height: 34px !important; } html.fm-rot .overlay .ov-card.fm-vol .fm-volrow .fm-ic .gi { height: 26px; }
html.fm-rot .overlay .ov-card.fm-vol .fm-qs + .ov-diff { position: sticky; bottom: -6px; z-index: 2; margin: 6px 0 0; padding-top: 4px; background: linear-gradient(#fff4dc00, #fff4dc 35%); }
html.fm-rot .overlay .ov-card.fm-vol .ov-diff button { min-height: 44px; padding: 0 10px; font-size: 14px; }
html.fm-rot body .cr-ov .cr-stage { max-height: 140px; }
html.fm-rot body .cr-ov .ov-card button.cr-card { min-height: 62px; gap: 1px; }
html.fm-rot body .cr-ov .ov-card button.cr-card canvas { width: 44px; height: 44px; }
html.fm-rot body .cr-ov .ov-card button.cr-card b { font-size: 13px; } html.fm-rot body .cr-ov .ov-card button.cr-card small { font-size: 10.5px; line-height: 1.15; }
html.fm-rot body .cr-ov .ov-card button.cr-card b { font-size: 12px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* (lead review: skin swatches above the fold) */
html.fm-rot body .cr-ov .ov-card button.cr-card canvas { width: 40px; height: 40px; } html.fm-rot body .cr-ov .cr-pane h3 { margin: 2px 0 1px; }
html.fm-rot body .overlay.fm .ov-card button.fm-mgame > img:first-child { height: 96px; aspect-ratio: auto; }
html.fm-rot body .overlay.fm .ov-card button.fm-stmode { min-height: 70px; padding: 4px 10px; } html.fm-rot body .overlay.fm .ov-card button.fm-stmode img { width: 66px; height: 56px; }
html.fm-rot body .overlay.fm:not(.fm-title) .fm-menu:has(> button:nth-child(7)) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html.fm-rot body .overlay.fm:not(.fm-title) .fm-menu:has(> button:nth-child(7)) > button { min-height: 48px; padding: 4px 6px 6px; font-size: 14px; }

/* narrow desktop windows (not a turned phone): the 2-up / 3-up grids fold to fewer columns */
@media (max-width: 560px) {
  html:not(.fm-rot) .overlay.fm .fm-mgames { grid-template-columns: minmax(0, 1fr); }
  html:not(.fm-rot) .overlay.fm .fm-stmodes { grid-template-columns: minmax(0, 1fr); }
  html:not(.fm-rot) .overlay.fm .fm-stages:not(.fm-adv) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 4-stage chapters: 2 × 2, no lone boss tile */
}
/* the turned portrait page is 812 px wide even though the real screen is 375: keep the 4 stages of a chapter on one row */
html.fm-rot .overlay.fm .fm-stages:not(.fm-adv) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* a painted icon that lands straight inside a column .fm-qt (a menu wrote "name ⭐…" without a wrapper) must not stretch to the
   full row width */
.overlay.fm .fm-qt > img.gi, .fm-drawer .fm-qt > img.gi { align-self: flex-start; width: auto; }

/* short screens: thinner chapter strips so the stage tiles start higher */
@media (max-height: 460px) { .overlay.fm .fm-chap { min-height: 34px; margin: 6px 0 0; padding: 3px 10px; } .overlay.fm .fm-chap b { font-size: 14px; } .overlay.fm .fm-chap small { display: none; } }
html.fm-rot .overlay.fm .fm-chap { min-height: 34px; margin: 6px 0 0; padding: 3px 10px; } html.fm-rot .overlay.fm .fm-chap b { font-size: 14px; } html.fm-rot .overlay.fm .fm-chap small { display: none; }
.overlay.fm .fm-stages.fm-adv .fm-stage .fm-bossb, .overlay.fm .fm-stage .fm-bossb:only-child { width: 28px; height: 28px; top: -11px; right: 2px; }
@media (max-height: 460px) { body .overlay.fm .ov-card .fm-stage .fm-bossb { width: 26px; height: 26px; top: -9px; right: 2px; } }
html.fm-rot body .overlay.fm .ov-card .fm-stage .fm-bossb { width: 26px; height: 26px; top: -9px; right: 2px; }