:root {
  color-scheme: light;
  --paper: #fffdf6;
  --ink: #4e493b;
  --muted: #716d59;
  --edge: #e3e2d2;
  --green: #8dbb6f;
  --rose: #f1d5de;
  --focus: #815c85;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  background: #dbe7c7;
  color: var(--ink);
  font:
    13px/1.4 'Avenir Next',
    'Segoe UI',
    system-ui,
    sans-serif;
  overscroll-behavior: none;
}
button,
a,
input,
select {
  font: inherit;
}
button {
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--edge);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 3px #d8d7c5;
  font-weight: 750;
  min-height: 40px;
  touch-action: manipulation;
}
button:hover:not(:disabled) {
  background: #fffef4;
  border-color: #967b60;
}
button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
button:disabled {
  color: #8a806c;
  background: #e9e4d5;
  box-shadow: none;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
button[aria-pressed='true'] {
  background: #eef4e2;
  border-color: #8dbb6f;
  box-shadow: 0 3px #74a058;
}
button.primary {
  background: linear-gradient(180deg, #aed494, #8dbb6f);
  border-color: #8dbb6f;
  box-shadow: 0 4px #74a058;
  color: #2e4423;
}
small {
  font-size: 10px;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}
#world.panning {
  cursor: grabbing;
}
#world.tending {
  cursor: crosshair;
}
.farm-top {
  position: fixed;
  left: 24px;
  top: 20px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  pointer-events: none;
  gap: 15px;
}
.farm-name,
.farm-wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  background: #fffdf8f5;
  border: 2px solid var(--edge);
  border-radius: 20px;
  box-shadow: 0 6px 20px #6e74542b;
  pointer-events: auto;
}
.farm-name a {
  text-decoration: none;
  color: var(--ink);
  font-size: 23px;
  padding: 7px;
}
.farm-name small {
  letter-spacing: 2px;
  font-size: 9px;
}
.farm-name h1 {
  margin: 1px 0;
  font-size: 21px;
  letter-spacing: -0.4px;
}
.farm-wallet span {
  display: grid;
}
.farm-wallet strong {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.farm-wallet #level {
  background: #e5edd2;
  color: #496039;
  border-color: #b9c99b;
  font-weight: bold;
}
.view-tools {
  position: fixed;
  left: 24px;
  top: 224px;
  display: grid;
  gap: 8px;
}
.view-tools button {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 20px;
}
#connection {
  position: fixed;
  right: 24px;
  top: 102px;
  font-size: 11px;
  color: #4e5e40;
  background: #fff9e9e8;
  padding: 5px 9px;
  pointer-events: none;
}
#connection:empty {
  display: none;
}
#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: #e1e9ce;
  z-index: 20;
  font-size: 13px;
}
.loading-flower {
  color: #ba8d9f;
  font-size: 52px;
  animation: bob 1.5s ease-in-out infinite;
}
.farm-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  filter: drop-shadow(0 2px #72523518);
}
#farm-dock {
  position: fixed;
  bottom: max(15px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  width: max-content;
  padding: 10px 14px 7px;
  background: #fff9e9f5;
  border: 2px solid #fffcf0;
  border-radius: 22px;
  box-shadow: 0 6px 24px #6e745438;
}
#seed-tray {
  display: flex;
  gap: 7px;
  padding-bottom: 9px;
  border-bottom: 1px solid #ddcfb8;
  overflow: auto;
  scrollbar-width: thin;
}
#seed-tray button {
  min-width: 69px;
  display: grid;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  min-height: 48px;
}
#seed-tray small {
  grid-column: 1/-1;
  font-size: 9px;
  white-space: nowrap;
}
.seed-count {
  font-weight: bold;
  font-size: 14px;
}
#tools {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 9px;
}
#tools button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  white-space: nowrap;
}
#tools .farm-icon {
  width: 25px;
  height: 25px;
}
.dock-note {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 9px;
  color: var(--muted);
  margin-top: 7px;
}
#save-state {
  color: #48653e;
}
#hint {
  position: fixed;
  bottom: 219px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff9e9ee;
  border: 1px solid #d7c5a4;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  max-width: 90vw;
}
#hint button {
  padding: 0;
  min-height: 24px;
  width: 24px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 18px;
}
#hover-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
  position: fixed;
  pointer-events: none;
  padding: 7px 10px;
  background: #fff9e9f5;
  border: 1px solid #c7b796;
  box-shadow: 2px 2px #9d886740;
  font-size: 11px;
  z-index: 6;
  white-space: nowrap;
}
#hover-label .farm-icon {
  width: 18px;
  height: 18px;
}
#context {
  position: fixed;
  right: 24px;
  top: 135px;
  width: 330px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 350px);
  overflow: auto;
  background: var(--paper);
  border: 2px solid #fffcf2;
  border-radius: 24px;
  box-shadow: 0 12px 40px #6e745438;
  z-index: 5;
  padding: 16px;
  scrollbar-width: thin;
}
#context > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #ded0b7;
  padding-bottom: 10px;
}
#context h2 {
  font-size: 18px;
  margin: 0;
}
#context-close {
  padding: 0;
  font-size: 23px;
  min-height: 30px;
  width: 30px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
