/* The forge's sheets (forge_ui.js): the order to the smith on a workbench, the hammer gauge in the room, the legend
   plans on parchment, the crucible's three pots. */
.forge-sheet { --ember: #ff9a3c; --iron: #24211f; --wood: #4a3220; }
.fo-tabs { display: flex; gap: 4px; margin: 0 40px 10px 0; }
.fo-tabs button { flex: 1; padding: 7px 6px; font: .8rem var(--pixel); color: var(--muted); background: var(--iron); border: 2px solid var(--edge); border-radius: 6px 6px 0 0; border-bottom-color: #3a2a1c; }
.fo-tabs button.on { color: #2a1405; background: linear-gradient(#ffc56b, var(--gold)); border-color: #6b3a10; }

.forge-order, .fo-plans, .fu-panel { padding: 10px; border-radius: 8px; border: 2px solid var(--edge);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 11px), linear-gradient(#3b2a1d, #2c2018); box-shadow: inset 0 0 0 1px rgba(255, 190, 110, .08); }
.forge-order h4, .fu-panel h4 { margin: 10px 0 5px; font: .72rem var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: #d7b48a; }
.forge-order h4:first-child { margin-top: 0; }

.fo-who { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.fo-who::-webkit-scrollbar { display: none; }
.fo-hero { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 6px;
  border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); }
.fo-hero small { max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--muted); }
.fo-hero.on { border-color: var(--gold); background: rgba(242, 155, 58, .16); box-shadow: 0 0 10px rgba(242, 155, 58, .25); }
.fo-hero.on small { color: #ffe0b0; }
.fo-reserve span { display: grid; place-items: center; width: 32px; height: 32px; font-size: 1.3rem; color: #d7b48a; }

.fo-slots, .fo-kinds { display: grid; gap: 6px; margin-top: 6px; }
.fo-slots { grid-template-columns: repeat(3, 1fr); }
.fo-kinds { grid-template-columns: repeat(4, 1fr); }
.fo-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 58px; padding: 5px 2px; border-radius: 6px;
  border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); }
.fo-slot small { font-size: .74rem; color: var(--muted); }
.fo-slot.on { border-color: var(--gold); background: rgba(242, 155, 58, .16); }
.fo-slot.on small { color: #ffe0b0; }

.fo-bench { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px; border-radius: 6px; border: 2px solid var(--edge);
  background: radial-gradient(ellipse at 30% 60%, rgba(255, 150, 60, .22), transparent 60%), #1d1714; }
.fo-art { flex: 0 0 auto; min-width: 84px; display: grid; place-items: center; }
.fo-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-what b { font-family: var(--pixel); color: #f4e6cf; }
.fo-what small { font-size: .78rem; color: var(--muted); }
.fo-what .fo-min { color: #b8e6bd; }
.fo-what .cmp { margin-top: 3px; }

.fo-ranks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fo-rank { display: flex; flex-direction: column; align-items: center; padding: 5px 0 4px; border-radius: 6px; border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); min-width: 0; }
.fo-rank b { font: .95rem var(--pixel); color: #f4e6cf; }
.fo-rank small { font-size: .55rem; letter-spacing: -.05em; color: #d7b48a; white-space: nowrap; }
.fo-rank.on { background: linear-gradient(#ffc56b, var(--gold)); border-color: #6b3a10; }
.fo-rank.on b, .fo-rank.on small { color: #2a1405; }
.fo-rank:disabled { opacity: .4; }

.fo-odds { margin: 2px 0 8px; }
.fo-oddbar { display: flex; height: 9px; border-radius: 4px; overflow: hidden; border: 2px solid var(--edge); }
.fo-oddbar i { min-width: 3px; }
.fo-oddtxt { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: .74rem; }

.fo-hand { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 8px; padding: 7px 8px; text-align: left; border-radius: 6px; border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); }
.fo-hand > i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; border: 2px solid #6b4a2a; background: #1d1714; font-style: normal; color: var(--gold); }
.fo-hand.on > i { border-color: var(--gold); }
.fo-hand span { display: flex; flex-direction: column; }
.fo-hand b { font: .8rem var(--pixel); color: #f4e6cf; }
.fo-hand small { font-size: .74rem; color: var(--muted); }
.fo-go { width: 100%; margin-top: 8px; }

/* the hammer gauge, over the bottom of the room */
.forge-strike { position: absolute; left: 12px; right: 12px; bottom: 46px; z-index: 3; padding: 8px 10px 9px; border-radius: 8px; border: 2px solid #6b3a10;
  background: rgba(20, 14, 10, .86); box-shadow: 0 4px 18px rgba(0, 0, 0, .5); text-align: center; pointer-events: none; }
.fs-say { display: block; margin-bottom: 6px; font: .82rem var(--pixel); color: #f4e6cf; }
.fs-say:empty { display: none; }
.fs-say.coeur { color: #ffffff; text-shadow: 0 0 10px #8ff0ff, 0 0 4px #fff; }
.fs-say.parfait { color: #fff3b0; text-shadow: 0 0 8px #ffd34d; }
.fs-say.bon { color: #ffc56b; }
.fs-say.rate { color: #c98b7a; }
.fs-bar { position: relative; height: 18px; border-radius: 4px; border: 2px solid var(--edge); background: linear-gradient(90deg, #3a1a10, #7a2a14 30%, #7a2a14 70%, #3a1a10); overflow: hidden; }
.fs-good { position: absolute; left: 32%; width: 36%; top: 0; bottom: 0; background: rgba(255, 154, 60, .55); }
.fs-perfect { position: absolute; left: 43%; width: 14%; top: 0; bottom: 0; background: linear-gradient(#fff3b0, #ffd34d); box-shadow: 0 0 10px #ffd34d; }
.fs-cursor { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #fff, 0 0 2px #000; }
.fs-marks { display: flex; justify-content: center; gap: 8px; margin-top: 7px; }
.fs-marks i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid #6b4a2a; background: #1d1714; }
.fs-marks i.coeur { background: #ffffff; border-color: #8ff0ff; box-shadow: 0 0 10px #8ff0ff; }
.fs-marks i.parfait { background: #ffd34d; border-color: #fff3b0; box-shadow: 0 0 8px #ffd34d; }
.fs-marks i.bon { background: #ff9a3c; border-color: #ffc56b; }
.fs-marks i.rate { background: #4a2a22; }

/* legend plans: parchment pinned on the bench */
.plan-card { margin-top: 10px; padding: 10px; border-radius: 6px; border: 2px solid #3a2410; color: #3a2410;
  background: radial-gradient(ellipse at 50% 40%, #f1dfb4, #d9bd85 75%, #bf9c60); box-shadow: inset 0 0 14px rgba(90, 50, 10, .45), 0 3px 0 rgba(0, 0, 0, .35); }
.plan-top { display: flex; align-items: center; gap: 10px; }
.plan-art { flex: 0 0 auto; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, .9), rgba(120, 70, 20, .25) 65%, transparent 70%); }
.plan-card .grow { display: flex; flex-direction: column; gap: 1px; }
.plan-card .plan-kicker { font: .65rem var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: #7a4a1a; }
.plan-card b.r-legendaire { font-family: var(--pixel); color: #8a4a00; text-shadow: none; }
.plan-card small { font-size: .76rem; color: #5a3a1a; }
.plan-card .costs { margin: 8px 0; }
.plan-card .btn { width: 100%; }
.fo-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 10px; margin-top: 10px; border-radius: 6px; border: 2px dashed #6b4a2a; text-align: center; }
.fo-empty b { font: .85rem var(--pixel); color: #d7b48a; }
.fo-empty small { color: var(--muted); }
.fo-warn { margin: 8px 0 0; padding: 6px 8px; border-radius: 6px; background: rgba(200, 60, 40, .2); color: #ffb0a0; font-size: .85rem; }

/* the crucible's three pots */
.fu-pots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fu-pot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 82px; border-radius: 10px 10px 22px 22px; border: 2px solid var(--edge);
  background: radial-gradient(ellipse at 50% 85%, rgba(255, 120, 40, .35), transparent 60%), #1a1614; box-shadow: inset 0 -6px 0 #2a2420; }
.fu-pot span { font: 1.4rem var(--pixel); color: #5a4a40; }
.fu-pot.full { border-color: #6b3a10; background: radial-gradient(ellipse at 50% 85%, rgba(255, 150, 60, .6), transparent 70%), #2a1a14; }
.fu-pot small { font-size: .7rem; color: var(--muted); }
.fu-hint { margin: 8px 0 0; }
.fu-odds { margin: 8px 0; font-size: .85rem; }
.items .item.on { border-color: var(--gold); background: rgba(242, 155, 58, .14); }
.fu-in { color: var(--gold); }

/* a piece just tempered: a flash, and its new level stamped beside it */
.fresh-note { margin: -2px 0 8px; text-align: center; font-size: .9rem; color: #ffd9a0; }
.hero-head.tempered { position: relative; }
.hero-head.tempered > canvas { animation: temper 1s ease-out; }
.enh-stamp { position: absolute; left: 4px; top: -4px; padding: 1px 6px; font: .9rem var(--pixel); color: #2a1405; background: linear-gradient(#fff3b0, #ffb43a);
  border: 2px solid #6b3a10; border-radius: 6px; animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes temper { 0% { filter: brightness(3) drop-shadow(0 0 10px #ffd34d); } 100% { filter: none; } }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero-head.tempered > canvas, .enh-stamp { animation: none; } }
.plan-card .cost { color: #f4e6cf; }
.fs-help { display: block; margin: -2px 0 8px; font-size: .8rem; line-height: 1.35; color: #e8d8c0; }
.fo-help { margin: 6px 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.fo-rank small { font-size: .62rem; letter-spacing: 0; }
.fs-heart { position: absolute; left: 48.5%; width: 3%; top: 0; bottom: 0; background: #c8f6ff; box-shadow: 0 0 8px #8ff0ff, 0 0 2px #fff; }
.fs-quality { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.fs-quality small { font: .65rem var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: #d7b48a; }
.fs-qbar { flex: 1; height: 8px; border-radius: 4px; border: 2px solid var(--edge); background: #1d1714; overflow: hidden; }
.fs-qbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff9a3c, #ffd34d); transition: width .45s ease-out; }
.fs-qbar i.full { background: linear-gradient(90deg, #ffd34d, #ffffff); box-shadow: 0 0 8px #fff3b0; }
/* the veil over the screen while the smith works (forgeVeil): taps land on it, the room shows through around the anvil */
.forge-veil { position: fixed; inset: 0; z-index: 40; touch-action: none; -webkit-tap-highlight-color: transparent; animation: veilIn .35s ease-out; transition: opacity .35s; }
.forge-veil.out { opacity: 0; }
.forge-veil .fv-room { position: absolute; }
@keyframes veilIn { from { opacity: 0; } }
.fv-room .forge-strike { bottom: 8px; }
.fv-room .forge-skip { top: 8px; bottom: auto; }

/* tempering: only the zones that count keep their colour, the rest of the bar is a miss */
.fs-bar.need-parfait .fs-good, .fs-bar.need-coeur .fs-good, .fs-bar.need-coeur .fs-perfect { display: none; }