/* ============================================================
   $COAL — Pixel-Game Design System
   Stardew/OSRS soul. Chunky stone frames, gold studs, parchment,
   pixel type. The art carries it; the UI is a wooden HUD around it.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jersey+15&family=Pixelify+Sans:wght@400;500;600;700&family=Silkscreen:wght@400;700&display=swap');

:root{
  /* ---- earth & coal ---- */
  --void:#0c0b09; --coal-950:#100e0b; --coal-900:#16130f; --coal-850:#1c1813;
  --coal-800:#231e17; --coal-750:#2b241b; --coal-700:#34291d; --coal-600:#42331f;
  /* ---- warm earth ---- */
  --brown:#6b4226; --brown-l:#8a5a34; --brown-d:#43291a;
  --ochre:#c8851a; --gold:#f5a623; --gold-bright:#ffc450; --gold-pale:#ffe08a; --ember:#ff7a2f;
  /* ---- light & gem ---- */
  --bone:#efe2c6; --bone-dim:#bcaa86; --muted:#8a7a60; --muted-d:#5f5340;
  --diamond:#8ff7f7; --diamond-deep:#2bd6d6; --diamond-glow:#a9ffff;
  /* ---- status ---- */
  --green:#83c24e; --danger:#e0563a; --danger-d:#b23a24;

  /* ---- frame / wood / stone (the HUD material) ---- */
  --frame-face:#322b22; --frame-face-2:#241e17; --frame-edge:#0d0a06;
  --frame-bevel:#4e4234; --frame-bevel-d:#1a1510;
  --wood:#5a3f24; --wood-d:#2e2010; --wood-l:#7a5430;
  --slot:#161109; --slot-edge:#0c0905;
  --parch:#ecd9ac; --parch-2:#d8c290; --parch-ink:#3c2a14; --parch-edge:#4a341e;
  --stud:#f3b43a; --stud-d:#9a5f1e;

  /* ---- type ---- */
  --f-display:'Jersey 15',sans-serif;     /* chunky headlines */
  --f-ui:'Pixelify Sans',sans-serif;      /* UI, body, numbers */
  --f-pixel:'Silkscreen',monospace;       /* micro labels */

  --r:4px; --r-lg:6px;
  --pit:0 14px 34px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{ font-family:var(--f-ui); background:var(--void); color:var(--bone);
  -webkit-font-smoothing:antialiased; overflow:hidden; font-size:16px; }
img{display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--gold);color:var(--coal-950)}

/* scrollbars */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:#14100b;border:2px solid #0d0a06}
*::-webkit-scrollbar-thumb{background:var(--wood);border:2px solid #0d0a06;border-radius:2px}
*::-webkit-scrollbar-thumb:hover{background:var(--wood-l)}

/* ---------- type utilities ---------- */
.pixel{ font-family:var(--f-pixel); text-transform:uppercase; line-height:1; letter-spacing:.02em; }
.disp{ font-family:var(--f-display); line-height:.9; letter-spacing:.01em; }
.num{ font-family:var(--f-ui); font-weight:600; font-variant-numeric:tabular-nums; }
.label{ font-family:var(--f-pixel); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); line-height:1.3; }

