/* ── MINEFORGE · DEEP PASS · UI LAYER ───────────────────────────────
 * Skin for biome banner, Forge Shop (upgrade tree), Daily Contract panel,
 * discovery sting flash, and biome-tinted board frame. Loaded by
 * mineforge/index.html after mineforge-mobile.css so its tokens win.
 * --------------------------------------------------------------------- */

:root{
  --ore-emerald:#10b981;
  --ore-sapphire:#3b82f6;
  --ore-onyx:#a78bfa;
  --ore-emerald-d:#047857;
  --ore-sapphire-d:#1d4ed8;
  --ore-onyx-d:#5b21b6;
  --hazard-gas:#86efac;
  --hazard-fragile:#fbbf24;
}

/* biome backdrop + banner */
body.mf-biome-surface{background:radial-gradient(circle at 50% 0%,rgba(245,158,11,0.10),transparent 60%),linear-gradient(180deg,#0a0a14 0%,#181420 100%);}
body.mf-biome-crystal{background:radial-gradient(circle at 50% 0%,rgba(34,211,238,0.14),transparent 60%),linear-gradient(180deg,#08111c 0%,#0e1a2b 100%);}
body.mf-biome-deep   {background:radial-gradient(circle at 50% 0%,rgba(239,68,68,0.14),transparent 60%),linear-gradient(180deg,#180a0e 0%,#2b0e14 100%);}
body.mf-biome-core   {background:radial-gradient(circle at 50% 0%,rgba(167,139,250,0.16),transparent 60%),linear-gradient(180deg,#100a1a 0%,#1a0d24 100%);}

#mf-biome-banner{
  position:absolute;top:64px;left:50%;transform:translateX(-50%);
  z-index:5;pointer-events:none;text-align:center;
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.22em;
  color:var(--gold);text-shadow:0 0 12px rgba(245,158,11,0.55);
  opacity:0;transition:opacity 0.4s;
}
#mf-biome-banner.show{opacity:1;}
#mf-biome-banner .name{font-weight:800;}
#mf-biome-banner .sub{font-family:'JetBrains Mono',monospace;font-size:0.55rem;letter-spacing:0.18em;color:#cbd5e1;display:block;margin-top:2px;}

/* discovery / strike flash overlay */
#mf-strike-flash{
  position:absolute;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(circle at center,rgba(255,255,255,0.18),transparent 60%);
  opacity:0;mix-blend-mode:screen;
}
#mf-strike-flash.fire{animation:mf-strike-anim 0.45s ease-out;}
@keyframes mf-strike-anim{
  0%{opacity:0;}30%{opacity:0.85;}100%{opacity:0;}
}

/* FORGE / CONTRACT pill buttons in stats bar — Kenney sprite-skinned */
.mf-pill{
  background-image:url('assets/sprites/ui_btn_blue.png');
  background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;
  border:none;color:#0a1e3a;padding:8px 16px;border-radius:5px;
  font-family:'Cinzel',serif;font-size:0.70rem;font-weight:800;
  letter-spacing:0.14em;cursor:pointer;transition:transform 0.08s, filter 0.16s;
  text-shadow:0 1px 0 rgba(255,255,255,0.30);min-width:96px;
}
.mf-pill:hover{filter:brightness(1.10);}
.mf-pill:active{background-image:url('assets/sprites/ui_btn_blue_pressed.png');transform:translateY(1px);}
.mf-pill.contract{
  background-image:url('assets/sprites/ui_btn_green.png');color:#0a2418;
}
.mf-pill.contract:active{background-image:url('assets/sprites/ui_btn_green_pressed.png');}
.mf-pill.contract.done{
  background-image:url('assets/sprites/ui_btn_grey.png');color:#2a2a2a;cursor:default;opacity:0.7;
}

/* Shop overlay */
.mf-overlay{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(6,4,10,0.82);backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:20px;
}
.mf-overlay.open{display:flex;}
.mf-overlay .card{
  background:linear-gradient(160deg,rgba(36,26,48,0.97),rgba(20,14,30,0.97));
  border:none;border-radius:10px;max-width:560px;width:100%;
  padding:24px 28px;box-shadow:0 20px 60px rgba(124,58,237,0.30);
  max-height:88vh;overflow-y:auto;
  /* Kenney panel chrome via 9-slice border-image */
  border-image:url('assets/sprites/ui_panel_blue.png') 32 fill / 18px / 0 stretch;
}
.mf-overlay h2{
  font-family:'Cinzel',serif;font-size:1.35rem;letter-spacing:0.18em;
  color:#fff;text-align:center;margin-bottom:6px;font-weight:800;
}
.mf-overlay h2 .accent{color:#a78bfa;}
.mf-overlay .sub{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  letter-spacing:0.14em;color:#94a3b8;margin-bottom:18px;
}
.mf-overlay .close{
  position:absolute;top:10px;right:14px;background:none;border:none;
  color:#94a3b8;font-size:1.4rem;cursor:pointer;
}
.mf-overlay .card{position:relative;}

.mf-upgrade{
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;
  background:rgba(24,20,32,0.7);border:1px solid rgba(245,158,11,0.20);
  border-radius:6px;padding:10px 14px;margin-bottom:10px;
}
.mf-upgrade .nm{
  font-family:'Cinzel',serif;font-size:0.86rem;letter-spacing:0.12em;
  color:#fbbf24;font-weight:700;
}
.mf-upgrade .desc{
  grid-column:1/-1;font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;color:#cbd5e1;line-height:1.4;
}
.mf-upgrade .tier{
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:#94a3b8;
}
.mf-upgrade .tier b{color:#a78bfa;}
.mf-upgrade .buy{
  grid-column:1/-1;margin-top:6px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;
}
.mf-upgrade .cost{
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:#cbd5e1;
}
.mf-upgrade .cost b{color:#fbbf24;}
.mf-upgrade button{
  background-image:url('assets/sprites/ui_btn_gold.png');
  background-size:100% 100%;background-repeat:no-repeat;background-color:transparent;
  color:#3a2410;border:none;border-radius:5px;padding:9px 22px;
  font-family:'Cinzel',serif;font-size:0.72rem;font-weight:800;letter-spacing:0.14em;cursor:pointer;
  transition:transform 0.08s, filter 0.16s;
  text-shadow:0 1px 0 rgba(255,255,255,0.25);min-width:110px;
}
.mf-upgrade button:hover:not(:disabled){filter:brightness(1.10);}
.mf-upgrade button:active:not(:disabled){background-image:url('assets/sprites/ui_btn_gold_pressed.png');transform:translateY(1px);}
.mf-upgrade button:disabled{
  background-image:url('assets/sprites/ui_btn_grey.png');opacity:0.55;cursor:not-allowed;color:#555;
}
.mf-upgrade.maxed{opacity:0.75;border-color:rgba(34,197,94,0.30);}
.mf-upgrade.maxed .tier b{color:#22c55e;}

/* Contract panel */
.mf-contract-row{
  background:rgba(16,185,129,0.10);border:1px solid rgba(16,185,129,0.30);
  border-radius:6px;padding:14px 16px;margin-bottom:10px;
}
.mf-contract-row .label{
  font-family:'Cinzel',serif;font-size:0.76rem;letter-spacing:0.16em;
  color:#34d399;font-weight:700;margin-bottom:4px;
}
.mf-contract-row .target{
  font-family:'JetBrains Mono',monospace;font-size:0.95rem;color:#fff;
  margin-bottom:8px;
}
.mf-contract-row .progress-bar{
  height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;
  margin-bottom:6px;
}
.mf-contract-row .progress-bar .fill{
  height:100%;background:linear-gradient(90deg,#10b981,#34d399);
  transition:width 0.3s ease;
}
.mf-contract-row .progress-text{
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:#cbd5e1;
  display:flex;justify-content:space-between;
}
.mf-contract-row.complete{border-color:#fbbf24;background:rgba(245,158,11,0.12);}
.mf-contract-row.complete .label{color:#fbbf24;}
.mf-contract-row.complete .progress-bar .fill{background:linear-gradient(90deg,#fbbf24,#fde68a);}

@media (max-width:480px){
  .mf-overlay .card{padding:18px 16px;}
  .mf-overlay h2{font-size:1.05rem;}
}