/* autofarm.css — the AUTO button, its status line and the Auto Farm settings window (js/autofarm.js). Sizes in --u
   like style.css. */

/* ---------- the button (bottom right, above the coins) ---------- */
.af { position: absolute; right: calc(20 * var(--u)); bottom: calc(150 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); flex-direction: row-reverse; }
.af-btn {
  position: relative; width: calc(84 * var(--u)); height: calc(84 * var(--u)); padding: 0; cursor: pointer; pointer-events: auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #4b4560, #2a2536); border: calc(4 * var(--u)) solid var(--ink);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #a88a55, 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}
.af-btn img { position: absolute; left: 12%; top: 8%; width: 76%; height: 76%; object-fit: contain; filter: grayscale(0.55) brightness(0.85); transition: filter 0.2s; }
.af-btn b {
  position: absolute; left: 50%; bottom: calc(-12 * var(--u)); transform: translateX(-50%); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u));
  background: #6c6780; border: calc(3 * var(--u)) solid var(--ink); color: #f4efe6; font: 800 calc(16 * var(--u)) / 1.35 'Baloo 2', sans-serif; letter-spacing: 0.04em;
}
.af-btn:hover img { filter: none; }
.af.on .af-btn { box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffd873, 0 0 calc(18 * var(--u)) rgba(255, 216, 115, 0.75), 0 calc(5 * var(--u)) 0 rgba(0, 0, 0, 0.25); }
.af.on .af-btn img { filter: none; animation: afspin 2.4s linear infinite; }
.af.on .af-btn b { background: #ffd873; color: var(--ink); }
@keyframes afspin { to { transform: rotate(360deg); } }
.af-set {
  pointer-events: auto; cursor: pointer; padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #3d3848; color: #f4efe6; font: 500 calc(15 * var(--u)) / 1.6 'Mitr', sans-serif;
}
.af-set:hover { background: #ffd873; color: var(--ink); }
.af-state {
  padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: rgba(22, 18, 32, 0.72); white-space: nowrap;
  color: #ffe28a; font: 500 calc(16 * var(--u)) / 1.5 'Mitr', sans-serif; border: calc(2 * var(--u)) solid rgba(255, 216, 115, 0.45);
}
.af-state[hidden] { display: none; }
.af-indicators { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.af-wake { max-width: min(250px, 55vw); color: #ffe28a; background: rgba(22, 18, 32, 0.85); border-radius: 6px; padding: 3px 8px; font: 400 11px/1.5 'Mitr', sans-serif; }
.af-wake[data-status="active"] { color: #bfeaa9; }
.af-wake[hidden], #af-wake-retry[hidden] { display: none; }
.af-wake-settings { margin-top: 14px; padding: 12px; border: 1px solid #776948; border-radius: 10px; font: 400 13px/1.6 'Mitr', sans-serif; }
.af-wake-settings h3 { margin: 0 0 6px; font-size: 15px; color: #ffdf9c; }
.af-wake-settings p { margin: 5px 0; }
.af-wake-help { color: #cfc6b8; font-size: 12px; }
#af-wake-retry { min-height: 44px; padding: 8px 12px; border: 1px solid #a88a55; border-radius: 8px; background: #ffd873; color: #292432; font: inherit; cursor: pointer; }
#af-wake-retry:focus-visible { outline: 3px solid #fff3cf; outline-offset: 3px; }
@media (max-aspect-ratio: 7/5) { .af { bottom: calc(304 * var(--u)); } }

/* ---------- the settings window ---------- */
.card.autofarm { width: min(96vw, calc(980 * var(--u))); max-height: 94vh; overflow: auto; }
.card.autofarm .ptitle { gap: calc(14 * var(--u)); }
.card.autofarm .ptitle span { margin-right: auto; }
.af-onoff {
  cursor: pointer; padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: #8a8499; color: #f4efe6; font: 700 calc(19 * var(--u)) / 1.7 'Mitr', sans-serif;
}
.af-onoff.on { background: #7fdc7f; color: var(--ink); }
.af-h { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); color: #fff3cf; font: 600 calc(21 * var(--u)) 'Mitr', sans-serif; }
.af-h small { font-size: calc(16 * var(--u)); color: #cfc6b8; font-weight: 400; }
.af-hbtn { margin-left: auto; display: flex; gap: calc(6 * var(--u)); }
.af-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin: calc(4 * var(--u)) 0; }
.af-lbl { min-width: calc(200 * var(--u)); color: #cfc6b8; font-size: calc(17 * var(--u)); }
.af-chip {
  cursor: pointer; padding: 0 calc(12 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  background: #4a4555; color: #cfc6b8; font: 500 calc(16 * var(--u)) / 1.8 'Mitr', sans-serif;
}
.af-chip.on { background: #ffd873; color: var(--ink); }
.af-chip:disabled { opacity: 0.35; cursor: default; }
.af-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(128 * var(--u)), 1fr)); gap: calc(8 * var(--u)); }
.af-chip.mon { display: grid; justify-items: center; padding: calc(6 * var(--u)); line-height: 1.3; background: #3a3647; }
.af-chip.mon canvas { width: calc(64 * var(--u)); height: calc(64 * var(--u)); filter: grayscale(1) brightness(0.55); }
.af-chip.mon span { color: #cfc6b8; font-size: calc(15 * var(--u)); text-align: center; }
.af-chip.mon em { font-style: normal; font-size: calc(13 * var(--u)); color: #9d95a8; }
.af-chip.mon.on { background: linear-gradient(#56617f, #414b66); box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffd873; }
.af-chip.mon.on canvas { filter: none; }
.af-chip.mon.on span { color: #fff3cf; }
.af-chip.mon.on em { color: #9fe0ff; }
.af-empty { color: #cfc6b8; font-size: calc(16 * var(--u)); }
.af-slots { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.af-chip.slot { position: relative; width: calc(64 * var(--u)); height: calc(64 * var(--u)); padding: calc(4 * var(--u)); background: #2b2836; }
.af-chip.slot img { width: 100%; height: 100%; object-fit: contain; opacity: 0.35; filter: grayscale(1); border-radius: calc(6 * var(--u)); }
.af-chip.slot.on { background: linear-gradient(#56617f, #414b66); box-shadow: inset 0 0 0 calc(3 * var(--u)) #ffd873; }
.af-chip.slot.on img { opacity: 1; filter: none; }
.af-chip.slot i {
  position: absolute; left: calc(-6 * var(--u)); top: calc(-8 * var(--u)); z-index: 1; padding: 0 calc(5 * var(--u)); border-radius: calc(6 * var(--u)); font-style: normal;
  background: #f4f1ea; color: var(--ink); border: calc(2 * var(--u)) solid var(--ink); font: 800 calc(13 * var(--u)) / 1.3 'Baloo 2', sans-serif;
}

/* Adjustable farming area; shared by the original window and its card layout. */
.af-radius { color: var(--ink); font: 500 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; }
.af-radius[hidden] { display: none; }
.af-radius label { display: flex; gap: .4em; align-items: baseline; }
.af-radius output { font-weight: 700; font-variant-numeric: tabular-nums; }
.af-radius input { display: block; width: 100%; min-height: 28px; margin: 0; accent-color: #348fd3; cursor: ew-resize; touch-action: pan-y; }
.af-radius input:focus-visible { outline: 2px solid #348fd3; outline-offset: 2px; border-radius: 6px; }
.af-radius small { display: block; font-size: .85em; }