/* =====================================================================
   stardew.css - RACCOON HOLLOW. A cozy walkable farm in CSS grid
   tiles, wooden HUD, and a proper dialogue box.
   ===================================================================== */

.farm-frame{
  border:6px solid #5b3a1e; border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 3px #2d1c0d, var(--shadow); margin:18px 0 8px;
  background:#20301a;
}
#farm-hud{
  font-family:var(--font-term); font-size:19px; color:#f5edd0;
  background:linear-gradient(180deg, #6b4523, #57381c);
  border-bottom:3px solid #2d1c0d; padding:6px 12px;
  display:flex; flex-direction:column; line-height:1.25;
}
#farm-hud .hud-line.small{ font-size:16px; color:#e2cfa4; }
#farm-hud .hud-bar{ letter-spacing:-1px; color:#8fd06a; }
#farm-hud .hud-bar.low{ color:#e8734a; }
#farm-hud .hud-rival{ color:#8fbdf0; }

/* the bar under the map: what you're planting, and who you're racing */
.farm-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:10px 0 0; font-family:var(--font-term);
}
.farm-seedsel{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.seedsel-lab{ font-size:18px; color:var(--muted); }
.farm-seedsel button, .farm-vs{
  font-family:var(--font-term); font-size:17px; line-height:1; cursor:pointer;
  color:var(--ink); background:var(--bg3); border:2px solid var(--line);
  border-radius:8px; padding:6px 11px;
}
.farm-seedsel button small{ opacity:.5; font-size:12px; margin-left:3px; }
.farm-seedsel button:hover, .farm-vs:hover{ border-color:var(--accent); }
.farm-seedsel button.on{
  background:var(--accent); color:#122106; border-color:var(--accent); font-weight:700;
}
.farm-vs{ margin-left:auto; }
.farm-vs.on{ background:#4b6ea8; color:#f2f6ff; border-color:#7fa8de; }

/* store rows */
.shop-row{
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px 0; border-top:1px solid rgba(66,40,14,.25); font-size:18px;
}
.shop-row:first-child{ border-top:0; }
.shop-row span{ flex:1; }
.shop-row i{ opacity:.7; font-size:16px; }
.shop-row button{ flex:none; margin:0; }
.shop-row button:disabled{ opacity:.45; cursor:default; }
.shop-row.ring-row{ border-top:2px solid #8a4b12; margin-top:4px; }
.shop-row.ring-row button:not(:disabled){ background:#e8c15a; }
#farm{
  position:relative; overflow:auto; max-height:70vh;
  display:flex; justify-content:center; background:#20301a;
}
.farm-grid{ position:relative; flex:none; }

.farm-tile{
  position:absolute; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; user-select:none;
}
.tile-grass{ background:#3d5a2b; }
.tile-grass:nth-child(odd){ background:#41602e; }
.tile-path{ background:#8b6f47; box-shadow:inset 0 0 6px #6b5335; }
.tile-water{ background:#2b6a8f; animation:water 3s ease-in-out infinite; }
@keyframes water{ 50%{ filter:brightness(1.15) } }
.tile-soil{ background:#6b4a2b; box-shadow:inset 0 0 5px #4a3018; }
.tile-soil.tilled{ background:#54371c;
  background-image:repeating-linear-gradient(0deg, transparent 0 6px, rgba(0,0,0,.18) 6px 8px); }
.tile-soil.wet{ background:#3e2913; }
.tile-soil.crop{ font-size:20px; }
.tile-rock{ background:#5a5a52; font-size:26px; }
.house-main{
  font-size:56px; z-index:2; overflow:visible;
  width:68px; height:68px; /* spans the 2x2 farmhouse block */
}
/* ---- tiles drawn in CSS (no emoji) ---------------------------------
   A tile that BLOCKS has to look blocked across its whole 34px. These
   used to be drawn inset - a 26px canopy in a 34px solid tile - which
   meant a few pixels of ordinary-looking grass down each side of every
   tree, mine and shop that you still could not walk through. That is
   what "invisible blocks" were. The scenery now fills its tile, and
   anything solid also gets a footprint underneath it.
   (These use .farm-tile.x so they outrank .tile-grass:nth-child(odd).)
   -------------------------------------------------------------------- */
.farm-tile.tile-grass.solid{ background-color:#31502a; }  /* solid but nothing drawn on top */

.farm-tile.tile-tree{ position:relative; }
/* needs the extra class to outrank the generic footprint above */
.farm-tile.tile-grass.tile-tree{
  background-color:#2c4720;     /* undergrowth: the whole tile is impassable */
}
.farm-tile.tile-tree::before{   /* canopy, out to the tile edges */
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:33px; height:27px; border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 34% 28%, #52933c, #2f5a22 72%);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.22);
}
.farm-tile.tile-tree::after{    /* trunk, down to the bottom of the tile */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:8px; height:10px; background:#5b3a1e; border-radius:1px 1px 0 0;
}

.farm-tile.tile-mine{ position:relative; background-color:#43433d; }
.farm-tile.tile-mine::before{   /* rocky mouth, filling the tile */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,#7b7b70,#4a4a44);
  clip-path:polygon(50% 0,100% 52%,100% 100%,0 100%,0 52%);
}
.farm-tile.tile-mine::after{    /* the dark entrance */
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:15px; height:14px; background:#100e0c; border-radius:7px 7px 0 0;
}
.farm-tile.bush{ position:relative; }
.farm-tile.bush::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26px; height:24px; border-radius:48%;
  background:radial-gradient(circle at 34% 30%, #59a03f, #2c5220 72%);
}
/* farmhouse: the real art, spanning the 2x2 block */
.house-main{ background:url("../farmhousestardew.png") no-repeat center/contain; }

/* crops: a sprout that grows each night, then the crop itself */
.tile-soil.seeded{ position:relative; }
.tile-soil.seeded::after{
  content:""; position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:4px; height:var(--sprout, 10px); background:#7bc043; border-radius:2px;
  box-shadow:-5px -3px 0 -1px #7bc043, 5px -3px 0 -1px #7bc043;
}
.tile-soil.grow1{ --sprout:8px; }
.tile-soil.grow2{ --sprout:14px; }
.tile-soil.grow3{ --sprout:19px; }
/* the more valuable the seed, the greener the shoot */
.tile-soil.seeded.crop-cauliflower::after{ background:#9fd67a;
  box-shadow:-5px -3px 0 -1px #9fd67a, 5px -3px 0 -1px #9fd67a; }
.tile-soil.seeded.crop-starfruit::after{ background:#f2c24b;
  box-shadow:-5px -3px 0 -1px #f2c24b, 5px -3px 0 -1px #f2c24b; }

.tile-soil.grown.crop-parsnip{
  background-image:url("../Gold_Carrot_stardew.webp");
  background-repeat:no-repeat; background-position:center; background-size:24px 24px;
}
/* cauliflower: a pale head in a collar of leaves */
.tile-soil.grown.crop-cauliflower::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:19px; height:16px; border-radius:50% 50% 44% 44%;
  background:radial-gradient(circle at 36% 30%, #fdfbea, #ddd8b4 70%);
  box-shadow:0 5px 0 -3px #4e8c3a, -8px 3px 0 -4px #4e8c3a, 8px 3px 0 -4px #4e8c3a;
}
/* starfruit: the one worth 900g, and it knows it */
.tile-soil.grown.crop-starfruit::after{
  content:"★"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:23px; line-height:1; color:#ffd43f;
  text-shadow:0 0 8px #ffb524, 0 2px 0 #a5761c;
}

/* the general store - also filling its tile, for the same reason */
.farm-tile.tile-store{ position:relative; }
.farm-tile.tile-grass.tile-store{ background-color:#6b4423; }
.farm-tile.tile-store::before{  /* the shop itself */
  content:""; position:absolute; inset:7px 0 0;
  background:linear-gradient(180deg,#a8703c,#7d4f27);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.2);
}
.farm-tile.tile-store::after{   /* striped awning across the front */
  content:""; position:absolute; left:0; right:0; top:2px; height:9px;
  background:repeating-linear-gradient(90deg,#e8e2d0 0 4px,#c0392b 4px 8px);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* villagers, drawn instead of emoji faces */
.farm-sprite.npc{ position:relative; }
.farm-sprite.npc::before{      /* head */
  content:""; position:absolute; left:50%; top:5px; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; background:#f0c9a0;
  box-shadow:0 -3px 0 0 var(--npc-hair, #6b4a2b);
}
.farm-sprite.npc::after{       /* body */
  content:""; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  width:18px; height:15px; border-radius:5px 5px 3px 3px; background:var(--npc-coat, #7b6bd6);
}
.npc-fern{ --npc-hair:#d8d8d8; --npc-coat:#b8558f; }
.npc-rob{ --npc-hair:#3b2a17; --npc-coat:#d1922f; }
.npc-rival{ --npc-hair:#1f1f24; --npc-coat:#4b6ea8; }

/* =====================================================================
   THE PLACEHOLDER CHARACTER - the one the ring is for.
   Deliberately a stand-in: greyed out, dashed outline, and stardew.js
   drops a "?" on top, so it never reads as finished art.

   TO RESKIN: delete this block and give .npc-sweetheart a sprite sheet
   the way .farm-sprite.player does, then change `name` (and clear the
   `placeholder` flag) on SWEETHEART in js/rooms/stardew.js.
   ===================================================================== */
.farm-sprite.npc-sweetheart{
  --npc-hair:#8a7f96; --npc-coat:#6f6480;
  outline:2px dashed rgba(255,255,255,.45); outline-offset:-4px; border-radius:7px;
  font-family:var(--font-pixel); font-size:11px; color:#fff;
  align-items:flex-start; padding-top:1px;
}
.farm-sprite.npc-sweetheart::before,
.farm-sprite.npc-sweetheart::after{ opacity:.6; }

.farm-tile.bush.rustle{ animation:rustle .5s ease; }
@keyframes rustle{ 25%{ transform:rotate(-8deg) scale(1.08) } 65%{ transform:rotate(7deg) } }

.farm-sprite{
  position:absolute; left:0; top:0; width:34px; height:34px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1; transition:transform .13s linear;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.4)); pointer-events:none;
}
/* Facing left is baked into the transform string that place() writes.
   It must NOT be done with the standalone `scale` property: that one
   composes BEFORE `transform`, so scale(-1,1) x translate(x,y) mirrors
   the translation too and the sprite lands at -x, off the map. */
/* Clint, the playable character (clint.png: 2 walk frames x 3 dir rows) */
.farm-sprite.player{
  width:24px; height:48px; margin-left:5px; margin-top:-14px;
  background:url("../clint.png") no-repeat 0 0;
  background-size:48px 144px; image-rendering:pixelated;
}
.farm-sprite.player.step{ animation:bump .15s; }
@keyframes bump{ 50%{ margin-top:-17px } }

/* dialogue / message box - stardew-style wooden speech panel */
#farm-msg{
  min-height:52px; margin:0; padding:10px 16px;
  font-family:var(--font-term); font-size:20px; line-height:1.35; color:#42280e;
  background:linear-gradient(180deg, #f7e6b5, #ecd28e);
  border-top:3px solid #2d1c0d;
  opacity:.55; transition:opacity .2s;
}
#farm-msg.show{ opacity:1; }
#farm-msg b{ color:#8a4b12; }

/* touch pad */
.farm-pad{ display:none; gap:8px; justify-content:center; margin:12px 0; }
.farm-pad button{
  width:56px; height:56px; font-size:24px; border-radius:12px; cursor:pointer;
  color:var(--ink); background:var(--bg3); border:2px solid var(--line);
  touch-action:manipulation;
}
.farm-pad button:active{ transform:scale(.93); }
.farm-pad .act{ background:var(--accent); color:#1c2b12; font-family:var(--font-pixel); font-size:12px; }
@media (pointer:coarse){ .farm-pad{ display:flex; } }

/* overlays (farmhouse, mine) */
.farm-overlay{
  position:fixed; inset:0; z-index:8000; display:flex; align-items:center; justify-content:center;
  background:rgba(8,12,5,.72); padding:20px;
}
.farm-overlay[hidden]{ display:none !important; }
.farm-card{
  max-width:440px; width:100%; border-radius:10px; padding:20px 22px;
  background:linear-gradient(180deg, #f7e6b5, #ecd28e); color:#42280e;
  border:5px solid #5b3a1e; box-shadow:0 0 0 3px #2d1c0d, var(--shadow);
  font-family:var(--font-term); font-size:20px; line-height:1.4;
  text-align:center;
}
.farm-card h3{ font-family:var(--font-pixel); color:#8a4b12; margin:0 0 10px; font-size:16px; }
.farm-card-art{ display:block; width:132px; height:auto; margin:0 auto 10px; image-rendering:pixelated; }
#farm-hud .hud-ico{ width:17px; height:17px; vertical-align:-3px; image-rendering:pixelated; }
.farm-card ul{ list-style:none; margin:0 0 12px; padding:0; text-align:left; }
.farm-card li{ padding:2px 0; }
.farm-card button{
  font-family:var(--font-pixel); font-size:12px; border-radius:8px; cursor:pointer;
  padding:10px 16px; margin:4px; border:2px solid #5b3a1e; background:#fdf3cf; color:#42280e;
}
.farm-card button:hover{ background:#fff; }
.farm-card button.primary{ background:#7bb24e; color:#122106; }
#farm-rock{ font-size:56px; background:none; border:0; cursor:pointer; padding:6px; }
#farm-rock.crack{ animation:crack .18s; }
@keyframes crack{ 50%{ transform:rotate(6deg) scale(.92) } }
#farm-rock:disabled{ cursor:default; }

/* sleep fade */
#farm-night{
  position:fixed; inset:0; z-index:9000; background:#000;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-term); font-size:26px; color:#f5edd0;
  animation:nightFade 1.4s ease;
}
#farm-night[hidden]{ display:none !important; }
@keyframes nightFade{ 0%{ opacity:0 } 30%,80%{ opacity:1 } }

/* journal restyle of the content below */
.journal{
  background:linear-gradient(180deg, #223317, #1c2a13);
  border:2px solid #33422a;
}
.journal h3, .journal b{ color:var(--accent2); }