/* ======================================================================= * Farm game CSS (v2.0.2 — camera-follow viewport) * * Layout architecture: * .mg-farm-root * → header (currency / lifetime) * → .mg-farm-viewport (12×8 cells × 96 = 1152×768 native, overflow hidden, * fit-to-width scaled on mobile via JS transform) * → .mg-farm-scene (20×12 cells × 96 = 1920×1152 native, BIGGER than * viewport — translated by JS to camera-follow player) * → .mg-farm-scene-bg (full scene grass background, repeating) * → .mg-farm-scene-chrome (positioned: houses, trees, water) * → .mg-farm-scene-npc (positioned: shop, mail markers) * → .mg-farm-plot (5×5 plot grid at scene cells (8,5)..(12,9)) * → .mg-farm-player (animated player sprite, scene-absolute) * → .mg-farm-main (sidebar with action panel, shop btns, inventory) * → modal / toasts / footer * * Sprite scaling philosophy: * Native cell = 96 display px. Cup Nooble sprites come in two source * sizes: * - 16px tiles (grass, tilled-dirt, decorations) → 16 × 6 scale = 96. * Wait — 6× would look chunky. We use 16 × 3 = 48 was prior; for * this redesign keep cell at 96 by doubling the 48 manifest values. * Actually: use SPRITE_SCALE = 6 (16→96) so each native 16px tile * fills exactly one 96px cell. Verified crisp at integer scale. * - 48px character / tree frames → 48 × 2 = 96 display. * * image-rendering: pixelated keeps edges crisp at integer scale. * * @since 2.0.2 * ===================================================================== */ .mg-farm-root { --cell: 96px; --plot-cols: 6; --plot-rows: 4; --scene-cols: 20; --scene-rows: 16; --viewport-cols: 9; --viewport-rows: 6; /* v2.0.38 — wood palette. * * The farm root now sits on a darker walnut background instead of * the original cream `#faf7e8`. The wood-skinned panels and cards * (border-image PNGs from the Sprout Lands UI pack) stay honey-tan, * so the look reads as "lighter wood panels resting on a darker * wood floor" — matches the pixel-art world the player walks in. * * Token use: * --bg-root : outer root container only (darker walnut) * --bg-soft : cards inside modals (honey-cream, preserves * pre-2.0.38 card legibility — these sit over * an already-honey wood panel) * --bg-card : input fields, light pop-ups * --bg-deep : header strip + small accents (mid-walnut, ties * root and panels visually) */ --bg-root: #8b6f47; --bg-deep: #a5855c; --bg-soft: #f2e6c8; --bg-card: #ffffff; --border-warm: #5c4222; --border-soft: #a8835c; --accent: #6b8e23; --accent-dark: #4a6818; --text: #2b2014; --text-on-dark: #fff4d4; --text-muted: #6b5536; --text-muted-on-dark: #d9c294; box-sizing: border-box; max-width: 100%; margin: 0 auto; padding: 0.5rem; /* v2.0.24: the farm world is pixel-art and the UI is now wood-skinned, * so the text uses the bundled Cubic 11 (俐方體11號) pixel font — a * dot-matrix typeface with full Traditional-Chinese coverage (4800+ * chars), already loaded on the page via mg-core's @font-face. This * is the pixel FONT, not the dark "arcade theme" chrome — it completes * the farm's own look. Falls back to Noto Sans CJK TC / system sans * for any rare glyph the pixel font lacks. */ font-family: "Cubic 11", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK TC", sans-serif; color: var(--text); background: var(--bg-root); border-radius: 12px; border: 2px solid var(--border-warm); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18), inset 0 -2px 6px rgba(0, 0, 0, 0.25); /* v2.0.96 — block text selection + tap-highlight across the whole farm UI. Previously only .mg-farm-scene had this, so the action panel + sidebar + buttons would still trigger Firefox-mobile's text-selection highlight under sustained touch (e.g. holding to fish). Visible as a blue/teal tint across the page during the mini-game. */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .mg-farm-root *, .mg-farm-root *::before, .mg-farm-root *::after { box-sizing: inherit; } /* v2.0.282 — defensive: the user's site theme injects a global focus * outline (blue) with !important. Any focusable element inside the * scene (the scene itself + plot cells, both tabindex) would pick it * up, and since the scene fills the frame the blue hugged the whole * game UI. Neutralise plain :focus / :focus-within inside the scene * here; the scene + cell rules below restore an olive ring for * keyboard :focus-visible. Inputs/buttons keep their own rings. */ .mg-farm-scene:focus, .mg-farm-scene:focus-within, .mg-farm-scene *:focus { outline: none !important; box-shadow: none !important; } /* v2.0.283 — the blue ring the user kept seeing hugs the OUTERMOST box * (outside the brown chrome), and appears "when a button is pressed". * That is the site theme painting a :focus / :focus-within outline on * the farm ROOT + its viewport wrappers — NOT the scene (2.0.281/282 * only reset the scene, which is why it persisted). These container * elements should NEVER show a focus ring (they're layout wrappers, * not interactive controls). Hard-reset :focus AND :focus-within on * the whole wrapper chain. Interactive children (buttons, inputs, * cells) keep their own :focus-visible rings via the rules elsewhere. */ .mg-farm-root, .mg-farm-root:focus, .mg-farm-root:focus-within, .mg-farm-root:focus-visible, .mg-farm-viewport-outer, .mg-farm-viewport-outer:focus, .mg-farm-viewport-outer:focus-within, .mg-farm-viewport, .mg-farm-viewport:focus, .mg-farm-viewport:focus-within { outline: none !important; box-shadow: none !important; } /* The shortcode wraps the farm in .mg-frame — kill its focus ring too, * scoped to the farm so other games' frames are untouched. */ .mg-frame[data-mg-game="farm"]:focus, .mg-frame[data-mg-game="farm"]:focus-within, .mg-frame--ported:has(> .mg-farm-root):focus, .mg-frame--ported:has(> .mg-farm-root):focus-within { outline: none !important; box-shadow: none !important; } /* ---------- Header ---------- * * v2.0.38 — sits directly on the dark walnut root bg, so use the * light-on-dark text tokens here (not the default --text used inside * wood-skinned panels). */ .mg-farm-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0.6rem; margin-bottom: 0.6rem; /* v2.0.261 — Adopted from .mg-farm-visit-banner. User feedback: * 「我想用探訪別人時顯示的header的背景（有gradient這個）替換 * 自己農場時顯示的那個，這個好看 取代顯示菜幣的那個 background」 * — i.e. visit-mode banner's warm brown gradient reads better * than own-farm's flat --bg-deep dark walnut, so unify them. * * Three values lifted from .mg-farm-visit-banner verbatim: * - gradient background (150→120 warm brown, 95% opacity * so subtle root bg shows through) * - 2px (was 1px) warm border, slightly more presence * - 0.25 / 0.2 highlight+shadow (was 0.20 / 0.15) * * Padding / margin / radius / flex layout unchanged — header * carries more children (currency + lifetime + rename + sfx + * music) than the slim banner, so its sizing rules stay. */ background: linear-gradient(180deg, rgba(150, 110, 60, 0.95) 0%, rgba(120, 86, 44, 0.95) 100%); border: 2px solid var(--border-warm); border-radius: 6px; color: var(--text-on-dark); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.25), 0 1px 0 rgba(0, 0, 0, 0.2); } .mg-farm-currency { display: flex; align-items: center; gap: 0.35rem; font-size: 1.05rem; font-weight: 600; color: var(--text-on-dark); } .mg-farm-coin-icon { width: 20px; height: 20px; image-rendering: pixelated; } .mg-farm-currency-amount { font-variant-numeric: tabular-nums; min-width: 3ch; } .mg-farm-currency-name { color: var(--text-muted-on-dark); font-weight: 400; font-size: 0.95rem; } .mg-farm-rename-btn { /* v2.0.42 — same site-theme-hijack lockdown as .mg-farm-rename-input * (see 2.0.41 notes there). Site themes inject e.g. * button:hover { border-color: red !important; background: red ... } * which won was overriding the soft cream hover ring. Defence: * border:0 !important kills any colour they paint, the "border" is * drawn via inset box-shadow (much rarer to override), and all the * paint-related properties get explicit !important values to win * cascade against site rules of any specificity. * * The :hover ring is now box-shadow inset on top of the base ring * so hover deepens the cream tone without ever exposing a real * border for the site theme to colour. */ background: rgba(255, 244, 212, 0.10) !important; border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.35); border-radius: 4px; width: 22px; height: 22px; line-height: 1; cursor: pointer; padding: 0; font-size: 0.85rem; color: var(--text-on-dark) !important; -webkit-text-fill-color: var(--text-on-dark); transition: background 0.15s, box-shadow 0.15s; } .mg-farm-root .mg-farm-rename-btn:hover, .mg-farm-root .mg-farm-rename-btn:focus, .mg-farm-root .mg-farm-rename-btn:focus-visible, .mg-farm-root .mg-farm-rename-btn:active { background: rgba(255, 244, 212, 0.22) !important; border: 0 !important; outline: 0 !important; color: var(--text-on-dark) !important; -webkit-text-fill-color: var(--text-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.55) !important; } .mg-farm-lifetime { font-size: 0.85rem; color: var(--text-muted-on-dark); } .mg-farm-lifetime-amount { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-on-dark); } /* v2.0.134 — SFX on/off toggle (header ♪). Same site-theme lockdown as * the rename button so injected `button{}` rules can't recolour it. * .is-off dims the glyph and strikes a line through it. * v2.0.233 — character ♪ replaced by * (pixel art 8×12). Padding adjusted so the icon centers in 24×24. */ .mg-farm-sfx-toggle, .mg-farm-music-toggle { background: rgba(255, 244, 212, 0.10) !important; border: 0 !important; outline: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.35); border-radius: 4px; width: 24px; height: 24px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-on-dark) !important; -webkit-text-fill-color: var(--text-on-dark); position: relative; transition: background 0.15s, box-shadow 0.15s, opacity 0.15s; } .mg-farm-sfx-toggle .mg-ic-note { width: 10px; height: 14px; margin: 0; /* Tint the note to match the header text colour by recolouring * via filter (the source PNG is dark brown so it'd be invisible * on a dark header). brightness inverts to near-white. */ filter: brightness(0) invert(0.93) sepia(0.15); } /* v2.0.238 — header music (農場電台) toggle, sits to the LEFT of the * SFX toggle. Same wood-bar chrome as .mg-farm-sfx-toggle (grouped * above); only the icon differs — two eighth notes (♫) vs the single * ♪ used for SFX. Same near-white tint so both match the header text. */ .mg-farm-music-toggle .mg-ic-note2 { width: 14px; height: 14px; margin: 0; filter: brightness(0) invert(0.93) sepia(0.15); } /* v2.0.240 — group the two header toggles so the header's * justify-content:space-between treats them as ONE right-aligned unit * (previously they were separate flex children and got spread apart, * leaving a big empty gap between ♫ and ♪). Inside, a tight 4px gap * keeps them reading as a button pair. */ .mg-farm-header-toggles { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; } .mg-farm-root .mg-farm-sfx-toggle:hover, .mg-farm-root .mg-farm-sfx-toggle:focus, .mg-farm-root .mg-farm-sfx-toggle:focus-visible, .mg-farm-root .mg-farm-sfx-toggle:active, .mg-farm-root .mg-farm-music-toggle:hover, .mg-farm-root .mg-farm-music-toggle:focus, .mg-farm-root .mg-farm-music-toggle:focus-visible, .mg-farm-root .mg-farm-music-toggle:active { background: rgba(255, 244, 212, 0.22) !important; border: 0 !important; outline: 0 !important; color: var(--text-on-dark) !important; -webkit-text-fill-color: var(--text-on-dark); box-shadow: inset 0 0 0 1px rgba(255, 244, 212, 0.55) !important; } .mg-farm-sfx-toggle.is-off, .mg-farm-music-toggle.is-off { opacity: 0.45; } .mg-farm-sfx-toggle.is-off::after, .mg-farm-music-toggle.is-off::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: var(--text-on-dark); transform: rotate(-20deg); transform-origin: center; pointer-events: none; } /* v2.0.135 — the farm now has its own ♪ SFX toggle in the header, so * the shared framework sound button (class-mg-shortcode renders a * .mg-sound-toggle into every .mg-frame) is redundant here. Hide it * for the farm ONLY — scoped via the frame's data-mg-game so every * other game keeps its button untouched. !important is required to * beat core.css's `display: inline-flex !important` base rule. The * music toggle is left alone (not rendered for farm anyway, and is * reserved for the upcoming in-farm music player). */ .mg-frame[data-mg-game="farm"] .mg-sound-toggle { display: none !important; } /* ===== v2.0.136 — in-farm radio sprite + music player ===== */ /* CSS-drawn pixel radio sitting in the scene (swap for a PNG later). * v2.0.139 — the v2.0.138 fix was wrong: `.mg-farm-radio` and * `.mg-farm-scene-chrome > *` (which sets pointer-events: none on chrome * children) are tied at specificity (0,1,0), and the chrome rule comes * later in source so it wins. Bumping to a descendant-with-child * selector below brings my rule to (0,2,0) and cleanly out-specifies * the chrome rule. */ .mg-farm-radio { cursor: pointer; } .mg-farm-scene-chrome > .mg-farm-radio { pointer-events: auto; } /* v2.0.202 — animal sprites (cow, chickens) need direct click-receive too. * Without this they inherit `pointer-events: none` from `.mg-farm-scene-chrome > *`, * so clicks PASS THROUGH the visible sprite, fall to the empty-scene-click * fallback (pixel÷cell math), then route via player-arrival-adjacency. That * indirect path mis-fires constantly: * - cow is 2×2 sprite; sub-pixel + camera-transform jitter on the upper * half can compute a cell coord ABOVE the cow → adjacent chicken's * slot opens instead. * - chicken wanders; click on a chicken's current visual cell ≠ chicken's * SLOT cell, so adjacency check finds the wrong slot. * Direct pointer-events:auto routes the click straight to the sprite element; * `closest('[data-mg-animal-slot]')` resolves to the right slot id; click * handler calls walkTo(slot.x, slot.y) — exact match, no cell math involved. * Same specificity bump as the .mg-farm-radio rule above (descendant-with- * child selector beats the chrome rule). */ .mg-farm-scene-chrome > [data-mg-animal-slot] { pointer-events: auto; cursor: pointer; } .mg-farm-radio .mg-farm-radio-body { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 60%; background: #8a5a30; border: 2px solid #5a3d24; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(255, 235, 200, 0.25), inset 0 -3px 4px rgba(74, 49, 32, 0.40); image-rendering: pixelated; } .mg-farm-radio .mg-farm-radio-speaker { position: absolute; left: 12%; top: 24%; width: 40%; height: 52%; border-radius: 50%; background: #3b2814; box-shadow: inset 0 0 0 2px #6e4d30; } .mg-farm-radio .mg-farm-radio-knobs { position: absolute; right: 12%; top: 22%; display: flex; flex-direction: column; gap: 5px; } .mg-farm-radio .mg-farm-radio-knobs i { width: 7px; height: 7px; border-radius: 50%; background: #f3d9a8; box-shadow: inset 0 -1px 0 rgba(74, 49, 32, 0.5); } .mg-farm-radio .mg-farm-radio-note { /* v2.0.233 — was font-character ♪; now a small pixel-art sprite * (note.png 8×12) sized down to 6×9 to fit the tiny radio body. * filter recolours the dark-brown source to the warm cream that * used to come from `color: #f3d9a8;`. */ position: absolute; right: 13%; bottom: 10%; width: 6px; height: 9px; background-image: url("assets/ui/emoji/note.png"); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; filter: brightness(0) invert(0.93) sepia(0.40) hue-rotate(-15deg) saturate(2); opacity: 0.35; } .mg-farm-radio .mg-farm-radio-ant { position: absolute; right: 22%; top: -30%; width: 2px; height: 32%; background: #5a3d24; transform: rotate(22deg); transform-origin: bottom; } @keyframes mg-farm-radio-pulse { 0%, 100% { opacity: 0.55; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* v2.0.137 — when music is playing, the ♪ note brightens + pulses, and a * subtle sound wave ring expands out of the speaker. When music is paused * the radio sits calm (no animation), so the in-scene sprite acts as an * ambient "is music on?" indicator even with the player popup closed. */ .mg-farm-radio.mg-is-playing .mg-farm-radio-note { opacity: 1; animation: mg-farm-radio-pulse 1.8s ease-in-out infinite; } .mg-farm-radio.mg-is-playing::before { content: ""; position: absolute; left: 22%; top: 38%; width: 22%; height: 22%; border-radius: 50%; border: 1.5px solid rgba(243, 217, 168, 0); pointer-events: none; animation: mg-farm-radio-wave 1.8s ease-out infinite; } @keyframes mg-farm-radio-wave { 0% { transform: scale(0.5); border-color: rgba(243, 217, 168, 0.85); opacity: 1; } 100% { transform: scale(2.6); border-color: rgba(243, 217, 168, 0); opacity: 0; } } .mg-farm-radio:hover .mg-farm-radio-body, .mg-farm-radio:focus-visible .mg-farm-radio-body { box-shadow: inset 0 2px 0 rgba(255, 235, 200, 0.35), 0 0 0 2px rgba(255, 235, 200, 0.55); } /* Music player (rendered inside the wood modal). */ /* v2.0.148 — 2-column grid: playlist (left, inset/recessed) | player (right, * with raised now-playing card). Foot spans both columns at the bottom. * Right column slightly wider (1.3fr) so the now-playing name + controls * don't crowd. min-width bumped from 260 → 300 to keep both columns usable * on the narrowest phones; the modal already centres + shrinks gracefully. */ .mg-farm-mp { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(140px, 1.3fr); gap: 12px; color: #5a3d24; min-width: 300px; } /* Left column — playlist container with INSET/RECESSED look for layered * depth (sits "into" the modal). Combination of dark inset on top-left * + warm highlight on bottom-right reads as a carved-out panel in wood. */ .mg-farm-mp-left { background: rgba(70, 50, 30, 0.13); border-radius: 6px; padding: 6px 4px; box-shadow: inset 0 1px 2px rgba(74, 49, 32, 0.30), inset 0 -1px 0 rgba(255, 235, 200, 0.20); } /* Right column — vertical stack of now-playing card + controls + volume. * No background of its own (sits on the modal); the .mg-farm-mp-now child * inside is the raised element that anchors visual hierarchy. */ .mg-farm-mp-right { display: flex; flex-direction: column; gap: 8px; } .mg-farm-mp-now { /* v2.0.148 — promoted from a flat tinted strip to a RAISED card. * v2.0.234 — replaced the gradient + soft shadow stack with a * flat-2-color pixel-style: solid warm tint + 1px pixel border * (no border-radius — sharp corners matching the rest of the * pixel UI), and a 1px hard inset highlight instead of the * earlier blurred drop shadow. Reads as a wooden plank label. */ display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #e8d4a8; border: 1px solid #4a3120; box-shadow: inset 0 1px 0 #f7ecd5, inset 0 -1px 0 #a08055; } /* v2.0.137 — small spinning vinyl disc on the left of the now-playing row. * v2.0.234 — replaced the multi-stop radial gradient (read as smooth/AA * vs the rest of the pixel UI) with vinyl.png, a hand-painted 13×13 * pixel-art disc. CSS spin animation still applies; on a small element * the rotation reads as "spinning" without obvious anti-aliasing because * the body is rotationally symmetric — only the off-centre highlight * notch sells the motion. */ .mg-farm-mp-vinyl { width: 26px; height: 26px; flex: 0 0 auto; background-image: url("assets/ui/vinyl.png"); background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; } .mg-farm-mp-vinyl.is-playing { animation: mg-farm-mp-vinyl-spin 3s linear infinite; } @keyframes mg-farm-mp-vinyl-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mg-farm-mp-nowname { font-size: 0.95rem; font-weight: 600; color: #3b2814; flex: 1 1 auto; } .mg-farm-mp-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; } .mg-farm-mp-eq i { width: 3px; height: 4px; background: #5a3d24; } .mg-farm-mp-eq.is-playing i { animation: mg-farm-mp-eq 0.9s ease-in-out infinite; } .mg-farm-mp-eq.is-playing i:nth-child(2) { animation-delay: 0.3s; } .mg-farm-mp-eq.is-playing i:nth-child(3) { animation-delay: 0.6s; } @keyframes mg-farm-mp-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } } .mg-farm-mp-ctrls { display: flex; justify-content: center; gap: 8px; } .mg-farm-mp-btn { width: 36px; height: 26px; cursor: pointer; background: none; padding: 0; border: 6px solid transparent; border-image: url("assets/ui/btn.png") 6 6 8 6 fill / 6px 6px 8px 6px / 0 stretch; display: inline-flex; align-items: center; justify-content: center; image-rendering: pixelated; } /* v2.0.149 — control icons rewritten as true pixel-art via SVG mask * (7×7 grid, shape-rendering: crispEdges). Pre-2.0.149 they were CSS * border-triangles which give smooth anti-aliased edges that clash with * the pixel-art UI. Now each icon is a stepped grid of 1×1 blocks * masked over a solid fill (#5a3d24 = wood brown). Layouts: * * Play (▶) Pause (||) Prev (|◀) Next (▶|) * █······· ·██·██· █····█· █·····█ * ██······ ·██·██· █···██· ██····█ * ███····· ·██·██· █··███· ███···█ * ████···· ·██·██· █·████· ████··█ * ███····· ·██·██· █··███· ███···█ * ██······ ·██·██· █···██· ██····█ * █······· ·██·██· █····█· █·····█ */ .mg-farm-mp-ico-play, .mg-farm-mp-ico-pause, .mg-farm-mp-ico-prev, .mg-farm-mp-ico-next { display: inline-block; width: 14px; height: 14px; background-color: #5a3d24; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* v2.0.161 — play triangle optically centered. A right-pointing triangle's * visual mass sits on its (left) base; drawn at x=0 its centroid was ~1.38 in * the 7-wide grid while the button centers the viewBox at 3.5 → looked shifted * left. Pause (symmetric) was unaffected. Nudged +1px: centroid ~2.38 — leaves * a touch more breathing room on the right (preferred over +2's tight apex). * Stays on the integer pixel grid so crispEdges stays crisp (no transform blur). */ .mg-farm-mp-ico-play { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .mg-farm-mp-ico-pause { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .mg-farm-mp-ico-prev { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .mg-farm-mp-ico-next { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } /* v2.0.137 — wood-grain horizontal volume slider. Custom-styled native * so we get free keyboard + drag + a11y. v2.0.234 — * gradients on track + radial thumb gone; replaced with 2-color flat * pixel-stepped wood (darker plank top edge + main plank body) and a * square pixel-wood thumb. Sharp corners, no border-radius, no blur * shadows — matches the rest of the pixel UI. */ .mg-farm-mp-vol { display: flex; align-items: center; gap: 10px; margin: 0 2px; } /* v2.0.148 — .mg-farm-mp-vol-ico rule removed; the ♪ glyph in front of * the slider was removed from HTML (clashed with pixel art). Slider * alone is self-explanatory in context. */ .mg-farm-mp-vol-slider { flex: 1 1 auto; height: 10px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; background: #6e4d30; border: 1px solid #4a3120; box-shadow: inset 0 1px 0 #8a5a30, inset 0 -1px 0 #4a3120; outline: none; cursor: pointer; image-rendering: pixelated; } .mg-farm-mp-vol-slider:focus-visible { box-shadow: inset 0 1px 0 #8a5a30, inset 0 -1px 0 #4a3120, 0 0 0 2px #f7ecd5; } .mg-farm-mp-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 16px; background: #c89060; border: 1px solid #4a3120; box-shadow: inset 0 1px 0 #e0b485, inset 0 -1px 0 #6e4d30; cursor: grab; } .mg-farm-mp-vol-slider::-webkit-slider-thumb:active { cursor: grabbing; } .mg-farm-mp-vol-slider::-moz-range-thumb { width: 12px; height: 16px; background: #c89060; border: 1px solid #4a3120; box-shadow: inset 0 1px 0 #e0b485, inset 0 -1px 0 #6e4d30; cursor: grab; } .mg-farm-mp-list { display: flex; flex-direction: column; gap: 1px; } .mg-farm-mp-song { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 5px; font-size: 0.9rem; cursor: pointer; } .mg-farm-mp-song:hover { background: rgba(120, 86, 45, 0.10); } .mg-farm-mp-song.on { /* v2.0.148 — left wood-bar inset replaces the right-side ♪ glyph * as the "currently playing" indicator. 3px inset shadow on the * left edge reads as a wood accent rail, consistent with how DAWs * highlight the active track. ♪ HTML span deleted from JS render. */ background: rgba(120, 86, 45, 0.22); font-weight: 600; color: #3b2814; box-shadow: inset 3px 0 0 #8a5a30; } /* peg dot — matches the v2.0.133 wood-rivet look */ .mg-farm-mp-peg { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle at 40% 35%, #6e4d30 0%, #4a3120 58%, rgba(74, 49, 32, 0) 66%); } .mg-farm-mp-song.on .mg-farm-mp-peg { box-shadow: 0 0 0 2px rgba(110, 77, 48, 0.40); } .mg-farm-mp-songname { flex: 1 1 auto; } /* v2.0.148 — .mg-farm-mp-playing + mg-farm-mp-row-pulse keyframes * removed. Indicator is now the left wood-bar inset shadow on * .mg-farm-mp-song.on (above). */ .mg-farm-mp-foot { grid-column: 1 / -1; /* span both columns at the bottom of the grid */ margin-top: 4px; font-size: 0.75rem; color: #9a7a4f; text-align: center; } /* ---------- Viewport + Scene ---------- * * The viewport is a fixed-size box (12×8 cells × 96px = 1152×768 native); * JS sets `transform: scale()` on the wrapper to fit it to the * available container width, with transform-origin top-left so the * scaled viewport occupies the same top-left position. * * Aspect-ratio reservation: the wrapper carries `aspect-ratio: 12/8` so * the surrounding layout reserves the correct vertical space even * before JS scales it. */ .mg-farm-viewport-outer { position: relative; width: 100%; max-width: calc(var(--viewport-cols) * var(--cell)); aspect-ratio: var(--viewport-cols) / var(--viewport-rows); margin: 0 auto 0.6rem; overflow: hidden; border-radius: 6px; /* v2.0.186 — border colour follows the active layout's accent (see * LAYOUT_PICKER_HINT in farm.js, mirrored onto --viewport-accent by * applyViewportAccent()). Smooth crossfade on layout swap. */ box-shadow: 0 0 0 2px var(--viewport-accent, #6a9050); transition: box-shadow 1.2s ease-in-out; } .mg-farm-viewport { position: absolute; inset: 0; width: calc(var(--viewport-cols) * var(--cell)); height: calc(var(--viewport-rows) * var(--cell)); overflow: hidden; /* JS-set: transform: scale(); transform-origin: 0 0 */ transform-origin: 0 0; background: #93c477; image-rendering: pixelated; image-rendering: -moz-crisp-edges; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; } .mg-farm-scene { position: absolute; width: calc(var(--scene-cols) * var(--cell)); height: calc(var(--scene-rows) * var(--cell)); /* JS-set: transform: translate(-cameraX, -cameraY) */ transform: translate(0, 0); transition: transform 0.18s linear; image-rendering: inherit; } /* v2.0.281 — the scene + cells carry tabindex for keyboard play, so * the browser draws its DEFAULT focus ring (blue on Chromium/Android) * around them — and because the scene fills the frame, that blue ring * hugged the whole game UI on tap/click (user screenshot). * v2.0.282 — the user's site theme also injects a global focus * outline (same class of attack as its button:hover{...red} rule), * which has !important and beat the plain `outline:none`. Harden with * !important + cover :focus-within (site themes often target the * focusable ancestor). Only :focus-visible (keyboard nav) shows a ring * — in the farm olive, never the browser/site blue. */ .mg-farm-scene:focus, .mg-farm-scene:focus-within { outline: none !important; box-shadow: none !important; } .mg-farm-scene:focus-visible { outline: 3px solid var(--accent, #6b8e23) !important; outline-offset: -3px; } .mg-farm-scene > * { position: absolute; image-rendering: inherit; } .mg-farm-scene-bg { inset: 0; /* v2.0.4: grass.png is now a single 16×16 PNG of pure green grass (extracted from Premium pack's Grass_tiles_v2_Mid.png). background-size = cell px → each repeat is exactly one cell. background-repeat tiles it across the full scene. No offset math, no sheet leakage possible. */ background-image: url("assets/tiles/grass.png"); background-size: var(--cell) var(--cell); background-repeat: repeat; } /* Scene-positioned children use --x/--y/--w/--h (in cells) */ .mg-farm-scene-chrome > *, .mg-farm-scene-npc > *, .mg-farm-player { position: absolute; left: calc(var(--x, 0) * var(--cell)); top: calc(var(--y, 0) * var(--cell)); width: calc(var(--w, 1) * var(--cell)); height: calc(var(--h, 1) * var(--cell)); background-repeat: no-repeat; pointer-events: none; } .mg-farm-scene-npc > * { pointer-events: auto; cursor: pointer; transition: transform 0.15s; } /* v2.0.52 — live chickens. They glide between pen cells via a left/top transition (duration matches CHICKEN_WALK_MS in farm.js), and flip horizontally (transform: scaleX(-1)) to face their travel direction. transform is reserved for the flip only — position uses left/top — so the two never conflict. */ .mg-farm-chicken { transition: left 0.48s linear, top 0.48s linear; transform-origin: 50% 80%; will-change: left, top; } .mg-farm-scene-npc > *:hover { transform: scale(1.06); } /* v2.0.14: NPC indicator is a speech bubble (not a "!" badge). White rounded bubble with "…" inside + a little tail at the bottom, so it reads as "this NPC can talk / has a shop" rather than an alert. */ .mg-farm-scene-npc > *::after { content: '\2026'; /* … horizontal ellipsis = "talk to me" */ position: absolute; top: -1.5em; left: 50%; transform: translateX(-50%); min-width: 1.5em; height: 1.2em; padding: 0 0.25em; background: #fffdf5; border: 2px solid #4a3818; border-radius: 0.55em; color: #4a3818; font-weight: 700; font-size: 0.95em; line-height: 1.1; letter-spacing: 0.05em; text-align: center; image-rendering: auto; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); animation: mg-farm-bob 1.4s ease-in-out infinite; pointer-events: none; } /* Bubble tail — a small triangle pointing down from the bubble's bottom-left, drawn with a rotated square sharing the bubble's border. */ .mg-farm-scene-npc > *::before { content: ''; position: absolute; top: -0.55em; left: 50%; transform: translateX(-90%) rotate(45deg); width: 0.45em; height: 0.45em; background: #fffdf5; border-right: 2px solid #4a3818; border-bottom: 2px solid #4a3818; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10); animation: mg-farm-bob 1.4s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes mg-farm-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } } /* The tail bobs with the bubble but keeps its own rotate. */ @keyframes mg-farm-bob-tail { 0%, 100% { transform: translateX(-90%) rotate(45deg) translateY(0); } 50% { transform: translateX(-90%) rotate(45deg) translateY(-6px); } } .mg-farm-scene-npc > *::before { animation-name: mg-farm-bob-tail; } /* Disabled NPCs (e.g. Phase-2 mail, not yet interactive) show neither the speech bubble nor its tail — a bubble would imply you can talk. */ .mg-farm-scene-npc > .is-disabled::after, .mg-farm-scene-npc > .is-disabled::before { display: none; } /* ---------- Plot inside scene ---------- */ .mg-farm-plot { /* v2.0.54 — scattered blocks. The plot container now spans the whole scene; individual cells are absolutely placed at their scene coords (--cx / --cy, set by JS from each cell's relative data-x/data-y). The old single CSS-grid + one fence frame is gone — each cell gets its own thin wooden edge so the scattered 3×2 fields read as tilled patches. */ left: 0; top: 0; width: calc(var(--scene-cols) * var(--cell)); height: calc(var(--scene-rows) * var(--cell)); z-index: 5; } .mg-farm-cell { position: absolute; left: calc(var(--cx, 0) * var(--cell)); top: calc(var(--cy, 0) * var(--cell)); width: var(--cell); height: var(--cell); background-repeat: no-repeat; background-position: center; background-size: var(--cell) var(--cell); image-rendering: pixelated; cursor: pointer; user-select: none; transition: filter 0.1s ease-out; } .mg-farm-cell:hover { filter: brightness(1.1); } /* v2.0.281/282 — same as the scene: kill the default/site-theme focus * ring on tap/click (with !important to beat the site theme's global * focus outline), keep an olive ring only for keyboard :focus-visible. */ .mg-farm-cell:focus, .mg-farm-cell:focus-within { outline: none !important; box-shadow: none !important; } .mg-farm-cell:focus-visible { outline: 3px solid var(--accent, #6b8e23) !important; outline-offset: -3px; } .mg-farm-cell.is-locked { cursor: not-allowed; } .mg-farm-cell.is-locked::after { /* v2.0.147 — switched from self-drawn lock.png to Sprout Lands' * official close.png (X). Matches the `.mg-ic-lock` swap in * v2.0.146; "X over a darkened cell" reads as "denied / not yours * yet" consistently across the whole UI (locked seeds, locked * trees, locked plot cells). */ content: ""; position: absolute; inset: 0; background: rgba(80, 60, 40, 0.55) url("assets/ui/emoji/close.png") center / 38% no-repeat; image-rendering: pixelated; } /* v2.0.53 — unlocked but not yet tilled: bare ground (scene grass shows through) with a dashed brown outline + a small hoe hint so the player can see which cells still need hoeing before they can plant. */ .mg-farm-cell.is-untilled::after { /* v2.0.73/v2.0.75 — pixel hoe from the central emoji set. */ /* v2.0.94 — bumped from 35% to 60% so the hoe reads at a glance on mobile (a single ~16-18px cell needs a larger anchor than a desktop view). Keeping aspect via center. */ content: ""; position: absolute; inset: 0; background: url("assets/ui/emoji/hoe.png") center / 60% no-repeat; image-rendering: pixelated; border: 3px dashed rgba(120, 86, 50, 0.55); border-radius: 4px; opacity: 0.6; } .mg-farm-cell.is-untilled:hover::after { opacity: 0.9; } /* v2.0.54 — thin wooden edge on tilled soil so each scattered 3×2 field reads as a framed patch (the old single fence around the whole grid is gone now that blocks live in different parts of the farm). */ .mg-farm-cell.is-tilled { box-shadow: inset 0 0 0 2px rgba(107, 74, 42, 0.45); } /* v2.0.57 — block-tilling animation. Hoe swings once on the clicked cell; a brown puff fades across every cell in the 3×2 block (staggered ~70ms by JS via setTimeout). */ .mg-farm-till-hoe { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; pointer-events: none; z-index: 30; animation: mg-farm-hoe-swing 0.6s ease-out forwards; transform-origin: 30% 70%; } @keyframes mg-farm-hoe-swing { 0% { transform: rotate(-35deg) scale(1.2); opacity: 0; } 20% { transform: rotate(-35deg) scale(1.2); opacity: 1; } 55% { transform: rotate( 25deg) scale(1.1); opacity: 1; } 85% { transform: rotate( 10deg) scale(1); opacity: 0.7; } 100% { transform: rotate( 0deg) scale(0.9); opacity: 0; } } .mg-farm-till-puff { position: absolute; inset: 0; pointer-events: none; z-index: 25; background: radial-gradient(circle at 50% 60%, rgba(120, 85, 45, 0.85) 0%, rgba(120, 85, 45, 0.55) 35%, rgba(120, 85, 45, 0) 75%); border-radius: 50%; animation: mg-farm-puff 0.52s ease-out forwards; } @keyframes mg-farm-puff { 0% { transform: scale(0.3); opacity: 0; } 25% { transform: scale(1.0); opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } } /* v2.0.107 — water-puff: blue tinted variant of the dirt puff, spawned at the moment the player pours the watering can. */ .mg-farm-water-puff { position: absolute; inset: 0; pointer-events: none; z-index: 25; background: radial-gradient(circle at 50% 60%, rgba(120, 175, 220, 0.85) 0%, rgba(120, 175, 220, 0.55) 35%, rgba(120, 175, 220, 0) 75%); border-radius: 50%; animation: mg-farm-puff 0.50s ease-out forwards; } /* v2.0.121 — Loading indicator. Deferred 200ms (set via JS) so fast actions don't trigger a visible spinner flash. 3-dot bouncing animation in a wood-toned pill near the top-right of the scene. */ .mg-farm-loading { position: absolute; top: 10px; right: 10px; z-index: 90; display: none; align-items: center; gap: 4px; padding: 6px 10px; background: rgba(60, 36, 20, 0.72); border: 1.5px solid rgba(168, 130, 75, 0.6); border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); opacity: 0; transition: opacity 0.18s ease-out; pointer-events: none; } .mg-farm-loading.is-visible { display: flex; opacity: 1; } .mg-farm-loading-dot { width: 6px; height: 6px; background: #f5e8c8; border-radius: 50%; animation: mg-farm-loading-bounce 0.9s ease-in-out infinite; } .mg-farm-loading-dot:nth-child(2) { animation-delay: 0.15s; } .mg-farm-loading-dot:nth-child(3) { animation-delay: 0.30s; } @keyframes mg-farm-loading-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-5px); opacity: 1; } } /* v2.0.121 — Slow-network hint. Appears at 5s mark to reassure the player the action hasn't been dropped. Cream-paper card styled to match the wood theme. */ .mg-farm-slow-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 91; padding: 6px 14px; background: #f5e8c8; color: #5a4220; border: 1.5px solid #a8835c; border-radius: 8px; box-shadow: 0 2px 0 rgba(74, 50, 22, 0.18); font-size: 0.85rem; pointer-events: none; animation: mg-farm-slow-hint-fade 0.3s ease-out forwards; } @keyframes mg-farm-slow-hint-fade { 0% { opacity: 0; transform: translate(-50%, -8px); } 100% { opacity: 1; transform: translate(-50%, 0); } } /* v2.0.115 — Pouring watering can overlay. Uses 4 native artist- drawn pour poses from Sprout Lands' char_tools sheet (row 1), one per facing direction. v2.0.119 — 2-state animation: `.is-idle` shows the row-0 static can (raised, no water yet); `.is-pouring` swaps to the row-1 pouring can (with water drop) when the puff fires on target. */ .mg-farm-water-can { position: absolute; left: calc(var(--x, 0) * var(--cell)); top: calc(var(--y, 0) * var(--cell)); width: var(--cell); height: var(--cell); pointer-events: none; z-index: 12; background-repeat: no-repeat; image-rendering: pixelated; animation: mg-farm-can-fade 0.8s ease-out forwards; } /* DOWN: front-view, place below player */ .mg-farm-water-can--down.is-idle { background-image: url("assets/ui/watering_can_down_idle.png"); background-size: 30% auto; background-position: 50% 88%; } .mg-farm-water-can--down.is-pouring { background-image: url("assets/ui/watering_can_down.png"); background-size: 30% auto; background-position: 50% 92%; } /* UP: back-view, place above player */ .mg-farm-water-can--up.is-idle { background-image: url("assets/ui/watering_can_up_idle.png"); background-size: 30% auto; background-position: 50% 12%; } .mg-farm-water-can--up.is-pouring { background-image: url("assets/ui/watering_can_up.png"); background-size: 30% auto; background-position: 50% 8%; } /* RIGHT: side-view, place to player's right */ .mg-farm-water-can--right.is-idle { background-image: url("assets/ui/watering_can_right_idle.png"); background-size: 45% auto; background-position: 92% 55%; } .mg-farm-water-can--right.is-pouring { background-image: url("assets/ui/watering_can_right.png"); background-size: 50% auto; background-position: 95% 55%; } /* LEFT: side-view, place to player's left */ .mg-farm-water-can--left.is-idle { background-image: url("assets/ui/watering_can_left_idle.png"); background-size: 45% auto; background-position: 8% 55%; } .mg-farm-water-can--left.is-pouring { background-image: url("assets/ui/watering_can_left.png"); background-size: 50% auto; background-position: 5% 55%; } @keyframes mg-farm-can-fade { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } /* v2.0.230 — ripe indicator now uses the pixel-art sparkle.png (matches * the icon pack) instead of the Unicode ✨ which broke the pixel-art * look. Sized + animated identically. */ .mg-farm-cell.is-ripe::before { content: ""; position: absolute; top: 2px; right: 2px; width: 16px; height: 18px; background-image: url("assets/ui/emoji/sparkle.png"); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; animation: mg-farm-ripe-pulse 1.6s ease-in-out infinite; } @keyframes mg-farm-ripe-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } } /* v2.0.230 — watered indicator uses the pixel-art water_wave.png (same * sprite used for the watering action icon). Previously 💧 emoji. */ .mg-farm-cell.is-watered::after { content: ""; position: absolute; bottom: 2px; left: 2px; width: 14px; height: 16px; background-image: url("assets/ui/emoji/water_wave.png"); background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; opacity: 0.85; } .mg-farm-cell-timer { position: absolute; bottom: 0; left: 0; right: 0; /* v2.0.35: warm wood-brown ribbon (was flat black) to match the * pixel-wood UI theme; cream text keeps contrast on the brown. */ background: rgba(74, 51, 24, 0.82); color: #f7ecd5; font-size: 0.75rem; text-align: center; line-height: 1.2; padding: 2px 0; font-variant-numeric: tabular-nums; image-rendering: auto; } /* ---------- Player character ---------- * * v2.0.4: instead of one spritesheet + background-position to pick * the frame, each frame is its own 48×48 PNG file * (characters/avatar__.png, dir in down/up/left/right, * col 0..3 = walk cycle). JS swaps background-image directly via * updatePlayerSprite() — no offset math, no sheet leakage. * * Background-size: 100% 100% scales the 48-source frame to fill * the 96-display cell (2× scale, integer, crisp). */ .mg-farm-player { --x: 9; --y: 10; background-size: 100% 100%; background-repeat: no-repeat; /* background-image set by JS updatePlayerSprite() */ z-index: 10; transition: left 0.18s linear, top 0.18s linear; pointer-events: none; } /* ---------- Day/Night (applied to viewport so it tints everything) ---------- */ /* v2.0.179 — Filter moved from .mg-farm-viewport-outer to .mg-farm-viewport * so the new .mg-farm-scene-lights layer (sibling of viewport at z=1000) * can stay at full brightness. The viewport is the SCENE container — it * gets dimmed at night; lights are emitted ON TOP and cut through. */ .mg-farm-viewport-outer.is-day .mg-farm-viewport { filter: none; } .mg-farm-viewport-outer.is-dusk .mg-farm-viewport { filter: brightness(0.95) saturate(1.05); } .mg-farm-viewport-outer.is-night .mg-farm-viewport { filter: brightness(0.85) saturate(0.95); } .mg-farm-viewport-outer.is-dawn .mg-farm-viewport { filter: brightness(0.97) saturate(1.0); } .mg-farm-viewport { transition: filter 1.5s ease-in-out; } /* v2.0.31: time-of-day TINT via a translucent overlay instead of * hue-rotate (which spun the green grass to an ugly purple at night). * The overlay sits above the whole scene (isolation:isolate makes the * outer a stacking context so the high z-index beats the player/chrome), * pointer-events:none so clicks pass through. */ .mg-farm-viewport-outer { isolation: isolate; } .mg-farm-viewport-outer::after { content: ""; position: absolute; inset: 0; z-index: 900; pointer-events: none; opacity: 0; transition: opacity 1.5s ease-in-out, background-color 1.5s ease-in-out; background: transparent; } .mg-farm-viewport-outer.is-dusk::after { background: rgba(255, 132, 52, 0.14); opacity: 1; } /* warm sunset */ .mg-farm-viewport-outer.is-dawn::after { background: rgba(255, 198, 120, 0.10); opacity: 1; } /* soft dawn */ .mg-farm-viewport-outer.is-night::after { background: rgba(26, 38, 92, 0.26); opacity: 1; } /* moonlit blue */ /* ---------- Scene lights overlay (v2.0.179) ---------- */ /* Sibling of .mg-farm-viewport, ABOVE the night ::after tint (z=900). * Holds light-source pseudo-elements (campfire glow today, future: * lanterns, christmas-tree star). Two key behaviours: * 1. NOT inside .mg-farm-viewport → escapes the brightness filter, * so the warm glow stays vivid even at night. * 2. Mirrors the viewport's responsive scale (--viewport-scale set by * fitViewportToWidth) AND the scene's camera translate (--cam-x, * --cam-y set by updateCamera) so its children stay locked to scene * cells as the camera follows the player. Lights use the SAME * .mg-farm-chrome positioning (--x/--y/--w/--h in cells). */ .mg-farm-scene-lights { position: absolute; top: 0; left: 0; width: calc(var(--scene-cols) * var(--cell)); height: calc(var(--scene-rows) * var(--cell)); pointer-events: none; z-index: 1000; /* > 900 night ::after, > anything in viewport */ transform-origin: 0 0; transform: scale(var(--viewport-scale, 1)) translate(var(--cam-x, 0px), var(--cam-y, 0px)); transition: transform 0.18s linear; /* v2.0.184 — override the inherited `image-rendering: pixelated` * from .mg-farm-viewport-outer. That setting is correct for the * pixel-art sprites in the scene, but some browsers also apply it * to CSS radial gradients, producing blocky stepped edges on the * glow's low-alpha outer ring (which read as a square boundary). * Auto/smooth rendering restores the continuous gradient. */ image-rendering: auto; } .mg-farm-scene-lights > * { position: absolute; left: calc(var(--x, 0) * var(--cell)); top: calc(var(--y, 0) * var(--cell)); width: calc(var(--w, 1) * var(--cell)); height: calc(var(--h, 1) * var(--cell)); pointer-events: none; } /* v2.0.195 — Sakura petals layer. Mirrors scene-lights structure * (sibling of viewport, mirrors camera transform) but z-index 800, * BELOW the night ::after tint at z=900. Effect: petals get darkened * by night naturally — they're falling physical things, not glowing * light sources, so they should sit IN the scene rather than over it. */ .mg-farm-scene-petals { position: absolute; top: 0; left: 0; width: calc(var(--scene-cols) * var(--cell)); height: calc(var(--scene-rows) * var(--cell)); pointer-events: none; z-index: 800; /* < 900 night ::after — petals get dimmed at night */ transform-origin: 0 0; transform: scale(var(--viewport-scale, 1)) translate(var(--cam-x, 0px), var(--cam-y, 0px)); transition: transform 0.18s linear; image-rendering: auto; } /* Campfire glow — warm radial light that brightens surroundings, * dramatically at night, subtly in daylight. mix-blend-mode plus-lighter * = additive (per-channel sum), so it actually LIGHTS the scene rather * than just tinting it. Pseudo-element is 12 cells across (6-cell * radius). Centered slightly above cell-middle because the campfire * sprite is bottom-anchored — flame sits in the upper half. * * v2.0.182 — Two refinements after the v2.0.181 round felt unnatural: * 1. OUTER ALPHA BOOSTED. Mid/far stops (42% / 65% / 88%) were 0.14 * / 0.06 / 0.01 — at distance 4-5 cells from fire, plus-lighter * added barely-visible warm tint to objects like the big snowman. * Bumped to 0.22 / 0.13 / 0.04 — objects 4-5 cells out now read * as clearly lit. Center alpha (0.55) kept so sprite shows through. * 2. FLICKER REWRITTEN. v2.0.181 used ease-in-out + 2.7s/1.9s periods * = smooth breathing-UI feel, not fire. New design: LINEAR timing * + much faster periods (0.83s/0.59s) + irregular non-monotonic * keyframes = jagged jittery motion matching how flame light * actually behaves. Compounded by the sprite ANIMATION (see * DECOR_VARIANTS w_campfire.frames) on its own 130ms cycle — three * independent unsynced periods. * * v2.0.184 — `radial-gradient(circle at center, ...)`. * Previously `radial-gradient(circle, ...)` defaulted to ending-shape * `farthest-corner` — for a square 12-cell box, the gradient circle * stretched to the corners (~8.49 cells), so the cardinal box edges * were at gradient-position 70.7% with alpha still ~0.10 visible. The * corners showed faint warm color, making the overall light footprint * look like a square outline rather than a circle. Locking the gradient * to an explicit 6-cell radius decouples it from the box — outside that * circle is fully transparent regardless of box shape. */ .mg-farm-light--w_campfire::after { content: ""; position: absolute; left: 50%; top: 40%; width: calc(var(--cell) * 12); height: calc(var(--cell) * 12); transform: translate(-50%, -50%) scale(1); background: radial-gradient(circle calc(var(--cell) * 6) at center, rgba(255, 240, 180, 0.42) 0%, rgba(255, 220, 140, 0.38) 6%, rgba(255, 180, 90, 0.32) 14%, rgba(255, 140, 55, 0.24) 26%, rgba(255, 110, 35, 0.17) 42%, rgba(255, 90, 20, 0.10) 65%, rgba(255, 90, 20, 0.03) 88%, rgba(255, 90, 20, 0) 100%); mix-blend-mode: plus-lighter; opacity: 0; /* opacity transition for day-night fade, NOT animated by flicker * (flicker only touches transform + filter so the per-class opacity * stays authoritative). */ transition: opacity 1.5s ease-in-out; animation: mg-farm-fire-scale 3.5s linear infinite, mg-farm-fire-brightness 2.6s linear infinite; will-change: transform, filter, opacity; } /* v2.0.185 — Slowed again (2.3s → 3.5s) per user. 16 irregular keyframes * spread over 3.5s means each leg is ~220ms — visible but unhurried. * Amplitude (0.92 ↔ 1.10) unchanged. */ @keyframes mg-farm-fire-scale { 0% { transform: translate(-50%, -50%) scale(1.00); } 6% { transform: translate(-50%, -50%) scale(1.06); } 13% { transform: translate(-50%, -50%) scale(0.94); } 19% { transform: translate(-50%, -50%) scale(1.03); } 27% { transform: translate(-50%, -50%) scale(0.97); } 34% { transform: translate(-50%, -50%) scale(1.09); } 41% { transform: translate(-50%, -50%) scale(0.92); } 49% { transform: translate(-50%, -50%) scale(1.04); } 56% { transform: translate(-50%, -50%) scale(0.96); } 62% { transform: translate(-50%, -50%) scale(1.07); } 69% { transform: translate(-50%, -50%) scale(0.93); } 76% { transform: translate(-50%, -50%) scale(1.05); } 83% { transform: translate(-50%, -50%) scale(0.98); } 89% { transform: translate(-50%, -50%) scale(1.08); } 95% { transform: translate(-50%, -50%) scale(0.95); } 100% { transform: translate(-50%, -50%) scale(1.00); } } /* Brightness on its own slower (1.7s → 2.6s) co-prime period. * 14 keyframes, asymmetric (more bright peaks than dim troughs — real * fire spends more time bright than dark). LCM with scale (3.5s) is * 91s, plus the random-order sprite at 400ms = three layers that * never collectively repeat at perceptible scale. */ @keyframes mg-farm-fire-brightness { 0% { filter: brightness(1.00); } 7% { filter: brightness(1.10); } 15% { filter: brightness(0.90); } 22% { filter: brightness(1.14); } 29% { filter: brightness(0.95); } 37% { filter: brightness(1.08); } 44% { filter: brightness(0.86); } 52% { filter: brightness(1.16); } 59% { filter: brightness(0.93); } 67% { filter: brightness(1.11); } 74% { filter: brightness(0.97); } 82% { filter: brightness(1.06); } 91% { filter: brightness(0.89); } 100% { filter: brightness(1.00); } } /* v2.0.194 — Sakura falling petals. * * Lives in the same .mg-farm-scene-lights layer the campfire glow uses * (already z=1000 above the night tint, pointer-events:none, escapes * the day/night brightness/saturate filter so colour stays true). * Petals are spawned by initSakuraPetals() in JS when the active layout * is sakura, removed on layout-swap-away. * * Each petal: 6px sprite scaled to about 1/4 cell, absolutely positioned * in scene coords (so it drifts WITH the world as camera scrolls — looks * like petals are physically in the air over the farm). Random `left`, * `animation-duration`, `animation-delay` (negative so they start * mid-cycle on first paint — no all-petals-aligned wave). * * Animation: vertical fall from above scene-top to past scene-bottom * (~120% of scene-height), with a sinusoidal horizontal sway via a * second keyframe + rotate for tumbling. Opacity fades in at start, * fades out at end so spawn/despawn isn't a hard pop. * * Performance: ~10 petals × 1 CSS animation (transform + opacity, both * GPU-composited) = ~10 GPU layer composites. Negligible on any device * built after 2018. */ .mg-farm-petal { position: absolute; top: 0; width: calc(var(--cell) * 0.28); height: calc(var(--cell) * 0.28); background-image: url("assets/objects/sakura/petal.png"); background-size: contain; background-repeat: no-repeat; image-rendering: auto; /* override pixelated inheritance — small sprite scales smoothly */ opacity: 0; pointer-events: none; animation-name: mg-farm-petal-fall; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; } @keyframes mg-farm-petal-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: 0.85; } 25% { transform: translate(calc(var(--cell) * 0.6), calc(var(--scene-rows) * var(--cell) * 0.25)) rotate(90deg); } 50% { transform: translate(calc(var(--cell) * -0.4), calc(var(--scene-rows) * var(--cell) * 0.50)) rotate(180deg); } 75% { transform: translate(calc(var(--cell) * 0.7), calc(var(--scene-rows) * var(--cell) * 0.75)) rotate(270deg); } 92% { opacity: 0.7; } 100% { transform: translate(calc(var(--cell) * -0.3), calc(var(--scene-rows) * var(--cell) * 1.1)) rotate(360deg); opacity: 0; } } /* v2.0.195 added a CSS rotate-sway on sakura trees/bushes as a workaround * because the biome's no-fruit pink tree had no 4-frame anim. v2.0.196 * replaced those sprites with HSV-tinted meadow trees (which DO have * proper 4-frame sway anim + visible fruit), so the CSS sway was * removed — the native frame-swap animation now handles motion the same * way meadow + winter do. Comment kept as a reminder of why the rule * is intentionally absent. */ /* Intensity by time of day — day is barely a hint (sun overpowers), * night is full punch. The radius shrinks visually at low opacity * because the outermost stops already fade to transparent. */ .mg-farm-viewport-outer.is-day .mg-farm-light--w_campfire::after { opacity: 0.18; } .mg-farm-viewport-outer.is-dusk .mg-farm-light--w_campfire::after { opacity: 0.55; } .mg-farm-viewport-outer.is-dawn .mg-farm-light--w_campfire::after { opacity: 0.45; } .mg-farm-viewport-outer.is-night .mg-farm-light--w_campfire::after { opacity: 0.95; } /* Respect reduced-motion — kill the flicker, keep the static glow. */ @media (prefers-reduced-motion: reduce) { .mg-farm-light--w_campfire::after { animation: none; } } /* ---------- Sidebar ---------- */ .mg-farm-main { display: flex; gap: 1rem; align-items: flex-start; } .mg-farm-sidebar { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.5rem; } .mg-farm-action-panel { background: var(--bg-card); border: 1px solid var(--border-warm); border-radius: 6px; padding: 0.55rem 0.75rem; min-height: 56px; } .mg-farm-hint { color: var(--text-muted); font-size: 0.9rem; margin: 0; } /* v2.0.295 — keyboard-controls hint: smaller + more muted than the main * tap hint so it reads as a secondary aside, with a little top gap. */ .mg-farm-hint--keys { font-size: 0.78rem; opacity: 0.75; margin-top: 0.35rem; } .mg-farm-action-cell-label { font-weight: 600; margin: 0 0 0.35rem; } .mg-farm-action-buttons { display: flex; flex-wrap: wrap; gap: 0.3rem; } /* v2.0.145 — buttons inside action panel are equal-width by default * (prevents wider content like "收 鮮奶（可賣 900）" from out-stretching * its sibling like the "Lv 2 啡色" upgrade button). min-width: 0 lets * text wrap within the equal slot rather than overflow. Mobile media * query just adds min-height for tap-target friendliness. */ .mg-farm-action-buttons .mg-farm-btn { flex: 1 1 0; min-width: 0; } /* v2.0.146 — true pixel-art up arrow (replaces v2.0.145 CSS triangle). * 7×7 SVG grid with shape-rendering: crispEdges → each SVG-pixel renders * as a perfectly square block at 2× scale (14×14 display). mask-image + * currentColor preserves "follows text colour" so it matches the button * label tint without hardcoding. Grid layout: * * . . . X . . . ← tip (1 px) * . . X X X . . * . X X X X X . ← arrow base (wide) * . . . X . . . ← stem * . . . X . . . * . . . X . . . * . . . X . . . */ .mg-farm-ic-up { display: inline-block; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; vertical-align: middle; margin-right: 5px; } /* ---------- Buttons ---------- */ .mg-farm-btn { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.9rem; font-weight: 500; line-height: 1.2; /* v2.0.94 — explicit wrap-friendly defaults so the cow/chicken upgrade button (which carries Lv + tier + cost + cycle in one label, often using
) sits inside its panel on narrow mobile screens instead of overflowing horizontally. */ white-space: normal; word-break: keep-all; text-align: center; transition: background 0.12s; } .mg-farm-btn:hover { background: var(--accent-dark); } .mg-farm-btn:disabled { background: #b5b5b5; cursor: not-allowed; opacity: 0.7; } .mg-farm-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; } .mg-farm-btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border-warm); } .mg-farm-btn-secondary:hover { background: rgba(0, 0, 0, 0.04); } .mg-farm-shop-buttons { display: flex; gap: 0.35rem; } .mg-farm-btn-shop { flex: 1; font-size: 0.85rem; padding: 0.55rem 0.4rem; } /* ---------- Inventory ---------- */ .mg-farm-section-title { font-size: 0.95rem; margin: 0 0 0.4rem; color: var(--text-muted); font-weight: 600; } .mg-farm-inventory { background: var(--bg-card); border: 1px solid var(--border-warm); border-radius: 6px; padding: 0.55rem 0.75rem; } .mg-farm-inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .mg-farm-inv-item { background: var(--bg-soft); border: 1px solid var(--border-warm); border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.85rem; white-space: nowrap; } .mg-farm-inv-item-qty { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: 0.25rem; } .mg-farm-inv-empty { color: var(--text-muted); font-size: 0.85rem; } /* ---------- Modal ---------- */ .mg-farm-modal { /* v2.0.75 — modal is reparented to at init, so it no * longer inherits the .mg-farm-root CSS variable scope. Redeclare * the tokens the modal CSS uses (palette + cell-size). Keep in * sync with the .mg-farm-root block above. */ --cell: 96px; --bg-root: #8b6f47; --bg-deep: #a5855c; --bg-soft: #f2e6c8; --bg-card: #ffffff; --border-warm: #5c4222; --border-soft: #a8835c; --accent: #6b8e23; --accent-dark: #4a6818; --text: #2b2014; --text-on-dark: #fff4d4; --text-muted: #6b5536; --text-muted-on-dark: #d9c294; font-family: "Cubic 11", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK TC", sans-serif; color: var(--text); position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; } .mg-farm-modal[hidden] { display: none; } .mg-farm-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); } .mg-farm-modal-content { position: relative; background: var(--bg-card); border-radius: 8px; padding: 1.1rem; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } .mg-farm-modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-warm); padding-bottom: 0.4rem; margin-bottom: 0.8rem; } .mg-farm-modal-title { font-size: 1.1rem; margin: 0; } .mg-farm-modal-close-x { background: none; border: none; line-height: 1; cursor: pointer; padding: 0 0.25rem; } /* v2.0.75 — inner mg-ic centred in the wood button */ .mg-farm-modal-close-x .mg-ic { width: 16px; height: 16px; margin: 0; vertical-align: middle; } .mg-farm-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; } .mg-farm-shop-card { border: 1px solid var(--border-warm); border-radius: 6px; padding: 0.5rem; background: var(--bg-soft); display: flex; flex-direction: column; gap: 0.3rem; align-items: center; text-align: center; } .mg-farm-shop-card-sprite { width: 48px; height: 48px; background-repeat: no-repeat; image-rendering: pixelated; } .mg-farm-shop-card-name { font-weight: 600; font-size: 0.85rem; } .mg-farm-shop-card-price { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .mg-farm-shop-card-meta { color: var(--text-muted); font-size: 0.74rem; } .mg-farm-shop-qty { width: 60px; text-align: center; /* v2.0.41 — visible "border" now drawn via inset box-shadow instead * of `border`. Site themes routinely add `input { border-color: ... * !important }` or `input:focus { outline: ... !important }` that * paint OVER our actual border / outline. They almost never touch * box-shadow on inputs — so we set border:0 + outline:0 + use an * inset shadow for the visual frame. The site theme's red focus * ring (image 1 screenshot) survived 2.0.39's specificity bump * via `!important` injection in a `