/* Hay Farm visual refresh, approved 2026-09-28.
   Presentation only: existing DOM, game logic, rewards and ad integrations stay intact. */

body.hay-farm-mode {
  --hay-sky: #a8dced;
  --hay-grass: #42a65f;
  --hay-grass-lt: #b9e392;
  --hay-grass-dk: #246f41;
  --hay-meadow: #e6f3bd;
  --hay-card: #fff7dd;
  --hay-ink: #3d3021;
  --hay-ink-soft: #77684e;
  --hay-line: #e8cb82;
  --hay-accent: #f4ad3a;
  --hay-accent-dk: #c27324;
  --paper: var(--hay-card);
  --paper-edge: var(--hay-line);
  --ink: var(--hay-ink);
  --ink-soft: var(--hay-ink-soft);
  --leaf: var(--hay-grass);
  --gold: var(--hay-accent);
  --gold-dk: var(--hay-accent-dk);
  --gold-lt: #ffe078;
  --press-green-top: #75cf7d;
  --press-green-base: #42a65f;
  --press-green-edge: #246f41;
  --press-gold-top: #ffe078;
  --press-gold-base: #f4ad3a;
  --press-gold-edge: #c27324;
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.68) 0 31px, transparent 32px),
    radial-gradient(circle at 77% 15%, rgba(255,255,255,.45) 0 43px, transparent 44px),
    linear-gradient(180deg, #a8dced 0%, #d9edc2 42%, #b9e392 100%);
  background-attachment: fixed;
}

body.hay-farm-mode .hud {
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(255,250,225,.98), rgba(255,241,202,.97));
  box-shadow: 0 5px 0 #8d5732, 0 10px 19px rgba(39,64,31,.18);
}

body.hay-farm-mode .scrn-head {
  border-color: #f3d58e;
  background: linear-gradient(180deg, #8d5732, #754326);
  box-shadow: 0 5px 0 #58351e, 0 9px 17px rgba(52,71,35,.2);
}

body.hay-farm-mode .card,
body.hay-farm-mode .crop-section,
body.hay-farm-mode .farm-order-card,
body.hay-farm-mode .town-progress-card,
body.hay-farm-mode .ref-friend,
body.hay-farm-mode .invite-duo,
body.hay-farm-mode .bank-fact {
  border: 2px solid #ffe9a7;
  border-radius: 18px 22px 18px 21px;
  background: linear-gradient(145deg, #fff7dd, #fff1ca);
  box-shadow: 0 5px 0 #c99955, 0 10px 20px rgba(53,78,36,.14);
}

body.hay-farm-mode .crop-section {
  padding: 11px;
  margin-bottom: 18px;
}

body.hay-farm-mode .crop-head .t,
body.hay-farm-mode .farm-orders-title b,
body.hay-farm-mode .bank-ledger-title b {
  color: #66401f;
}

body.hay-farm-mode .crop-grid { gap: 7px; }

body.hay-farm-mode .crop-card {
  min-width: 0;
  padding: 7px 4px 9px;
  border: 1px solid #dce9ae;
  border-radius: 13px;
  background: linear-gradient(180deg, #f9fbe7, #ecf2c4);
  box-shadow: 0 2px 0 #c9d69e;
}

body.hay-farm-mode .crop-card.ready {
  border-color: #e7bf44;
  background: linear-gradient(180deg, #fff9c4, #fff2a1);
  box-shadow: 0 2px 0 #d1ab4e;
}

body.hay-farm-mode .crop-card.locked {
  border-color: #d5d0be;
  background: #eeeade;
  box-shadow: 0 2px 0 #c6c0ad;
}

body.hay-farm-mode .crop-card .c-name { font-size: 12px; }
body.hay-farm-mode .crop-card .c-status { min-height: 18px; }
body.hay-farm-mode .crop-card .crop-speedup { margin-top: 5px; }
body.hay-farm-mode .farm-order-deliver.is-delivering { color: #5f644c; }

body.hay-farm-mode .row {
  border: 1px solid rgba(189,147,72,.25);
  border-radius: 13px;
  background: rgba(255,255,255,.62);
}

body.hay-farm-mode .row .emo {
  border-radius: 13px;
  background: #dff2b4;
  box-shadow: 0 3px 0 #81ad5d;
}

body.hay-farm-mode .farm-order-card { margin-bottom: 15px; }
body.hay-farm-mode .farm-order-item { border-radius: 9px; }
body.hay-farm-mode .farm-order-item.ready { background: #edf4ce; }

/* Shared press response. The base styling is intentionally limited to game
   controls; SDK widgets and the navigation bar retain their own layout. */
body.hay-farm-mode #app :is(
  .pill, .btn-full, .farm-order-deliver, .farm-order-refresh,
  .town-storage-upgrade, .withdraw-quick button, .starter-guide button,
  .subtab-btn, .farm-zone-tabs button, .pasture-toolbar button,
  .pasture-manage button, .pasture-bar button, .invite-share
) {
  --press-top: var(--press-green-top);
  --press-base: var(--press-green-base);
  --press-edge: var(--press-green-edge);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--press-top), var(--press-base) 35%, var(--press-base));
  color: #fff;
  box-shadow: 0 5px 0 var(--press-edge), 0 8px 9px rgba(58,42,24,.18);
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
  transform: translateY(0);
  transition: transform .09s ease, box-shadow .09s ease, filter .12s ease;
  touch-action: manipulation;
}

body.hay-farm-mode #app :is(
  .pill.ok, .pill.gem, .farm-order-refresh, .town-storage-upgrade,
  .bank-withdraw, .invite-hero .pill, .invite-share
) {
  --press-top: var(--press-gold-top);
  --press-base: var(--press-gold-base);
  --press-edge: var(--press-gold-edge);
  color: #51371b;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

body.hay-farm-mode #app :is(
  .pill.ghost, .pill.done, .withdraw-quick button,
  .subtab-btn:not(.active), .farm-zone-tabs button:not(.on)
) {
  --press-top: #fff7df;
  --press-base: #ede6cb;
  --press-edge: #b8a378;
  color: #4c4434;
  text-shadow: none;
}

body.hay-farm-mode #app .crop-card .pill {
  width: 100%;
  min-height: 31px;
  padding: 4px 2px;
  border-radius: 10px;
  font-size: 9px;
  box-shadow: 0 3px 0 var(--press-edge), 0 4px 5px rgba(58,42,24,.13);
}

body.hay-farm-mode #app .subtab-btn {
  min-height: 38px;
  padding: 5px 2px;
  font-size: 10px;
  box-shadow: none;
}