/* chunky beveled gold text (the "DEPTH" / "+15 COAL XP" look) */
.goldtxt{ color:var(--gold-bright);
  text-shadow:0 2px 0 #a4632f, 0 3px 0 #6b3f1a, 0 4px 2px rgba(0,0,0,.55); }
.bonetxt{ color:var(--bone); text-shadow:0 2px 0 #2a2018, 0 3px 1px rgba(0,0,0,.5); }
.gemtxt{ color:var(--diamond-glow); text-shadow:0 2px 0 #1c6b6b, 0 3px 2px rgba(0,0,0,.5); }

/* ---------- FRAME: stone panel with gold corner studs ---------- */
.frame{ position:relative;
  background:linear-gradient(180deg,var(--frame-face),var(--frame-face-2));
  border:3px solid var(--frame-edge); border-radius:var(--r);
  box-shadow:
    inset 0 0 0 2px var(--frame-bevel),
    inset 0 3px 0 rgba(255,255,255,.05),
    inset 0 -8px 16px rgba(0,0,0,.45),
    0 5px 0 var(--frame-edge), var(--pit);
}
/* four gold corner studs */
.frame::before{ content:""; position:absolute; inset:3px; pointer-events:none; border-radius:2px;
  background:
    linear-gradient(135deg,var(--stud),var(--stud-d)) left top/13px 13px no-repeat,
    linear-gradient(225deg,var(--stud),var(--stud-d)) right top/13px 13px no-repeat,
    linear-gradient(45deg,var(--stud),var(--stud-d))  left bottom/13px 13px no-repeat,
    linear-gradient(315deg,var(--stud),var(--stud-d)) right bottom/13px 13px no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.frame > *{ position:relative; z-index:1; }
.frame.flat{ box-shadow:inset 0 0 0 2px var(--frame-bevel), inset 0 -8px 16px rgba(0,0,0,.45), var(--pit); }
.frame.no-stud::before{ display:none; }

.frame-hd{ display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:3px solid var(--frame-edge);
  background:linear-gradient(180deg, rgba(245,166,35,.07), transparent);
  box-shadow:inset 0 -2px 0 rgba(245,166,35,.14); }
.frame-hd .ttl{ font-family:var(--f-display); font-size:19px; color:var(--gold-bright);
  text-shadow:0 2px 0 #6b3f1a; letter-spacing:.02em; white-space:nowrap; }

/* ---------- PARCHMENT panel ---------- */
.parch{ position:relative; color:var(--parch-ink);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(180deg,var(--parch),var(--parch-2));
  border:3px solid var(--parch-edge); border-radius:var(--r);
  box-shadow:inset 0 0 0 2px #8a6a3a, inset 0 0 26px rgba(120,80,30,.25), 0 5px 0 var(--wood-d), var(--pit);
}
.parch::before{ content:""; position:absolute; inset:3px; pointer-events:none;
  background:
    linear-gradient(135deg,var(--stud),var(--stud-d)) left top/12px 12px no-repeat,
    linear-gradient(225deg,var(--stud),var(--stud-d)) right top/12px 12px no-repeat,
    linear-gradient(45deg,var(--stud),var(--stud-d)) left bottom/12px 12px no-repeat,
    linear-gradient(315deg,var(--stud),var(--stud-d)) right bottom/12px 12px no-repeat; }

/* ---------- inventory SLOT ---------- */
.slot{ position:relative; aspect-ratio:1; border-radius:3px;
  background:radial-gradient(circle at 50% 32%, #2c2519, #120d07);
  border:2px solid var(--slot-edge);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75), inset 0 0 0 1px #3a3024;
  display:flex; align-items:center; justify-content:center; }
.slot.empty{ opacity:.62; }
.slot.buy{ cursor:pointer; border-style:dashed; border-color:#5a4a30; }
.slot.buy:hover{ border-color:var(--gold); box-shadow:inset 0 3px 7px rgba(0,0,0,.7), 0 0 12px rgba(245,166,35,.3); }
.slot img{ width:74%; height:74%; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
/* cropped pick-sheet art is dark on dark — lift it inside slots */
.slot img[src*="/tools/"]{ width:88%; height:88%; border-radius:2px;
  filter:brightness(1.55) saturate(1.12) contrast(1.04) drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.slot .qty{ position:absolute; right:2px; bottom:1px; font-family:var(--f-ui); font-weight:700; font-size:12px;
  color:var(--gold-bright); text-shadow:0 1px 0 #000,0 0 4px #000; }

/* ---------- PIXEL BUTTONS ---------- */
.pbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-ui); font-weight:700; font-size:15px; color:var(--bone);
  padding:10px 16px; border-radius:var(--r); border:2px solid var(--frame-edge);
  background:linear-gradient(180deg,#52462f,#332a1b);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.4), 0 4px 0 var(--frame-edge);
  text-shadow:0 1px 0 rgba(0,0,0,.5); transition:filter .1s, transform .06s; white-space:nowrap; }
.pbtn:hover{ filter:brightness(1.14); }
.pbtn:active{ transform:translateY(3px); box-shadow:inset 0 2px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.4), 0 1px 0 var(--frame-edge); }
.pbtn-gold{ color:#2a1a06; background:linear-gradient(180deg,var(--gold-pale),var(--gold) 52%,var(--ochre));
  border-color:#5e3a12; box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,70,20,.5), 0 4px 0 #5e3a12;
  text-shadow:0 1px 0 rgba(255,230,160,.6); }
.pbtn-gold:active{ box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(120,70,20,.5), 0 1px 0 #5e3a12; }
.pbtn-gem{ color:#06302f; background:linear-gradient(180deg,#caffff,var(--diamond) 52%,var(--diamond-deep));
  border-color:#0c5a5a; box-shadow:inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(10,80,80,.5), 0 4px 0 #0c5a5a; }
.pbtn-danger{ color:#fff; background:linear-gradient(180deg,#f0775c,var(--danger) 55%,var(--danger-d));
  border-color:#5c1c10; box-shadow:inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(80,20,10,.5), 0 4px 0 #5c1c10; }
.pbtn-sm{ padding:7px 12px; font-size:13px; box-shadow:inset 0 2px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.4), 0 3px 0 var(--frame-edge); }
.pbtn:disabled{ opacity:.42; pointer-events:none; filter:grayscale(.5); }

/* ---------- HUD resource PILL ---------- */
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 8px;
  background:linear-gradient(180deg,#2a2418,#16110a); border:2px solid var(--frame-edge); border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -3px 8px rgba(0,0,0,.5); }
.pill-ic{ width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; }
.pill-ic img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.pill-val{ font-family:var(--f-ui); font-weight:700; font-size:16px; color:var(--bone); line-height:1; }
.pill-val.gold{ color:var(--gold-bright); }
.pill-val.gem{ color:var(--diamond-glow); }

.pbtn .btn-ic, .btn-ic{ height:18px; width:18px; object-fit:contain; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* ---------- diegetic sound toggle (shared) ---------- */
.sound-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:5px; cursor:pointer;
  background:rgba(0,0,0,.25); border:2px solid var(--frame-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.sound-btn img{ width:18px; height:18px; object-fit:contain; filter:grayscale(.7) brightness(.8); transition:filter .2s; }
.sound-btn .pixel{ font-size:7.5px; color:var(--muted); letter-spacing:.06em; }
.sound-btn.on img{ filter:none; animation:flicker 1.8s ease-in-out infinite; }
.sound-btn.on .pixel{ color:var(--gold-bright); }
.sound-btn.on{ border-color:rgba(245,166,35,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 0 12px rgba(245,166,35,.25); }
@media (max-width:560px){ .sound-btn .pixel{ display:none; } }

/* ---------- sprites ---------- */
.sprite{ filter:drop-shadow(0 5px 6px rgba(0,0,0,.5)); }
img.sprite-sh{ filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); }

/* ---------- shared keyframes ---------- */
@keyframes flicker{0%,100%{opacity:.95;filter:brightness(1)}48%{opacity:.72;filter:brightness(1.18)}}
@keyframes bobup{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{0%{transform:translateY(12px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
@keyframes swayy{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* ---------- motion safety: global kill-switch (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* grain overlay */
.grain::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay; }