#context p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0;
}
#context h3 {
  font-size: 13px;
  margin: 0 0 5px;
}
#context .item {
  border-bottom: 1px solid #e4d9c3;
  padding: 12px 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
#context .item > div {
  flex: 1;
  min-width: 110px;
}
#context .item button {
  margin-left: auto;
  font-size: 11px;
}
#context .item small {
  display: block;
  margin: 3px 0;
}
#context .item .cost {
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#context .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#context .actions button {
  flex: 1;
}
#context .wide {
  width: 100%;
}
#context input,
#context select {
  border: 2px solid var(--edge);
  border-radius: 12px;
  color: var(--ink);
  background: #fffdf6;
  padding: 8px;
  max-width: 100%;
}
#context label {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  font-size: 11px;
}
#context details {
  margin-top: 16px;
}
#context summary {
  cursor: pointer;
  font-weight: bold;
  padding: 8px 0;
}
#toast {
  position: fixed;
  top: 103px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(500px, 90vw);
  padding: 10px 16px;
  background: var(--paper);
  box-shadow: 2px 2px #a38a6755;
  border: 1px solid #cbbb99;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 12px;
  text-align: center;
}
#toast.show {
  opacity: 1;
}
#placement {
  position: fixed;
  left: 50%;
  bottom: 216px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--paper);
  box-shadow: 3px 3px #9b836655;
  z-index: 7;
  font-size: 11px;
}
#placement button {
  font-size: 11px;
}
.reward-number {
  position: fixed;
  font-weight: bold;
  pointer-events: none;
  color: #fff7df;
  text-shadow: 1px 1px #70583c;
  animation: reward 0.9s ease-out forwards;
  z-index: 10;
}
@keyframes reward {
  to {
    transform: translateY(-55px);
    opacity: 0;
  }
}
@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
}
@media (max-width: 700px) {
  .farm-top {
    left: 12px;
    right: 12px;
    top: 12px;
    gap: 8px;
  }
  .farm-name,
  .farm-wallet {
    padding: 6px 9px;
    gap: 6px;
  }
  .farm-name h1 {
    font-size: 15px;
  }
  .farm-name small {
    font-size: 8px;
  }
  .farm-name a {
    padding: 4px;
  }
  .farm-wallet strong {
    font-size: 15px;
  }
  .farm-wallet small {
    font-size: 8px;
  }
  .farm-wallet #level {
    font-size: 11px;
    padding: 6px;
  }
  .view-tools {
    left: 12px;
    top: 190px;
    gap: 6px;
  }
  .view-tools button {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
  #connection {
    right: 12px;
    top: 89px;
    font-size: 9px;
  }
  #farm-dock {
    bottom: max(9px, env(safe-area-inset-bottom));
    padding: 8px;
    width: calc(100vw - 24px);
    max-width: 490px;
  }
  #seed-tray {
    gap: 5px;
    padding-bottom: 7px;
  }
  #seed-tray button {
    min-width: 59px;
    padding: 3px 5px;
    grid-template-columns: 28px auto;
    gap: 2px;
  }
  #seed-tray .farm-icon {
    width: 28px;
    height: 28px;
  }
  #tools {
    gap: 4px;
    margin-top: 7px;
  }
  #tools button {
    flex: 1;
    justify-content: center;
    padding: 5px 4px;
    min-height: 44px;
  }
  #tools .tool-text {
    display: none;
  }
  #tools .farm-icon {
    width: 27px;
    height: 27px;
  }
  .dock-note {
    font-size: 8px;
    gap: 5px;
  }
  #hint {
    bottom: 188px;
    padding: 6px 9px;
    font-size: 10px;
    min-width: 80vw;
  }
  #context {
    top: 91px;
    right: 12px;
    max-height: calc(100dvh - 285px);
    padding: 12px;
    width: 300px;
  }
  #context .item button {
    min-height: 44px;
  }
  #toast {
    top: 83px;
    font-size: 11px;
  }
  #placement {
    bottom: 190px;
    max-width: 92vw;
    min-width: 290px;
    flex-wrap: wrap;
    justify-content: center;
  }
  #placement span {
    flex-basis: 100%;
    text-align: center;
  }
}
@media (max-height: 550px) {
  #seed-tray small,
  .dock-note,
  #hint {
    display: none !important;
  }
  #seed-tray button {
    min-height: 35px;
  }
  #farm-dock {
    padding: 5px;
  }
  #tools {
    margin-top: 5px;
  }
  #context {
    top: 90px;
    max-height: calc(100dvh - 210px);
  }
  .view-tools {
    grid-template-columns: repeat(2, 35px);
  }
  #placement {
    bottom: 135px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

