/* ── Mosswell ─────────────────────────────────────────── */

:root{
  --wood-1:#6b4a30;
  --wood-2:#8a6440;
  --wood-3:#a97e51;
  --wood-dark:#3c2718;
  --slot:#4a3524;
  --slot-in:#2e2015;
  --cream:#f2e3c4;
  --gold:#e8c46a;
  --moss:#7cb262;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  overflow:hidden;
  background:#10131a;
  font-family:ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;
  color:var(--cream);
  -webkit-font-smoothing:none;
  user-select:none;
  cursor:default;
}

canvas#game{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  position:absolute;
  top:0; left:0;
}

/* ── HUD ──────────────────────────────────────────────── */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10}

#clock{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(24,17,11,.62);
  border:2px solid rgba(0,0,0,.5);
  border-radius:3px;
  padding:5px 12px 4px;
  font-size:12px; letter-spacing:.5px;
  display:flex; gap:8px; align-items:center;
  text-shadow:1px 1px 0 #000;
}
#clockIcon{font-size:13px}

#itemName{
  position:absolute; bottom:78px; left:50%; transform:translateX(-50%);
  font-size:13px; letter-spacing:1px;
  text-shadow:2px 2px 0 #000;
  opacity:0; transition:opacity .35s;
  white-space:nowrap;
}
#itemName.show{opacity:1;transition:opacity .08s}

#hint{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:10px; color:#a99878;
  text-shadow:1px 1px 0 #000;
  opacity:.85; white-space:nowrap;
  transition:opacity .6s;
}
#hint.fade{opacity:0}
#hint b{color:var(--gold)}

/* ── Hotbar ───────────────────────────────────────────── */
#hotbar{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px;
  padding:4px;
  background:rgba(24,17,11,.55);
  border:2px solid rgba(0,0,0,.45);
  border-radius:4px;
  pointer-events:auto;
}

/* ── Slots ────────────────────────────────────────────── */
.slot{
  width:44px; height:44px;
  background:var(--slot-in);
  border:2px solid #1b120b;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.06), inset -2px -2px 0 rgba(0,0,0,.35);
  position:relative;
  image-rendering:pixelated;
  flex:0 0 auto;
}
.slot .icon{
  position:absolute; inset:4px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  image-rendering:pixelated;
  pointer-events:none;
}
.slot .count{
  position:absolute; right:2px; bottom:0px;
  font-size:11px; line-height:1;
  color:#fff; text-shadow:1.5px 1.5px 0 #000;
  pointer-events:none;
}
.slot.sel{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(232,196,106,.28), inset 2px 2px 0 rgba(255,255,255,.08);
  background:#3b2a1a;
}
#hotbar .slot .key{
  position:absolute; left:2px; top:0;
  font-size:9px; color:#8a7757; text-shadow:1px 1px 0 #000;
  pointer-events:none;
}

/* ── Inventory panel ──────────────────────────────────── */
#invOverlay{
  position:absolute; inset:0; z-index:30;
  background:rgba(8,6,4,.55);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(2px);
}
#invOverlay.hidden,#cursorStack.hidden,#tooltip.hidden,#title.hidden{display:none}

#invPanel{
  background:linear-gradient(180deg,var(--wood-3) 0%,var(--wood-2) 12%,var(--wood-2) 88%,var(--wood-1) 100%);
  border:3px solid var(--wood-dark);
  border-radius:5px;
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.08);
  padding:14px 16px 12px;
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

.panelTitle{
  font-size:14px; letter-spacing:2px; text-transform:uppercase;
  color:#f6e9cd; text-shadow:2px 2px 0 rgba(0,0,0,.45);
  margin-bottom:10px;
}
.panelFoot{
  margin-top:9px; font-size:10px; color:#3f2a19; opacity:.75; letter-spacing:.4px;
}

.grid{display:grid; gap:4px}
.g9{grid-template-columns:repeat(9,44px)}
.g3{grid-template-columns:repeat(3,44px)}

