/* [v1.57 monile] Ton île : l'écran reprend l'interface de la ferme (.ferme, .fe-*, js/ferme.css) ; ici, seulement ce qui est à elle
   (bouton de la ferme et de la carte de la mer, boutiques). Cadres pixel en box-shadow, comme le reste de la DA. */
.ferme.monile { background: #2F74C0; }
.ferme.monile .fe-title { cursor: pointer; }
.ferme .mo-ico { width: 14px; height: 14px; vertical-align: -2px; image-rendering: pixelated; }
.ferme .fe-bubble .mo-ico { width: 14px; height: 14px; }
.ferme .fe-b-head .mo-ico { width: 18px; height: 18px; }

/* le bouton « Ton île » dans la ferme : sous le bouton bateau (.fe-mer, iles.css) */
.ferme .fe-monile { position: absolute; right: 12px; top: calc(106px + env(safe-area-inset-top)); --pxbg: #4E9A3A; --pxhl: #7CC25A; --pxsh: #2E6A22; }
.ferme .fe-monile svg { width: 26px; height: 22px; }

/* le bouton sur la carte de la mer */
.mo-mer-btn { position: absolute; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 4; display: inline-flex; align-items: center; gap: 8px; }
.mo-mer-btn svg { width: 24px; height: 20px; }

/* ---------- les boutiques ---------- */
.ferme .mo-shop { max-width: 420px; }
.ferme .mo-soldes { display: flex; flex-wrap: wrap; gap: 6px; }
.ferme .mo-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 3px; font-size: 19px; line-height: 1; background: var(--cream); box-shadow: 0 -1px 0 0 var(--wood-0), 0 1px 0 0 var(--wood-0), -1px 0 0 0 var(--wood-0), 1px 0 0 0 var(--wood-0); font-variant-numeric: tabular-nums; }
.ferme .mo-chip b { font-weight: 400; }
.ferme .mo-chip .mon-ico, .ferme .mo-chip .mo-ico { width: 16px; height: 16px; }
.ferme .mo-chip.off { opacity: .45; }
.ferme .mo-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ferme .mo-tabs button { display: grid; justify-items: center; gap: 1px; padding: 4px 2px 5px; font-size: 14px; line-height: 1; background: var(--paper-2); color: var(--ink-muted); box-shadow: inset 0 -2px 0 var(--paper-3); min-height: 44px; }
.ferme .mo-tabs button span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.ferme .mo-tabs button .mo-ico { width: 18px; height: 18px; }
.ferme .mo-tabs button.on { background: var(--cream); color: var(--inkc); box-shadow: 0 0 0 2px var(--wood-0); }
.ferme .mo-tabs button.off { opacity: .55; }
.ferme .mo-liste { display: grid; gap: 8px; }
.ferme .mo-tout { text-align: center; }
.ferme .mo-verrou { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; background: var(--paper-2); text-align: center; }
.ferme .mo-verrou p { margin: 0; font-size: 19px; color: var(--ink-muted); line-height: 1.15; }
.ferme .mo-verrou .mo-ico.gros { width: 36px; height: 36px; opacity: .6; }
.ferme .mo-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ferme .mo-it { position: relative; display: grid; gap: 2px; align-content: start; padding: 6px 6px 8px; background: var(--cream); box-shadow: 0 0 0 2px var(--wood-0), inset 0 -2px 0 var(--paper-3); }
.ferme .mo-it.focus { box-shadow: 0 0 0 2px #B8862A, 0 0 0 4px #F6DC86; }
.ferme .mo-it canvas { width: 100%; aspect-ratio: 84 / 54; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--wood-1); }
.ferme .mo-it b { font-weight: 400; font-size: 20px; line-height: 1; margin-top: 3px; }
.ferme .mo-it p { margin: 0; font-family: var(--font-r); font-size-adjust: none; font-size: 13px; line-height: 1.25; color: var(--ink-muted); min-height: 2.5em; }
.ferme .mo-prix { display: flex; align-items: center; gap: 3px; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; }
.ferme .mo-prix .mon-ico, .ferme .mo-prix .mo-ico { width: 15px; height: 15px; }
.ferme .mo-manque { font-size: 14px; color: #A8322E; line-height: 1.1; min-height: 1.1em; }
.ferme .mo-it.owned { background: var(--paper-2); }
.ferme .mo-buy { justify-self: stretch; min-height: 40px; font-size: 20px; padding: 2px 8px 4px; background: #E8B640; box-shadow: 0 0 0 2px var(--wood-0), inset 0 -3px 0 #B8862A, inset 0 2px 0 #F6DC86; }
.ferme .mo-buy:active { transform: translateY(1px); }
.ferme .mo-buy[disabled] { background: var(--paper-3); color: var(--ink-muted); box-shadow: 0 0 0 2px var(--wood-1), inset 0 -3px 0 var(--paper-edge); cursor: default; }
.ferme .mo-buy.voir { background: #9DB8F2; box-shadow: 0 0 0 2px var(--wood-0), inset 0 -3px 0 #4F78E0, inset 0 2px 0 #C8D6F6; }
@media (max-width: 340px) { .ferme .mo-items { grid-template-columns: 1fr; } }