.farm-name {
  min-width: 0;
}
.farm-name > div {
  min-width: 0;
}
.farm-name h1 {
  max-width: 35vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.farm-wallet {
  flex-shrink: 0;
}
@media (max-width: 420px) {
  .farm-name h1 {
    max-width: 105px;
  }
  .farm-wallet {
    gap: 5px;
    padding: 6px;
  }
  .farm-wallet strong {
    font-size: 13px;
  }
}

/* Shared Gnomble shapes and colors, with crisp pixel artwork inside. */
#hint,
#hover-label,
#toast,
#placement,
#connection {
  border-radius: 12px;
}
button.primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #bce0a5, #9bc77c);
  border-color: #74a058;
}
#land-goal {
  position: fixed;
  top: 106px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 250px;
  padding: 12px 14px;
  text-align: left;
  background: linear-gradient(180deg, #fff6e2, #fbe8c4);
  border-color: #e5c98f;
  border-radius: 16px;
  box-shadow: 0 4px #d2b87e;
}
#land-goal > span:first-of-type {
  display: grid;
  gap: 2px;
  flex: 1;
}
#land-goal b {
  font-size: 14px;
  color: #6b4a2a;
}
#land-goal small {
  font-size: 11px;
  font-weight: 500;
  color: #786344;
}
#land-goal .goal-progress {
  font-size: 10px;
  font-weight: 600;
  color: #786344;
  font-variant-numeric: tabular-nums;
}
#land-goal .goal-arrow {
  color: #a47735;
  font-size: 22px;
}
#land-goal.ready {
  border-color: #91b974;
  box-shadow: 0 4px #74a058;
  background: linear-gradient(180deg, #f0f8df, #d8edbe);
}
.land-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
}
.land-summary small {
  display: block;
  font-size: 11px;
}
.land-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px 0;
}
.land-grid button {
  aspect-ratio: 1;
  padding: 0;
  min-height: 40px;
  border-radius: 9px;
  font-size: 20px;
}
.land-grid .owned {
  background: #d9eac2;
  border-color: #b1c996;
  color: #4f7139;
}
.land-grid .available {
  border-style: dashed;
  background: #fff4d9;
  border-color: #d8ba7d;
  color: #94652b;
}
.land-grid .future {
  background: #f2f1e8;
  border-color: #e7e7da;
  color: #b7b7a5;
}
.land-grid [aria-pressed='true'] {
  outline: 3px solid #ac83b6;
  outline-offset: 1px;
  box-shadow: none;
}
.land-grid .farm-icon {
  width: 28px;
  height: 28px;
}
#context .land-legend {
  font-size: 10px;
  margin: 0 0 12px;
}
.land-offer {
  background: #f7f8f0;
  border: 2px solid #e3e2d2;
  border-radius: 16px;
  padding: 12px;
}
.land-offer > button {
  width: 100%;
  margin-top: 10px;
}
.land-cost {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  gap: 8px;
}
.land-offer progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 6px;
  accent-color: #8dbb6f;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #e3e2d2;
}
.land-offer progress::-webkit-progress-bar {
  background: #e3e2d2;
}
.land-offer progress::-webkit-progress-value {
  background: #8dbb6f;
}
.land-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
  background: #fff1d7;
  border-color: #e5c98f;
}
.farm-icon {
  image-rendering: pixelated;
}
#context {
  border-color: var(--edge);
}
@media (max-width: 700px) {
  #land-goal {
    top: 87px;
    left: 12px;
    width: 220px;
    padding: 9px 11px;
    gap: 8px;
  }
  #land-goal b {
    font-size: 12px;
  }
  #land-goal small {
    font-size: 10px;
  }
  #land-goal .farm-icon {
    width: 28px;
    height: 28px;
  }
  #context {
    top: 87px;
  }
}
@media (max-height: 550px) {
  #land-goal {
    top: 90px;
    width: 220px;
    padding: 8px;
  }
  .view-tools {
    top: 185px;
  }
}

