/* ---------- Essences: the forge's element pick, imprégnation, the altars, the comptoir's swap, vials for the road ---------- */

/* the forge's order, from rank III: which element's essences the smith takes */
.fo-ess { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 6px; }
.fo-essb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; border-radius: 6px; border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); color: inherit; }
.fo-essb small { font: 400 .62rem var(--pixel); color: #d7b48a; }
.fo-essb.on { border-color: #f4e6cf; background: rgba(255, 255, 255, .1); box-shadow: 0 0 10px rgba(255, 230, 180, .25); }
.fo-essb:disabled { opacity: .4; }

/* a piece's imprégnation (camp.js imbueSection) */
.it-imbue { margin: 10px 0 4px; padding: 8px 10px 10px; border-radius: 6px; background: rgba(0, 0, 0, .25); border: 2px solid var(--edge); }
.it-imbue h4 { margin: 0 0 6px; font: 400 .8rem var(--pixel); color: #d7b48a; letter-spacing: .04em; }
.im-now { margin: 0 0 6px; font-size: .82rem; text-shadow: 0 0 6px currentColor; }
.im-gems { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.im-gem { position: relative; display: grid; place-items: center; height: 44px; border-radius: 6px; border: 2px solid var(--edge); background: rgba(0, 0, 0, .3); }
.im-gem.on { border-color: var(--el); box-shadow: 0 0 10px var(--el), inset 0 0 8px rgba(255, 255, 255, .1); }
.im-gem.cur::after { content: ""; position: absolute; inset: 3px; border-radius: 4px; box-shadow: inset 0 0 8px var(--el); pointer-events: none; }
.im-gem .im-r { position: absolute; right: 3px; bottom: 1px; font: 400 .58rem var(--pixel); font-style: normal; color: var(--el); text-shadow: 0 1px 0 #000; }
.im-notches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 7px 0 6px; }
.im-notches i { height: 6px; border-radius: 2px; background: #2a2622; box-shadow: inset 0 1px 0 #000; }
.im-notches i.lit { background: var(--el); box-shadow: 0 0 6px var(--el); }
.im-notches i.next { background: repeating-linear-gradient(-45deg, var(--el) 0 3px, transparent 3px 6px); opacity: .55; animation: lp-take .9s steps(2) infinite; }
.im-after { margin: 0 0 6px; font-size: .8rem; }
.im-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.im-pay .btn { margin: 0; }
.im-pay .costs { margin: 0; }
.im-warn { margin: 0 0 6px; font-size: .72rem; color: #ffb48a; }

/* the bastion's label for the altars: five little flames, lit or not */
.al-dot { display: inline-block; width: 5px; height: 7px; margin-right: 2px; border-radius: 2px 2px 1px 1px; background: #3d3a35; }
.al-dot.lit { background: var(--el); box-shadow: 0 0 4px var(--el); }

/* the altars' chapel: one row per altar under the scene (app.js renderAltars) */
.altars { display: grid; gap: 6px; padding: 8px 0 12px; }
.altars .wallet { margin: 0 0 2px; }
.altar-row { padding: 7px 10px 8px; border-radius: 6px; background: #22201f; border: 2px solid #3a3530; cursor: pointer; }
.altar-row.on { border-color: var(--el); box-shadow: 0 0 12px color-mix(in srgb, var(--el) 35%, transparent); }
.ar-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.ar-head b { font: 400 .86rem var(--pixel); color: #f4e6cf; }
.ar-notches { display: grid; grid-template-columns: repeat(10, 6px); gap: 2px; }
.ar-notches i { height: 9px; border-radius: 1px; background: #3d3a35; }
.ar-notches i.lit { background: var(--el); box-shadow: 0 0 4px var(--el); }
.ar-boon { margin: 4px 0 0; font-size: .8rem; }
.ar-boon span { color: #d8cdb8; }
.ar-boon b { font-weight: 600; color: var(--el); }
.ar-boon small { color: var(--muted); }
.ar-feed { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 6px; }
.ar-feed .btn { margin: 0; }

/* the comptoir's essence swap, on the same ledger paper */
.ledger.swap { border-top-style: dashed; grid-template-columns: minmax(0, 1fr); }
.sw-row { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; }
.sw-row > small { font: 400 .62rem var(--pixel); opacity: .8; }
.sw-gems { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.sw-gem { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 3px; border-radius: 5px; border: 2px solid #8a6a3c; background: #d9c291; color: #3b2412; }
.sw-gem small { font: 400 .58rem var(--pixel); }
.sw-gem.on { background: #3b2412; border-color: var(--el); box-shadow: 0 0 8px var(--el); color: #fff3d6; }
.sw-gem:disabled { opacity: .35; }

/* vials of essence before the road (run.js fiolesPicker) */
.fioles .place-head small { margin-left: 8px; font: 400 .8rem var(--pixel); color: var(--muted); }
.fi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fi-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; background: #241e18; border: 2px solid #3e3022; border-radius: 5px; color: inherit; }
.fi-chip small { display: inline-flex; align-items: center; gap: 2px; font: 400 .6rem var(--pixel); color: var(--muted); }
.fi-chip b { position: absolute; top: 3px; right: 4px; font: 400 .78rem var(--pixel); color: var(--el); text-shadow: 0 1px 0 #000; }
.fi-chip.on { border-color: var(--el); box-shadow: 0 0 10px var(--el); }
.fi-chip:disabled { opacity: .35; }

/* the altars' chapel: a stone plate under each altar, a tap opens it (app.js openAltar) */
.altar-plates { position: relative; height: 46px; background: #2e2c35; border-top: 2px solid #1e1c24; }
.altar-plate { position: absolute; top: 5px; transform: translateX(-50%); width: 17%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 3px; border-radius: 5px; border: 2px solid #4a4752; background: #3d3a45; color: #f4e6cf; }
.altar-plate b { font: 400 .66rem var(--pixel); color: var(--el); text-shadow: 0 1px 0 #000; }
.altar-plate small { font: 400 .6rem var(--pixel); opacity: .85; }
.altar-plate.cold b { opacity: .55; }
.altar-plate.on { border-color: var(--el); box-shadow: 0 0 8px var(--el); }
.altar-plate .bup { position: absolute; top: -8px; right: -2px; font-style: normal; font-size: .7rem; color: #7dff9a; text-shadow: 0 1px 0 #000; animation: upBob 1s ease-in-out infinite; }
.altar-sheet h2 { display: flex; align-items: center; gap: 6px; }
.altar-sheet .ar-notches { grid-template-columns: repeat(10, minmax(0, 1fr)); margin: 4px 0 8px; }
.altar-sheet .ar-boon { font-size: .9rem; }
.altar-sheet .ar-next { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #4a4752; }
.altar-sheet .ar-feed { margin-top: 8px; }

/* the basin's pour (forge_ui.js pourGame): the vial fills from the left, the glow is where it must settle */
.fp-vial { position: relative; height: 22px; border-radius: 4px; border: 2px solid var(--edge); background: #1a1820; overflow: hidden; }
.fp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #fff 0 2px, var(--el) 2px); box-shadow: 0 0 10px var(--el); }
.fp-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--el) 28%, transparent); border-left: 1px dashed var(--el); border-right: 1px dashed var(--el); }
.fp-heart { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, #fff 30%, transparent); }
.fs-pour .fs-say { min-height: 1em; }
.forge-sheet.bassin h2 { margin: 0 0 8px; }
/* the pour sits mid-screen; the lower half is the pad the finger holds */
.forge-veil > .fs-pour { position: fixed; left: 12px; right: 12px; top: 50%; bottom: auto; transform: translateY(-110%); }
.fp-pad { position: fixed; left: 0; right: 0; bottom: 0; height: 50vh; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--el) 10%, transparent)); border-top: 2px dashed color-mix(in srgb, var(--el) 45%, transparent); }
.fp-pad span { font: .9rem var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--el); opacity: .7; pointer-events: none; }
.fp-pad.on { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--el) 26%, transparent)); }
.fp-pad.on span { opacity: 1; text-shadow: 0 0 10px var(--el); }
.fi-chip .fi-spent { font-style: normal; color: #ff6b5a; text-shadow: 0 1px 0 #000; }
/* a vial the chosen road's creatures are weak to */
.fi-chip.feared { border-color: color-mix(in srgb, var(--el) 70%, #3e3022); background: color-mix(in srgb, var(--el) 14%, #241e18); animation: fiFeared 1.6s ease-in-out infinite; }
.fi-chip.feared.on { animation: none; }
.fi-feared { position: absolute; top: 3px; left: 4px; font-style: normal; font-size: .62rem; color: #7dff9a; text-shadow: 0 1px 0 #000; }
@keyframes fiFeared { 50% { box-shadow: 0 0 8px var(--el); } }