/* FarmDew Home renderer — one visible Home world surface.
   Canvas owns core world art; existing semantic DOM controls still own actions. */

.farmdew-tilemap-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
}

.farmdew-tilemap-preview .farmdew-tilemap-canvas{opacity:1}

/* The canvas is the current terrain owner. These two art-skin pseudo-elements still
   have a live historical owner in farmdew-art.css, so suppress them until that owner
   is deliberately retired rather than allowing duplicate world texture to reappear. */
.farmdew-tilemap-preview .farmdew-stage::before,
.farmdew-tilemap-preview .farmdew-stage::after{content:none!important;display:none!important}

/* ---------- Compact area switcher: useful, not dominant ---------- */
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher{
  position:absolute;
  z-index:18;
  top:calc(env(safe-area-inset-top) + 60px);
  right:8px;
  left:auto;
  width:128px;
  margin:0;
  padding:2px;
  gap:2px;
  grid-template-columns:1fr 1fr;
  border-width:2px;
  border-radius:9px;
  box-shadow:0 3px 7px rgba(24,28,16,.2),inset 0 1px 0 rgba(255,232,184,.14);
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab{
  min-width:0;
  min-height:44px;
  padding:3px 4px;
  grid-template-columns:14px minmax(0,1fr);
  grid-template-rows:1fr;
  column-gap:3px;
  border-radius:6px;
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab>span{
  width:14px;
  height:14px;
  grid-row:1;
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab strong{
  align-self:center;
  min-width:0;
  font-size:0;
  line-height:1;
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab[data-area="home"] strong::after{content:"Home"}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab[data-area="back"] strong::after{content:"Back"}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab strong::after{
  display:block;
  overflow:hidden;
  font-size:.54rem;
  font-weight:900;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab small{display:none!important}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab[data-area="back"]:disabled small{
  position:absolute;
  top:-5px;
  right:-4px;
  display:block!important;
  min-width:23px;
  padding:1px 3px;
  border:1px solid #52341f;
  border-radius:6px;
  background:#7b5a34;
  color:#f2dcad;
  box-shadow:0 1px 2px rgba(35,24,13,.25);
  font-size:0;
  line-height:1;
  text-align:center;
}
.farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab[data-area="back"]:disabled small::after{
  content:"L10";
  font-size:.36rem;
  font-weight:900;
  letter-spacing:.02em;
}

/* ---------- Crop field: real soil beneath semantic plot buttons ---------- */
.farmdew-tilemap-preview .farmdew-plots::before,
.farmdew-tilemap-preview .farmdew-plots::after{content:none!important;display:none!important}
.farmdew-tilemap-preview .farm-plot:not(.locked)::before{
  background:transparent!important;
  box-shadow:none!important;
  clip-path:none!important;
  transform:none!important;
}
.farmdew-tilemap-preview .farm-plot{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.farmdew-tilemap-preview .farm-plot.empty .farm-plot-empty{opacity:0}
.farmdew-tilemap-preview .farm-plot.empty:focus-visible .farm-plot-empty,
.farmdew-tilemap-preview .farm-plot.empty:active .farm-plot-empty{opacity:.7}
.farmdew-tilemap-preview .farm-plot:not(.ready)>small{opacity:.18}
.farmdew-tilemap-preview .farm-plot>i{opacity:.5}

/* Canonical 80×48 bed coordinates; crop art cannot participate in grid flow. */
.farmdew-tilemap-preview .farm-plot{padding:0;overflow:visible;container-type:inline-size}
.farmdew-tilemap-preview .farm-plot .farm-crop-stage{
  position:absolute;left:var(--crop-left);top:var(--crop-top);
  width:var(--crop-width);height:var(--crop-height);display:grid;place-items:center;
  font-size:32cqw!important;line-height:1;opacity:1;transform:none;animation:none;filter:none;
  background:none;border-radius:0;box-shadow:none;
  image-rendering:pixelated;pointer-events:none;
}
.farmdew-tilemap-preview .farm-plot.has-tilemap-crop .farm-crop-stage{
  font-size:0!important;background-image:var(--crop-image);background-repeat:no-repeat;
  background-size:500% 100%;background-position:calc(var(--crop-frame) * 25%) 0;
}
.farmdew-tilemap-preview .farm-plot>small{
  position:absolute;bottom:2px;left:0;width:100%;pointer-events:none;
}
.farmdew-tilemap-preview .farm-plot.ready::after{pointer-events:none}

/* ---------- Bulletin Board: canvas art + DOM interaction ---------- */
.farmdew-tilemap-preview .farmdew-board-button{
  left:18%;
  top:55%;
  width:52px;
  min-height:52px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none;
  color:transparent;
  /* The layout editor projects this semantic target from the same logical Board frame
     used by canvas artwork. These are only the unchanged default placement values. */
  transform:none;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.farmdew-tilemap-preview .farmdew-board-button::before,
.farmdew-tilemap-preview .farmdew-board-button::after{display:none}
.farmdew-tilemap-preview .farmdew-board-button>small{display:none}
.farmdew-tilemap-preview .farmdew-board-button:active{transform:scale(.98)}
.farmdew-tilemap-preview .farmdew-board-button.has-ready{animation:none;box-shadow:0 0 0 2px rgba(255,224,109,.72)}
.farmdew-tilemap-preview .farmdew-board-button:focus-visible{outline:3px solid #fff0a8;outline-offset:1px}

/* Customization remains a semantic control but stays secondary to the farm world. */
.farmdew-tilemap-preview .farmdew-customize-button{
  left:5%;
  top:68%;
  width:48px;
  min-height:48px;
  border:2px solid #49321f;
  border-radius:2px;
  background:linear-gradient(180deg,#8c6941,#66472d);
  box-shadow:0 3px 0 rgba(46,34,22,.2);
}
.farmdew-tilemap-preview .farmdew-customize-button>small{font-size:.38rem;color:#f2ddb4}

/* ---------- Farmer: visible pack sprite, same existing movement anchor ---------- */
.farmdew-tilemap-preview .farmdew-farmer{
  z-index:9!important;
  display:block!important;
  width:48px;
  height:48px;
  opacity:1!important;
  visibility:visible!important;
  filter:drop-shadow(0 3px 0 rgba(25,42,25,.18));
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.farmdew-tilemap-preview .farmdew-farmer>svg{display:none}
.farmdew-tilemap-farmer-sprite{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:48px;
  height:48px;
  opacity:1;
  background-image:none;
  background-position:0 0;
  background-size:192px 48px;
  background-repeat:no-repeat;
  animation:farmdew-tilemap-idle .9s linear infinite;
  transform-origin:center bottom;
}
.farmdew-tilemap-preview .farmdew-farmer.is-tilemap-walking .farmdew-tilemap-farmer-sprite{
  background-size:288px 144px;
  animation:farmdew-tilemap-walk .55s linear infinite;
}
.farmdew-tilemap-preview .farmdew-farmer[data-tilemap-direction="south"].is-tilemap-walking .farmdew-tilemap-farmer-sprite{background-position-y:0}
.farmdew-tilemap-preview .farmdew-farmer[data-tilemap-direction="north"].is-tilemap-walking .farmdew-tilemap-farmer-sprite{background-position-y:-48px}
.farmdew-tilemap-preview .farmdew-farmer[data-tilemap-direction="east"].is-tilemap-walking .farmdew-tilemap-farmer-sprite,
.farmdew-tilemap-preview .farmdew-farmer[data-tilemap-direction="west"].is-tilemap-walking .farmdew-tilemap-farmer-sprite{background-position-y:-96px}
.farmdew-tilemap-preview .farmdew-farmer[data-tilemap-direction="west"] .farmdew-tilemap-farmer-sprite{transform:scaleX(-1)}

/* Interaction/accessibility remains DOM-owned. */
.farmdew-tilemap-preview .farmdew-plots{pointer-events:none}
.farmdew-tilemap-preview .farm-plot{pointer-events:auto}
.farmdew-tilemap-preview .farmdew-tilemap-canvas{touch-action:none;user-select:none;-webkit-user-select:none}

/* Explicit frame positions avoid the old final blank sprite frame. */
@keyframes farmdew-tilemap-idle{
  0%,24.99%{background-position-x:0}
  25%,49.99%{background-position-x:-48px}
  50%,74.99%{background-position-x:-96px}
  75%,100%{background-position-x:-144px}
}
@keyframes farmdew-tilemap-walk{
  0%,16.65%{background-position-x:0}
  16.66%,33.31%{background-position-x:-48px}
  33.32%,49.97%{background-position-x:-96px}
  49.98%,66.63%{background-position-x:-144px}
  66.64%,83.29%{background-position-x:-192px}
  83.3%,100%{background-position-x:-240px}
}

@media(max-width:390px){
  .farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher{right:7px;width:124px}
}
@media(max-width:360px){
  .farmdew-tilemap-preview .farmdew-customize-button{left:4%;top:69%}
  .farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher{right:6px;width:120px}
  .farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab{padding-inline:3px;grid-template-columns:13px minmax(0,1fr)}
  .farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab>span{width:13px;height:13px}
  .farmdew-tilemap-preview .farmdew-game>.farmdew-area-switcher .farmdew-area-tab strong::after{font-size:.5rem}
}

@media(prefers-reduced-motion:reduce){
  .farmdew-tilemap-preview .farmdew-tilemap-canvas,
  .farmdew-tilemap-farmer-sprite,
  .farmdew-tilemap-preview .farm-plot.has-tilemap-crop.ready .farm-crop-stage{animation:none!important;transition:none!important}
}