#context[data-page='land'] {
  top: 106px;
  max-height: calc(100dvh - 305px);
}
.land-grid {
  max-width: 220px;
  margin: 0 auto;
}
@media (max-width: 700px) {
  #context[data-page='land'] {
    top: 87px;
    max-height: calc(100dvh - 275px);
  }
}
@media (max-height: 550px) {
  #context[data-page='land'] {
    top: 90px;
    max-height: calc(100dvh - 210px);
  }
}

@media (max-width: 420px) {
  #tools button {
    min-width: 0;
    padding: 5px 3px;
  }
  #tools .farm-icon {
    width: 24px;
    height: 24px;
  }
}

/* Compact, right-hand tool shelf. The farm stays the main interaction surface. */
#farm-dock {
  left: auto;
  right: 18px;
  transform: none;
  padding: 8px;
  width: max-content;
  max-width: calc(100vw - 24px);
}
#tools {
  justify-content: flex-end;
  gap: 7px;
  margin-top: 7px;
}
#tools button {
  flex-direction: column;
  min-width: 58px;
  padding: 7px 10px;
  gap: 2px;
}
#tools .farm-icon {
  width: 29px;
  height: 29px;
}
#tools .tool-text {
  display: inline;
  font-size: 10px;
}
#seed-tray {
  max-width: 425px;
  gap: 3px;
  border: 0;
  padding: 0;
}
#seed-tray button {
  min-width: 57px;
  padding: 3px;
  grid-template-columns: 27px auto;
}
#seed-tray small {
  display: none;
}
#seed-tray .farm-icon {
  width: 27px;
  height: 27px;
}
.dock-note {
  justify-content: flex-end;
  margin: 5px 3px 0;
}
#tool-note {
  display: none;
}
#context,
#context[data-page='land'] {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 390px;
  max-height: calc(100dvh - 180px);
}
#context > header {
  position: sticky;
  top: -16px;
  background: var(--paper);
  z-index: 2;
}
#hint {
  bottom: 175px;
  font-size: 10px;
}
#placement {
  bottom: 175px;
}
.xp-track {
  display: block;
  width: 54px;
  height: 5px;
  background: #c9d9af;
  border-radius: 4px;
  margin-top: 5px;
  overflow: hidden;
}
.xp-track i {
  display: block;
  height: 100%;
  background: #769d51;
}
.level-progress {
  padding: 12px;
  background: #f0f5e6;
  border-radius: 16px;
}
.level-progress progress {
  width: 100%;
  height: 9px;
  accent-color: #8dbb6f;
}
.patch-size {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.patch-size label {
  flex: 1;
}
.express-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 0 12px;
}
.express-summary small {
  display: block;
}
.train-gift {
  margin-top: 14px;
  background: #fff0dc;
  border: 2px solid #edd9b8;
  border-radius: 16px;
  padding: 12px;
}
#context .quiet {
  font-size: 10px;
}
.move-building {
  display: block;
  margin: 18px 0 0 auto;
  font-size: 10px;
  border: 0;
  background: none;
  box-shadow: none;
}
#train-status {
  position: fixed;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-radius: 16px;
  background: #f9e7ed;
  border-color: #e9c4d0;
  padding: 9px 12px;
}
#train-status small {
  display: block;
  font-weight: 500;
}
@media (max-width: 700px) {
  #farm-dock {
    right: 12px;
    max-width: calc(100vw - 24px);
    width: auto;
  }
  #tools button {
    min-width: 48px;
    padding: 5px 8px;
  }
  #tools .farm-icon {
    width: 26px;
    height: 26px;
  }
  #seed-tray {
    max-width: 310px;
  }
  #seed-tray button {
    min-width: 48px;
  }
  #train-status {
    left: 12px;
    bottom: 175px;
    padding: 6px 10px;
  }
  #train-status .farm-icon {
    width: 24px;
    height: 24px;
  }
  #train-status b {
    font-size: 10px;
  }
  #context,
  #context[data-page='land'] {
    top: 50%;
    width: calc(100vw - 28px);
    max-height: calc(100dvh - 150px);
  }
  #hint {
    display: none;
  }
}
@media (max-height: 550px) {
  #context,
  #context[data-page='land'] {
    max-height: calc(100dvh - 32px);
  }
  #train-status {
    left: 275px;
    bottom: auto;
    top: 90px;
  }
  #placement {
    bottom: 135px;
  }
}

