/* Factor Fields: soil, crops, a factor rainbow, a lone sunflower and a fox.
   The play board is always light (the kit keeps it paper-white in Night mode),
   so board colors are fixed; the farm panel on the home screen follows the theme. */
.ff-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes cropIn { from { transform: scale(0) translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ffPop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes arcDraw { to { stroke-dashoffset: 0; } }
@keyframes stemGrow { to { stroke-dashoffset: 0; } }
@keyframes bloom { from { transform: scale(0) rotate(-120deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes think { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes meet { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.mill { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
/* on a phone the hero text covers the middle of the banner, where the barn stands */
@media (max-width: 640px) { .ff-barn { display: none; } }

/* ---------- builder layouts: field on the left, tray and controls on the right; one column on phones ---------- */
/* the board stays short enough on a laptop screen for the feedback and the button to show without scrolling */
.ff-build { width: 100%; display: grid; gap: 12px 22px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.ff-build > .ff-tray { grid-area: tray; }
.ff-build > .ff-fieldbox, .ff-build > .ff-dealbox { grid-area: field; }
.ff-build > .ff-controls { grid-area: controls; }
.ff-build > .ff-extra { grid-area: extra; }
.ff-build > .ff-rainbow { grid-area: rain; }
.ff-build > .ff-claim, .ff-build > .ff-claimbox { grid-area: claim; }
.ff-build > .ff-testbox { grid-area: tests; }
.ff-build.l1 { grid-template-areas: "field tray" "field controls" "field extra"; grid-template-rows: auto auto 1fr; }
/* Level 2: field and steppers in one column, rainbow and claim in the other, so neither leaves a gap */
.ff-build.l2 { --cap: 250px; }
.ff-col-a, .ff-col-b { display: grid; gap: 12px; align-content: start; min-width: 0; }
.ff-build.l2 .ff-stepper { flex-direction: row; padding: 5px 6px 5px 12px; }
.ff-build.l3 { grid-template-areas: "field controls" "field claim" "tests tests"; grid-template-rows: auto 1fr auto; }
.ff-dealbox .ff-grew { margin: 4px auto 2px; }
@media (max-width: 820px) {
  .ff-build { grid-template-columns: minmax(0, 1fr); gap: 10px; grid-template-rows: none !important; }
  /* on phones the steppers sit above the plot, so they start above the sticky dock; "That's every field" sits
     right under the rainbow and above the steppers, so it is in view whenever the steppers are, never under the dock */
  .ff-build.l1 { grid-template-areas: "tray" "controls" "field" "extra"; }
  .ff-build.l2 { grid-template-areas: "rain" "claim" "controls" "field"; }
  .ff-build.l2 .ff-col-a, .ff-build.l2 .ff-col-b { display: contents; }
  .ff-build.l2 .ff-fieldbox { grid-area: field; } .ff-build.l2 .ff-controls { grid-area: controls; }
  .ff-build.l2 .ff-rainbow { grid-area: rain; } .ff-build.l2 .ff-claimbox { grid-area: claim; }
  .ff-build.l3 { grid-template-areas: "field" "controls" "claim" "tests"; }
  .ff-rainbow svg { max-height: 104px; }
}

.ff-tray { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: #F3ECDD; border: 1.5px solid #E1D3B5; font-weight: 700; }
.ff-tray-n { display: grid; place-items: center; min-width: 50px; height: 50px; padding: 0 8px; border-radius: 14px; background: #3E8E41; color: #fff; font: 800 1.7rem var(--f-display); box-shadow: 0 3px 0 #2E3B1F; }
.ff-tray-t { flex: 1 1 auto; }
.ff-left { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .92rem; font-weight: 700; }
.ff-left.is-left { background: #FFF1EC; color: #8A2E1C; border: 1.5px dashed #D2486A; }
.ff-left.is-holes { background: #FBF7EE; color: #5A4126; border: 1.5px dashed #8A6A44; }
.ff-left-ics { display: inline-flex; }
.ff-left-ic { width: 16px; height: 16px; margin-right: -5px; }
@media (max-width: 820px) { .ff-tray-n { min-width: 44px; height: 44px; font-size: 1.45rem; } }

/* ---------- the field ---------- */
.ff-fieldbox { position: relative; width: 100%; max-width: min(760px, calc(var(--cap, 296px) * var(--ar, 2))); justify-self: center; }
.ff-fieldin { position: relative; }
/* a wide plot on a narrow screen scrolls sideways with 20 px squares; the page still scrolls up and down */
.ff-fieldbox.is-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: 14px; }
.ff-fieldbox.is-scroll .ff-fieldin { width: var(--fw); padding: 0 26px 22px 0; }
.ff-fieldbox.is-scroll .ff-field { touch-action: pan-x pan-y; }
.ff-scrollnote { position: sticky; left: 0; display: flex; align-items: center; gap: 6px; margin: -14px 0 0; padding: 0 2px 4px; font-size: .86rem; font-weight: 600; color: #464B57; }
.ff-scrollnote svg { width: 18px; height: 18px; flex: none; color: #3E8E41; }
.ff-scrollnote[hidden] { display: none; }
/* vertical swipes still scroll the page; marking is a tap, a mouse drag or the handle */
.ff-field { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; overflow: visible; border-radius: 14px; --u: 1; }
.ff-fieldbox.locked .ff-field { cursor: default; }
.ff-fence { fill: #8A6A44; stroke: #4F3A22; stroke-width: 3; }
.ff-soil { fill: #6B4E2E; stroke: #5A4126; stroke-width: 1; }
.ff-sel { fill: rgba(246, 195, 67, .26); stroke: #F6C343; stroke-width: calc(3.5px * var(--u)); stroke-dasharray: 9 6; pointer-events: none; }
.ff-fieldbox.has-plant .ff-sel { fill: none; }
.ff-dimtxt { font: 800 calc(15px * var(--u)) var(--f-math); fill: #FFF7E0; paint-order: stroke; stroke: #2E3B1F; stroke-width: calc(4.5px * var(--u)); stroke-linejoin: round; }
.ff-dimtxt.fixed { fill: #F6C343; }
.ff-dimtxt.pinned { paint-order: stroke; stroke-width: calc(6px * var(--u)); }
.ff-grip { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; touch-action: none; cursor: nwse-resize; }
.ff-grip i { width: 24px; height: 24px; border-radius: 50%; background: #F6C343; border: 3px solid #2E3B1F; box-shadow: 0 2px 0 #2E3B1F, 0 0 0 5px rgba(246, 195, 67, .35); transition: transform .15s; }
.ff-grip:hover i, .ff-grip.on i { transform: scale(1.2); }
.ff-fieldbox.locked .ff-grip { display: none; }
.ff-plot-bg { fill: #7FB55A; opacity: .42; }
.ff-plot-bg.bad { fill: #E8577A; opacity: .2; }
.ff-hole { fill: rgba(255, 241, 236, .15); stroke: #F7C1B2; stroke-width: 2.5; stroke-dasharray: 4 4; }
.ff-crop { animation: cropIn .45s var(--spring) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: 50% 100%; }
.ff-spare { filter: drop-shadow(0 0 3px #E8577A); }

/* ---------- steppers and the readout ---------- */
.ff-controls { display: grid; gap: 8px; }
.ff-steppers { display: grid; gap: 8px; }
.ff-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 14px; background: #fff; border: 1.5px solid rgba(28, 31, 38, .13); }
/* small field squares on this screen: the steppers are the easier way, so they stand out */
.ff-steppers.is-easier .ff-stepper { background: #FFF6DA; border: 2px solid #E0A82E; box-shadow: 0 0 0 3px rgba(224, 168, 46, .18); }
.ff-step-l { font-weight: 700; font-size: .92rem; color: #464B57; }
.ff-step-row { display: flex; align-items: center; gap: 6px; }
.ff-step { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 12px; border: 2px solid #2E3B1F; background: #fff; color: #1C1F26; font: 800 1.5rem var(--f-display); line-height: 1; box-shadow: 0 3px 0 #2E3B1F; }
.ff-step:active { transform: translateY(2px); box-shadow: 0 1px 0 #2E3B1F; }
.ff-step[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; box-shadow: 0 3px 0 #2E3B1F; }
.ff-step-v { min-width: 2.1ch; text-align: center; font: 800 1.6rem var(--f-display); color: #1C1F26; }
.ff-stepper.is-fixed .ff-step-row { gap: 8px; }
.ff-fixed { font-size: .8rem; font-weight: 700; color: #5E6472; max-width: 7.5em; line-height: 1.15; }
.ff-readout { margin: 0; text-align: center; font-weight: 600; font-size: 1.05rem; color: #1C1F26; }
/* two steppers sit side by side (label on top); a single stepper is one row */
.ff-steppers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-steppers.one { grid-template-columns: minmax(0, 320px); justify-content: center; }
.ff-stepper { flex-direction: column; gap: 2px; padding: 6px; }
.ff-steppers.one .ff-stepper { flex-direction: row; padding-left: 12px; }
.ff-fixed { max-width: none; }
.ff-stepper.is-fixed .ff-step-row { min-height: 44px; }
@media (max-width: 820px) { .ff-build.l2 .ff-stepper { flex-direction: column; padding: 6px; } }
@media (max-width: 370px) {
  .ff-steppers { grid-template-columns: minmax(0, 1fr); }
  .ff-stepper, .ff-build.l2 .ff-stepper { flex-direction: row; padding: 4px 6px 4px 12px; }
}

/* ---------- side extras: logs, the rainbow, tests ---------- */
.ff-extra { display: grid; gap: 10px; align-content: start; }
.ff-h { font: 800 1rem var(--f-display); margin: 0; color: #1C1F26; }
.ff-twolog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ff-twolog li { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; border-radius: 12px; border: 1.5px dashed #D9CFBC; font-weight: 700; }
.ff-twolog li.got { border-style: solid; border-color: #9ED3B6; background: #E3F5EB; animation: ffPop .45s var(--spring) both; }
.ff-twolog svg { width: 26px; height: 26px; flex: none; }
.ff-unknown { color: #5E6472; font-weight: 600; }
.ff-claim { width: 100%; min-height: 50px; white-space: normal; line-height: 1.2; }
.ff-claimbox { display: grid; gap: 8px; }
/* prime or composite: two answers side by side */
.ff-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ff-verdict .ff-claim { display: grid; justify-items: center; gap: 0; padding: 6px 8px; min-height: 56px; }
.ff-verdict .ff-claim b { font-size: 1.05rem; }
.ff-verdict .ff-claim small { font-weight: 600; font-size: .8rem; opacity: .85; }
.ff-verdict .ff-grew { grid-column: 1 / -1; }
.ff-claimbox .ff-grew { margin: 0 auto; }

.ff-rainbow { margin: 0; padding: 8px 10px 6px; border-radius: 16px; background: linear-gradient(180deg, #E4F2FA, #FFFFFF 80%); border: 1.5px solid #CFE3EE; display: grid; gap: 4px; }
.ff-rainbow svg { width: 100%; height: auto; display: block; max-height: 128px; }
.ff-rb-head { display: flex; align-items: center; gap: 10px; }
.ff-rb-head .ff-tray-n { min-width: 46px; height: 46px; font-size: 1.5rem; }
.ff-rb-text { display: grid; min-width: 0; }
.ff-arc { fill: none; stroke-width: 9; stroke-linecap: round; }
path.ff-arc.new { stroke-dasharray: 1; stroke-dashoffset: 1; animation: arcDraw .9s ease-out forwards; }
g.ff-arc.new { transform-box: fill-box; transform-origin: center; animation: ffPop .6s var(--spring) both; }
.ff-rb-ground { stroke: #7FB55A; stroke-width: 5; stroke-linecap: round; }
.ff-rb-n { font: 800 14px var(--f-math); fill: #1C1F26; }
.ff-rainbow figcaption { font-size: .9rem; color: #464B57; line-height: 1.3; }
.ff-rb-t { font: 800 .95rem var(--f-display); color: #1C1F26; }
.ff-rb-fields { list-style: none; margin: 0; padding: 2px 0 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 6px 12px; }
.ff-rb-fields li { display: grid; justify-items: center; gap: 2px; padding: 4px 6px 2px; border-radius: 8px; border-bottom: 3px solid var(--c); }
.ff-rb-fields li.new { animation: ffPop .5s var(--spring) both; }
.ff-rb-fields svg { display: block; fill: var(--c); max-width: 100%; height: auto; }
.ff-rb-fields span { font: 800 .8rem var(--f-math); color: #1C1F26; }
.ff-rainbow.done { border-color: #F1D48E; background: linear-gradient(180deg, #FFF6D9, #FFFFFF 85%); box-shadow: 0 0 0 3px rgba(246, 195, 67, .35); }
.ff-rainbow.done .ff-arc { stroke-width: 11; }

/* ---------- Level 3: dealing and the lone sunflower ---------- */
.ff-dealbox { width: 100%; max-width: 760px; justify-self: center; border-radius: 16px; background: #EFE6D2; border: 2px solid #8A6A44; padding: 8px; transition: background .4s; }
.ff-deal { display: block; width: 100%; height: clamp(150px, 24vw, 204px); }
.ff-deal-bg.ok { fill: #7FB55A; opacity: .4; }
.ff-deal-bg.bad { fill: #6B4E2E; opacity: .14; }
.ff-left-frame { fill: #FFF1EC; stroke: #D2486A; stroke-width: 2.5; stroke-dasharray: 7 5; }
.ff-bag-t { font: 800 22px var(--f-display); fill: #2E3B1F; }
.ff-bag-s { font: 600 15px var(--f-ui); fill: #464B57; }
.ff-dealbox.is-lone { background: radial-gradient(circle at 50% 30%, #FFF6D6, #EFE6D2 72%); border-color: #E5A600; }
.ff-lone-stem { stroke-dasharray: 140; stroke-dashoffset: 140; animation: stemGrow .9s ease-out .1s forwards; }
.ff-lone-leaf { transform-box: fill-box; transform-origin: 50% 100%; animation: cropIn .5s var(--spring) .7s both; }
.ff-lone-head { transform-box: fill-box; transform-origin: center; animation: bloom 1s var(--spring) .85s both; }
.ff-lone-n { font: 800 22px var(--f-display); fill: #FFF7E0; }
.ff-tests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.ff-testbox { display: grid; gap: 6px; }
/* room for every test from the start, so the board (and the buttons under it) don't move as tests are added */
.ff-tests { min-height: 82px; align-content: start; }
@media (max-width: 820px) { .ff-tests { min-height: 170px; } }
.ff-tests li { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 12px; background: #fff; border: 1.5px solid rgba(28, 31, 38, .13); font-size: .92rem; line-height: 1.25; }
.ff-tests li.yes { background: #E3F5EB; border-color: #9ED3B6; }
.ff-tests li.none { color: #5E6472; border-style: dashed; padding-left: 10px; }
.ff-t-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; font-weight: 800; font-size: .85rem; }
.ff-tests li.no .ff-t-ic { background: #FBE3DD; color: #9A3324; }
.ff-tests li.yes .ff-t-ic { background: #3E8E41; color: #fff; }
.ff-tests li.none { grid-column: 1 / -1; }
@media (max-width: 820px) { .ff-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ff-tests li { font-size: .88rem; padding-right: 6px; } }

/* seed DNA: a factor tree that ends in prime seeds */
.ff-build.l3t { grid-template-areas: "field controls" "field claim" "dna dna"; grid-template-rows: auto 1fr auto; }
.ff-build > .ff-treebox { grid-area: field; }
.ff-build > .ff-dna { grid-area: dna; }
@media (max-width: 820px) { .ff-build.l3t { grid-template-areas: "field" "dna" "controls" "claim"; } }
.ff-treebox { width: 100%; max-width: 560px; justify-self: center; border-radius: 16px; background: #EFE6D2; border: 2px solid #8A6A44; padding: 6px; transition: background .4s, border-color .4s; }
.ff-treebox.is-done { background: radial-gradient(circle at 50% 20%, #FFF6D6, #EFE6D2 75%); border-color: #E5A600; }
.ff-tree { display: block; width: 100%; height: auto; max-height: 300px; overflow: visible; }
.ff-branch { stroke: #6B4E2E; stroke-width: 3; stroke-linecap: round; }
.ff-times { font: 800 16px var(--f-math); fill: #5A4126; }
.ff-node circle { stroke-width: 3; }
.ff-node text { font: 800 16px var(--f-display); }
.ff-node text.sm { font-size: 13.5px; }
.ff-node.open circle, .ff-node.active circle { fill: #8A6A44; stroke: #4F3A22; }
.ff-node.open text, .ff-node.active text { fill: #FFF7E0; }
.ff-node.active circle.ff-ring { fill: none; stroke: #E5A600; stroke-width: 3.5; stroke-dasharray: 6 4; }
.ff-node.inner circle { fill: #FBF7EE; stroke: #8A6A44; }
.ff-node.inner text { fill: #2E3B1F; }
.ff-node.seed circle { fill: #F6C343; stroke: #8A5A00; }
.ff-node.seed text { fill: #2E3B1F; }
.ff-seed-leaf { fill: #5FAE45; stroke: #2E5E22; stroke-width: 1.2; }
.ff-node { transform-box: fill-box; transform-origin: center; }
.ff-node.new { animation: ffPop .5s var(--spring) both; }
.ff-dna { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 1.05rem; color: #1C1F26; text-align: center; }
.ff-dna-l { font: 800 .74rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #5E6472; margin-right: 4px; }
.ff-chip { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 7px; border-radius: 999px; background: #8A6A44; color: #FFF7E0; border: 2px solid #4F3A22; font-weight: 800; }
.ff-chip.seed { background: #F6C343; color: #2E3B1F; border-color: #8A5A00; }
.ff-pow { font-size: 1.15rem; }
.ff-seed-ic { width: 22px; height: 22px; flex: none; }
#ff-seed { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* the sunflower patch */
.ff-sieve { width: min(100%, 700px); display: grid; gap: 10px; }
.ff-patch { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 18px; background: #8A6A44; }
@media (max-width: 560px) { .ff-patch { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px; } }
.ff-pp { position: relative; min-height: 74px; padding: 6px 2px; border-radius: 14px; border: 2px solid #4F3A22; background: #6B4E2E; color: #FFF7E0; display: grid; grid-template-rows: auto 28px auto; justify-items: center; align-content: center; gap: 2px; font: 800 1.25rem var(--f-display); box-shadow: 0 3px 0 #4F3A22; transition: background .2s, transform .15s; }
.ff-pp:active { transform: translateY(2px); }
.ff-pp .ff-pp-sun { width: 28px; height: 28px; opacity: 0; transform: scale(.3) rotate(-60deg); transition: opacity .2s, transform .35s var(--spring); }
.ff-pp[aria-pressed="true"] { background: #FFF4D6; color: #2E3B1F; border-color: #B57A08; }
.ff-pp[aria-pressed="true"] .ff-pp-sun { opacity: 1; transform: none; }
.ff-pp-f { font: 700 .74rem var(--f-math); min-height: 1em; }
.ff-patch.done .ff-pp.comp { background: #5A4126; color: #FFF7E0; }
.ff-patch.done .ff-pp.comp[aria-pressed="true"] { background: #FFF1EC; color: #6B2414; }
.ff-patch.done .ff-pp.prime { box-shadow: 0 0 0 3px #F6C343, 0 3px 0 #4F3A22; }

/* ---------- Level 4: shared rows ---------- */
.ff-shared { width: 100%; display: grid; gap: 12px; justify-items: center; }
.ff-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 680px); }
.ff-mini { margin: 0; display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: 18px; background: #F3ECDD; border: 2px solid #E1D3B5; transition: border-color .2s, background .2s; }
.ff-mini.bad { border-color: #F2B8A8; background: #FFF1EC; }
.ff-mini.ok { border-color: #9ED3B6; background: #EEF8F1; }
.ff-mini svg { width: 100%; height: auto; display: block; max-height: 200px; }
.ff-mini figcaption { font-weight: 600; text-align: center; line-height: 1.3; display: grid; align-content: start; }
/* the status line keeps room for two lines from the start, so planting doesn't move the buttons */
.ff-cap-s { display: block; min-height: 2.6em; font-size: .9rem; color: #464B57; }
.ff-mini figcaption b { font: 800 1.25rem var(--f-display); }
.ff-over { color: #9A3324; font-weight: 700; }
.ff-mini-bg { fill: #6B4E2E; }
.ff-sack-bag { fill: #D8B47A; stroke: #7A5530; stroke-width: 3; }
.ff-sack-tie { fill: none; stroke: #7A5530; stroke-width: 3; stroke-linecap: round; }
.ff-sack-n { font: 800 44px var(--f-display); fill: #4A3018; }
.ff-ruler { fill: rgba(246, 195, 67, .18); stroke: #F6C343; stroke-width: 2.5; stroke-dasharray: 4 3; }
.ff-mini-dot { fill: #9BD07A; }
.ff-mini-row { fill: none; stroke: rgba(255, 247, 224, .28); stroke-width: 1.2; }
.ff-mini-extra { fill: #F07C98; }
.ff-shared .ff-controls { width: min(100%, 360px); }
@media (max-width: 820px) { .ff-shared .ff-steppers.one .ff-stepper { flex-direction: row; } }

/* ---------- Level 4: sprinkler calendar ---------- */
.ff-cal-wrap { width: min(100%, 740px); display: grid; gap: 12px; }
.ff-sprinklers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; font-weight: 600; }
.ff-spk { display: inline-flex; align-items: center; gap: 8px; }
/* each sprinkler has its own shape as well as its own color: drop, dot, diamond */
.ff-spk i, .ff-drops i { flex: none; }
.ff-spk.a i, .ff-drops .da { background: #2F7DD1; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); }
.ff-spk.b i, .ff-drops .db { background: #E5A600; border-radius: 50%; border: 1.5px solid #8A6400; }
.ff-spk.c i, .ff-drops .dc { background: #D2486A; transform: rotate(45deg); border-radius: 2px; }
.ff-spk i { display: inline-block; width: 14px; height: 14px; }
.ff-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.ff-day { position: relative; min-width: 0; min-height: 52px; padding: 5px 2px 6px; border-radius: 12px; border: 1.5px solid #E1D3B5; background: #FBF7EE; color: #1C1F26; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; transition: transform .15s var(--spring); }
.ff-day:hover { transform: translateY(-2px); }
.ff-dn { font: 800 1rem var(--f-ui); line-height: 1.15; }
.ff-drops { display: flex; align-items: center; justify-content: center; gap: 4px; height: 12px; }
.ff-drops i { display: none; width: 9px; height: 9px; }
.ff-day.wa .da, .ff-day.wb .db, .ff-day.wc .dc { display: block; }
.ff-day.wa, .ff-day.wb, .ff-day.wc { background: #EEF5FC; }
.ff-day[aria-checked="true"] { border-color: #2E3B1F; background: #F6C343; box-shadow: 0 0 0 3px rgba(246, 195, 67, .5); }
.ff-day.meet { border-color: #2E7D32; box-shadow: 0 0 0 4px rgba(62, 142, 65, .5); animation: meet 1s var(--spring) both; }

/* ---------- Level 5: the Factor Duel ---------- */
.ff-duel { width: min(100%, 780px); display: grid; gap: 12px; }
.ff-duel-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ff-score { display: grid; justify-items: center; min-width: 74px; padding: 6px 10px; border-radius: 16px; border: 2px solid; }
.ff-score.you { background: #E3F5EB; border-color: #3E8E41; }
.ff-score.fox { background: #FDEBDD; border-color: #C2571B; }
.ff-av { display: block; width: 32px; height: 32px; }
.ff-av svg { width: 100%; height: 100%; display: block; }
.ff-score.thinking .ff-av { animation: think .8s ease-in-out infinite; }
.ff-who { font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #464B57; }
.ff-score b { font: 800 1.6rem var(--f-display); line-height: 1.05; }
.ff-duel-status { margin: 0; text-align: center; font-weight: 600; font-size: 1.02rem; }
.ff-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 18px; background: #8A6A44; }
@media (max-width: 370px) { .ff-board.ff-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ff-board { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 6px; } .ff-score { min-width: 62px; padding: 4px 6px; } .ff-duel-status { font-size: .95rem; } }
.ff-dp { position: relative; min-height: 50px; padding: 0; border-radius: 12px; border: 2px solid #4F3A22; background: #FBF7EE; color: #1C1F26; font: 800 1.15rem var(--f-ui); display: grid; place-items: center; transition: transform .15s, background .25s; }
.ff-dp.is-you { background: #DDF1E2; border-color: #2E7D32; }
.ff-dp.is-fox { background: #FBE0CC; border-color: #A84A14; }
.ff-dp-ic svg { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; }
.ff-dp.is-sel { border-color: #2E3B1F; box-shadow: 0 0 0 4px #F6C343; transform: translateY(-2px); }
.ff-dp.is-foxpick { box-shadow: 0 0 0 4px rgba(194, 87, 27, .55); }
.ff-dp.flash { animation: ffPop .45s var(--spring); }
.ff-duel-rule { margin: 0; font-size: .92rem; color: #464B57; text-align: center; }
.ff-duel.won .ff-score.you { box-shadow: 0 0 0 4px rgba(246, 195, 67, .6); }

/* ---------- the farm ---------- */
.ff-grew { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 4px 14px 4px 6px; border-radius: 999px; background: #FFF4D6; border: 1.5px solid #F1D48E; color: #3D2E0A; font-weight: 600; font-size: .95rem; line-height: 1.25; animation: ffPop .5s var(--spring) both; }
.ff-controls .ff-grew { margin: 0 auto; }
.ff-grew svg { width: 24px; height: 24px; flex: none; }
.ff-farm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ff-farm-count { font: 800 1.4rem var(--f-display); color: var(--ink); }
.ff-farm-count small { font-size: .9rem; color: var(--ink-2); }
.ff-farm-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; padding: 5px; border-radius: 12px; background: #8A6A44; border: 2px solid #4F3A22; }
.ff-farm-grid.small { width: min(100%, 320px); margin: 4px auto 0; }
.ff-fp { position: relative; aspect-ratio: 1; border-radius: 6px; background: #5E4428; display: grid; place-items: center; }
/* the number sits top left (readable size); the plant sits bottom right */
.ff-fp svg { position: absolute; right: 1px; bottom: 1px; width: 56%; height: 56%; display: block; }
.ff-fp i { position: absolute; left: 2px; top: 1px; font: 800 11.5px/1 var(--f-ui); font-style: normal; color: #FFF7E0; letter-spacing: -.02em; }
.ff-fp.field, .ff-fp.gold { background: #A8D88A; }
.ff-fp.gold { box-shadow: inset 0 0 0 2.5px #E5A600; }
.ff-fp.sun { background: #FFF1C2; }
.ff-fp.one { background: #E9D2AE; }
.ff-fp.field i, .ff-fp.gold i, .ff-fp.sun i, .ff-fp.one i { color: #1C1F26; }
.ff-fp.new { animation: ffPop .7s var(--spring) both; outline: 2px solid #FFF7E0; outline-offset: -1px; }
.ff-farm-duels { display: flex; align-items: center; gap: 8px; }
.ff-fox-ic { width: 30px; height: 30px; flex: none; }
.ff-farm-sum { display: grid; gap: 4px; justify-items: center; }
.ff-farm-sum p { margin: 0; color: var(--ink-2); font-weight: 600; }

/* short phone screens (320×640): a little tighter, controls first */
@media (max-width: 640px) and (max-height: 720px) {
  .ff-build.l3t { grid-template-areas: "field" "controls" "claim" "dna"; }
  .ff-shared > .ff-controls { order: -1; }
  .ff-build.l2 { grid-template-areas: "claim" "controls" "field" "rain"; }
  .ff-deal { height: 128px; }
  .ff-rainbow svg { max-height: 84px; }
}