.craftRow{display:flex; align-items:center; gap:14px}
.craftBox{display:flex;flex-direction:column;gap:4px}
.boxLabel{font-size:9px;letter-spacing:1px;color:#3f2a19;text-transform:uppercase;opacity:.8}
.arrow{font-size:20px;color:#3f2a19;opacity:.7;margin-top:12px}
.slot.big{width:56px;height:56px}
.slot.big .icon{inset:6px}

.sidebar{margin-left:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.compostWrap{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.slot.compost{background:#241a12;border-color:#160e08}
.slot.compost::after{
  content:"🍂"; position:absolute; inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:18px; opacity:.35;
}

button{
  font-family:inherit; font-size:11px; letter-spacing:1px;
  color:#2b1c10; cursor:pointer;
  background:linear-gradient(180deg,#d8b378,#b98a53);
  border:2px solid var(--wood-dark);
  border-radius:3px;
  padding:6px 12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 2px 0 rgba(0,0,0,.3);
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px);box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}

.divider{height:2px;background:rgba(0,0,0,.28);margin:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.divider.thin{margin:8px 0}

/* ── Floating cursor stack + tooltip ──────────────────── */
#cursorStack{
  position:absolute; z-index:60; pointer-events:none;
  width:40px;height:40px; margin:-20px 0 0 -20px;
  filter:drop-shadow(2px 3px 2px rgba(0,0,0,.5));
}
#cursorStack .icon{position:absolute;inset:0;background-size:100% 100%;image-rendering:pixelated}
#cursorStack .count{position:absolute;right:0;bottom:-2px;font-size:12px;color:#fff;text-shadow:1.5px 1.5px 0 #000}

#tooltip{
  position:absolute; z-index:70; pointer-events:none;
  max-width:220px;
  background:rgba(20,14,9,.95);
  border:2px solid #0d0906;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.5);
  padding:6px 9px 7px; border-radius:3px;
}
#tooltip .tName{font-size:12px;color:#f6e9cd;text-shadow:1px 1px 0 #000}
#tooltip .tDesc{font-size:10px;color:#a99878;margin-top:3px;line-height:1.45}
#tooltip .tTag{font-size:9px;color:var(--moss);margin-top:4px;letter-spacing:.6px}

/* ── Toasts (pickup popups) ───────────────────────────── */
#toasts{
  position:absolute; right:16px; bottom:80px; z-index:20;
  display:flex; flex-direction:column-reverse; gap:3px; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:6px;
  background:rgba(24,17,11,.6);
  border:2px solid rgba(0,0,0,.4);
  padding:3px 8px 3px 4px; border-radius:3px;
  font-size:11px; text-shadow:1px 1px 0 #000;
  animation:toastIn .18s ease-out;
}
.toast.out{animation:toastOut .4s ease-in forwards}
.toast .icon{width:20px;height:20px;background-size:100% 100%;image-rendering:pixelated}
@keyframes toastIn{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(18px);opacity:0}}

/* ── Title screen ─────────────────────────────────────── */
#title{
  position:absolute; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 35%, #2c3a45 0%, #171d26 60%, #0e1116 100%);
}
.titleInner{text-align:center}
#title h1{
  font-size:58px; letter-spacing:6px; font-weight:700;
  color:#e9dcb8;
  text-shadow:0 4px 0 #4a3524, 0 5px 0 #3c2718, 0 8px 24px rgba(0,0,0,.7);
  margin-bottom:6px;
}
#title .tag{font-size:12px;color:#8fa88a;letter-spacing:3px;margin-bottom:26px}
#title button{display:block;margin:0 auto 10px;min-width:210px;padding:9px 14px;font-size:13px}
#title button.ghost{
  background:transparent;color:#9a8d72;border-color:rgba(0,0,0,.35);
  box-shadow:none; font-size:11px; padding:6px 12px;
}
#title button.ghost:hover{color:#d8c9a5}
.keys{
  margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  font-size:10px; color:#6f7f78; max-width:440px;
}
.keys b{color:#a8c0a2}