#context .actions + button {
  margin-top: 12px;
}

button.primary:disabled {
  background: #e9e4d5;
  border-color: #ddd8c8;
  color: #8a806c;
  box-shadow: none;
  cursor: default;
}

.nature-choices label { display:flex; align-items:center; gap:10px; padding:7px 0; font-weight:600; }
.nature-choices input { width:18px; height:18px; accent-color:#7ca66b; }
.nature-choices .farm-icon { width:26px; height:26px; }
#tools [data-tool="water"].empty:not([aria-pressed="true"]) { background:#edf3f0; }
#tools { gap:6px; }
#tools button { min-width:48px; }
canvas.watering { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%239cbfca' stroke='%235e7f88' d='M6 12h20l-3 17H9z'/%3E%3Cpath fill='none' stroke='%236c969f' stroke-width='3' d='M9 13V7q7-7 14 0v6'/%3E%3Cpath fill='%23e0f2f3' d='M10 15h4v10h-3z'/%3E%3C/svg%3E") 16 26, crosshair; }
@media(max-width:700px) { #tools {gap:4px;} #tools button {min-width:43px;padding:7px 5px;} }
#context .nature-choices label { display:flex; flex-direction:row; align-items:center; gap:10px; padding:6px 0; line-height:1.3; }
#context .nature-choices input { flex:0 0 18px; width:18px; min-width:18px; height:18px; min-height:18px; margin:0; padding:0; }
#context .nature-choices .farm-icon { flex:0 0 26px; width:26px; height:26px; }

.home-swatches{display:flex;gap:10px;margin:8px 0 18px}.home-swatches button{width:42px;height:38px;background:var(--swatch);border:3px solid #c2ad86;border-radius:7px;box-shadow:0 3px 0 #bfa986}.home-swatches [aria-pressed=true]{outline:3px solid #89708e;outline-offset:3px}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;background:#dfc9a4;border:3px solid #aa8964;border-radius:10px}.room-grid button{min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff0d1}.room-grid small{font-size:11px}.room-grid button:disabled{background:#c6b498}.furniture-picks{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.furniture-picks [aria-pressed=true]{background:#ecd8ee;border-color:#95739f}#home-name input{min-width:0;flex:1;padding:10px;border:2px solid #bfa986;border-radius:7px;background:#fff9ec;color:inherit}#context-body .item .actions{flex-wrap:wrap;justify-content:end}

#home-tools{position:fixed;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px;padding:10px;background:#fffae9;border:3px solid #d5c9ae;border-radius:20px;box-shadow:0 5px 0 #9c987a44}#home-tools[hidden]{display:none}#home-tools button{padding:12px 18px}.inside-cottage #farm-dock,.inside-cottage #land-goal,.inside-cottage #hint{display:none}

/* XP stays readable without turning the farm into a dashboard. */
.farm-wallet #level {
  min-width: 112px;
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 8px 12px;
  font-variant-numeric: tabular-nums;
}
#level b {
  font-size: 13px;
}
#level .xp-count {
  font-size: 11px;
  font-weight: 700;
}
#level .xp-track {
  width: 100%;
  height: 5px;
  margin: 0;
}
#level .xp-track i {
  transition: width 220ms ease-out;
}
#level small {
  font-size: 9px;
  font-weight: 400;
}
#xp-gain {
  position: fixed;
  top: 120px;
  right: 28px;
  z-index: 8;
  background: #fff9df;
  color: #596c39;
  border: 2px solid #d1d5ac;
  box-shadow: 0 3px 0 #bac69855;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