body.hay-farm-mode #app .subtab-btn.active {
  box-shadow: inset 0 -3px 0 var(--press-green-edge);
}

body.hay-farm-mode #app :is(
  .pill, .btn-full, .farm-order-deliver, .farm-order-refresh,
  .town-storage-upgrade, .withdraw-quick button, .starter-guide button,
  .farm-zone-tabs button, .pasture-toolbar button,
  .pasture-manage button, .pasture-bar button, .invite-share
):not(:disabled):active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--press-edge), 0 1px 3px rgba(58,42,24,.18);
}

body.hay-farm-mode #app .crop-card .pill:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--press-edge);
}

body.hay-farm-mode #app :is(
  .pill, .btn-full, .farm-order-deliver, .farm-order-refresh,
  .town-storage-upgrade, .withdraw-quick button, .starter-guide button,
  .subtab-btn, .farm-zone-tabs button, .pasture-toolbar button,
  .pasture-manage button, .pasture-bar button, .invite-share
):disabled {
  opacity: .68;
  filter: saturate(.55);
  box-shadow: 0 2px 0 var(--press-edge);
  transform: none;
  cursor: not-allowed;
}

body.hay-farm-mode #app .dock button {
  min-height: 43px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  color: #51371b;
  background: linear-gradient(180deg, var(--press-gold-top), var(--press-gold-base) 36%);
  box-shadow: 0 5px 0 var(--press-gold-edge), 0 8px 10px rgba(58,42,24,.2);
  transition: transform .09s ease, box-shadow .09s ease;
}

body.hay-farm-mode #app .dock button:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--press-gold-edge), 0 1px 3px rgba(58,42,24,.2);
}

body.hay-farm-mode .task-subtabs {
  gap: 3px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 15px;
  background: #fff1ca;
  box-shadow: 0 3px 0 #bc8a4d;
}

body.hay-farm-mode .nav {
  border-color: #f2cf79;
  border-radius: 20px 24px 18px 22px;
  background: linear-gradient(180deg, #8d5732, #754326);
  box-shadow: 0 6px 0 #58351e, 0 12px 20px rgba(39,55,28,.25);
}

body.hay-farm-mode .nav button {
  min-height: 51px;
  border-radius: 12px;
  transition: transform .09s ease, box-shadow .09s ease, background .12s ease;
}

body.hay-farm-mode .nav button.on {
  color: #214b29;
  background: linear-gradient(180deg, #ffe171, #ffb438);
  transform: translateY(-4px);
}

body.hay-farm-mode .nav button:active { transform: translateY(3px); }
body.hay-farm-mode .nav button.on:active { transform: translateY(0); }

body.hay-farm-mode .sheet {
  border-color: #e8cb82;
  background: linear-gradient(155deg, #fff7dd, #fff1ca);
}

body.hay-farm-mode .bank-hero,
body.hay-farm-mode .invite-hero {
  border: 2px solid #d8e7aa;
  border-radius: 20px;
  background: linear-gradient(145deg, #2b7046, #5eae65);
  box-shadow: 0 5px 0 #1f5939, 0 10px 20px rgba(39,75,38,.18);
}

body.hay-farm-mode .farm-rank-strip {
  border-radius: 16px;
  background: linear-gradient(145deg, #fff7dd, #fff1ca);
  box-shadow: 0 4px 0 #c99955;
}

body.hay-farm-mode #app button:focus-visible,
body.hay-farm-mode #app a:focus-visible {
  outline: 3px solid #327cae;
  outline-offset: 3px;
}

@media (max-width: 355px) {
  body.hay-farm-mode .hud { gap: 5px; padding-inline: 7px; }
  body.hay-farm-mode .coin { min-width: 0; padding-inline: 4px; font-size: 10px; }
  body.hay-farm-mode .lang-toggle { min-width: 0; font-size: 9px; }
  body.hay-farm-mode .crop-grid { gap: 4px; }
  body.hay-farm-mode .crop-card { padding-inline: 2px; }
  body.hay-farm-mode .nav button .nt { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  body.hay-farm-mode #app button { transition: none; }
}