#xp-gain.show {
  opacity: 1;
  transform: translateY(0);
}
.xp-reward {
  color: #52693c;
  font-weight: 700;
}
.level-progress p {
  margin: 9px 0;
}
.level-progress small {
  display: block;
  margin-top: 6px;
}
.xp-heading {
  font-size: 15px;
  margin: 18px 0 8px;
}
.xp-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.xp-sources button {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 10px;
}
.xp-sources .farm-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.xp-sources b {
  font-size: 12px;
  display: block;
}
.xp-sources small {
  font-size: 10px;
  display: block;
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .farm-top {
    gap: 6px;
  }
  .farm-wallet #level {
    min-width: 94px;
    padding: 6px 8px;
  }
  #level b {
    font-size: 11px;
  }
  #level .xp-count {
    font-size: 10px;
  }
  #xp-gain {
    top: 112px;
    right: 12px;
  }
}
@media (max-width: 380px) {
  .xp-sources {
    grid-template-columns: 1fr;
  }
}

.level-progress progress {
  appearance: none;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #dce6cd;
}
.level-progress progress::-webkit-progress-bar { background: #dce6cd; border-radius: 6px; }
.level-progress progress::-webkit-progress-value { background: #8eae6e; border-radius: 6px; }
.level-progress progress::-moz-progress-bar { background: #8eae6e; border-radius: 6px; }
@media (max-width: 700px) {
  #land-goal { top: 110px; }
}
@media (max-width: 600px) {
  #xp-gain { top: auto; bottom: 185px; max-width: 160px; }
}

/* Grass actions use the same compact card and pixel icons as the farm dock. */
.cell-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cell-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
}
.cell-actions .farm-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.cell-keep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.cell-keep input {
  accent-color: var(--focus);
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  .cell-actions {
    grid-template-columns: 1fr;
  }
}

/* Farm milestones remain optional and leave the world running behind them. */
#daily-gift { display:flex; align-items:center; gap:5px; padding:5px 8px; background:#f9e7d5; border-color:#e9cda8; }
#daily-gift .farm-icon { width:27px; height:27px; }
#daily-gift span { display:grid; text-align:left; font-size:11px; }
#level.level-ready { border-color:#c29959; background:#fff0c6; }
#level.level-ready .xp-track i { background:#e5bb65; }
#recovery-note { position:fixed; top:125px; right:24px; display:flex; gap:5px; padding:7px; border-radius:14px; background:#fff9eaf2; border:2px solid #e8dbc0; max-width:calc(100vw - 48px); }
#recovery-note button { border:0; box-shadow:none; background:transparent; font-size:11px; }
#recovery-dismiss { padding:4px 9px; }
.level-price { display:flex; gap:10px; margin:18px 0; }
.level-price span { flex:1; padding:12px; border:2px solid #e6ddcb; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; }
.level-price .met { border-color:#bdd3a8; background:#edf5df; }
.level-price .farm-icon { width:24px; height:24px; }
.unlock-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:16px 0; }
.unlock-card { background:#fbf1d9; border:2px solid #eadbb9; border-radius:13px; padding:14px 7px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.unlock-card:nth-child(3n+2) { background:#f5e8ee; border-color:#e9d3df; }
.unlock-card:nth-child(3n) { background:#e9f1e1; border-color:#d5e3c9; }
.unlock-card b { font-size:11px; }
.unlock-card .farm-icon { width:44px; height:44px; }
.level-celebration { text-align:center; }
.level-celebration h3 { font-size:27px; margin:4px; color:#805d83; }
.level-celebration p { margin:3px; }
.level-star { width:125px; height:125px; margin:5px auto 15px; position:relative; animation:level-pop .55s cubic-bezier(.16,.86,.3,1.3); }
.level-star .farm-icon { width:100%; height:100%; filter:drop-shadow(0 5px 0 #d6b273); }
.level-star b { position:absolute; inset:44px 0 0; font-size:32px; color:#725230; text-shadow:0 2px #fff0bb; }
#context[data-page="celebrate"] { border-color:#d9b7cf; box-shadow:0 12px 50px #66513444; }
.daily-days { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0; }
.daily-days div { display:flex; flex-direction:column; align-items:center; padding:12px 3px; border:2px solid #e5dfcd; border-radius:12px; gap:6px; }
.daily-days .current { background:#fbebc1; border-color:#cda966; }
.daily-days .farm-icon { width:36px; height:36px; }
.farm-elsewhere { display:flex; gap:18px; margin:20px 0 0; }
.farm-elsewhere a { color:#76597d; font-weight:700; }
@keyframes level-pop { from { transform:scale(.4) rotate(-12deg); opacity:0; } to { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .level-star { animation:none; } }
@media (max-width:600px) { #daily-gift span { display:none; } #daily-gift { min-height:36px; padding:3px; } .farm-wallet { gap:7px; } #recovery-note { top:110px; right:10px; } }