/* Home a 6 tessere, Inventario, Forgia */

/* ── tessere della home: 3 a sinistra e 3 a destra ── */
.side-btn { width: clamp(88px, 15.5vh, 128px); }
.side-btn.r1 { top: 25%; } .side-btn.r2 { top: 49%; } .side-btn.r3 { top: 73%; }
.side-btn .badge.cntb { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #c8323f; border: 2px solid #1a1007; color: #fff; font-family: var(--font); font-size: 14px; animation: bob .8s ease-in-out infinite; }
.side-btn.right .badge.cntb { right: -4px; }
@media (max-height: 520px) {
  .side-btn { width: 80px; padding: 6px 4px 5px; font-size: 11px; line-height: 1.05; text-align: center; }
  .side-btn .ico { font-size: 30px; width: 30px; height: 30px; }
  .side-btn.r1 { top: 28%; } .side-btn.r2 { top: 51%; } .side-btn.r3 { top: 74%; }
}

/* ── pulsante Inventario in alto ── */
.sqbtn.inv .ico { width: 70%; height: 70%; }
.sqbtn.inv .cnt { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #c8323f; border: 2px solid #1a1007; display: grid; place-items: center; font-family: var(--font); font-size: 14px; color: #fff; }

/* ── modal Inventario ── */
#modal.inventory .modal-box { width: min(700px, 100%); }
.inv-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: -4px 0 10px; }
.inv-tabs button { position: relative; padding: 7px 16px; border-radius: 8px; border: 2px solid #1a1007; background: linear-gradient(#5a4a3a, #2e251c); color: #e8d6b0; font-family: var(--font); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
.inv-tabs button.on { background: linear-gradient(#f0c56e, #b27a22); color: #1a1007; box-shadow: 0 0 12px rgba(240, 197, 110, .5); }
.inv-tabs .dot { margin-left: 6px; display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #c8323f; color: #fff; font-style: normal; font-size: 12px; line-height: 20px; }
.sm-item, .mat-item, .w-item { cursor: default; }
.sm-item { cursor: pointer; }
.sm-item strong, .mat-item strong, .w-item strong { font-family: var(--font); font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #fff; margin-top: 2px; text-align: center; line-height: 1.1; }
.sm-ico { display: grid; place-items: center; width: 78px; height: 78px; }
.sm-ico .ico, .sm-ico .wicon { width: 70px; height: 70px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.sm-ico img { width: 78px; height: 78px; object-fit: cover; border-radius: 10px; }
.sm-item:hover { filter: brightness(1.12); }

/* ── schermata Forgia ── */
.bgfx.forge { background: #0c0912 url(../assets/ui/bg_vault.jpg) 50% 60% / cover no-repeat; filter: sepia(.55) saturate(2.1) hue-rotate(-24deg) brightness(.75); inset: -26px; animation: none; }
.bgfx.forge::after { background: radial-gradient(ellipse at 70% 75%, rgba(255, 120, 30, .38), transparent 55%), linear-gradient(rgba(8, 4, 2, .5), rgba(8, 4, 2, .55)); }
#screen-forge { display: none; }
#screen-forge.active { display: block; }
.ore-chip { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
.ore-chip .ico { width: 24px; height: 24px; }
.fg-body { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); top: calc(66px + var(--safe-t)); bottom: calc(12px + var(--safe-b)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; z-index: 2; }
.fg-left, .fg-right { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.fg-left { padding: 10px; border-radius: 10px; border: 2px solid var(--bronze); background: rgba(16, 10, 6, .72); backdrop-filter: blur(4px); }
.fg-f { flex: 0 0 auto; gap: 6px; }
.fg-f button { padding: 5px 11px; font-size: 13px; color: #f2e9d6; }
.fg-f button.on { background: linear-gradient(#f0cf7a, #b6832d); color: #2a1808; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.fg-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; align-content: start; padding: 6px 4px 8px; }
.fg-t { width: auto; height: auto; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 22%, #2b2013), #120c06 80%); }
.fg-t .wicon { width: 52px; height: 52px; }
.fg-t em { font-style: normal; font-size: 11px; line-height: 1.1; text-align: center; color: #f2e9d6; font-family: var(--font); letter-spacing: .5px; text-transform: uppercase; min-height: 24px; display: grid; place-items: center; }
.fg-t:not(.own) .wicon { filter: saturate(.7) brightness(.85); }
.fg-t.own { box-shadow: 0 0 10px color-mix(in srgb, var(--rc) 55%, transparent); }
.fg-hint { color: var(--mut); display: flex; align-items: center; gap: 6px; font-size: 12px; }
.fg-hint .ico { width: 16px; height: 16px; }
.fg-right { overflow-y: auto; }
.fg-stage { position: relative; flex: 0 0 auto; height: clamp(120px, 34vh, 220px); border-radius: 10px; border: 2px solid var(--rc); background: radial-gradient(ellipse at 50% 85%, rgba(255, 130, 40, .5), rgba(20, 8, 4, .85) 70%); overflow: hidden; }
.fg-glow { position: absolute; left: 50%; bottom: 8%; width: 70%; aspect-ratio: 1; transform: translate(-50%, 40%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 70%, #fff) 0, transparent 62%); opacity: .55; filter: blur(6px); animation: fgglow 2.4s ease-in-out infinite alternate; }
@keyframes fgglow { to { opacity: .85; transform: translate(-50%, 36%) scale(1.06); } }
.fg-anvil { position: absolute; left: 50%; bottom: 2%; width: clamp(70px, 20vh, 120px); transform: translateX(-50%); }
.fg-anvil .ico { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
.fg-wicon { position: absolute; left: 50%; bottom: 38%; transform: translateX(-50%); animation: fgbob 2.6s ease-in-out infinite; filter: drop-shadow(0 0 14px var(--rc)); }
.fg-wicon .wicon { width: clamp(64px, 17vh, 110px); height: clamp(64px, 17vh, 110px); }
@keyframes fgbob { 50% { transform: translate(-50%, -8px); } }
.fg-stage .em { position: absolute; bottom: 14%; width: 5px; height: 5px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 8px 2px #ff7a1a; opacity: 0; animation: fgem 2.6s linear infinite; }
.fg-stage .e1 { left: 38%; } .fg-stage .e2 { left: 52%; animation-delay: .7s; } .fg-stage .e3 { left: 62%; animation-delay: 1.3s; } .fg-stage .e4 { left: 45%; animation-delay: 1.9s; }
@keyframes fgem { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -90px); } }
.fg-info { padding: 10px 12px 12px; border-radius: 10px; border: 2px solid var(--rc); background: rgba(10, 6, 3, .78); display: flex; flex-direction: column; gap: 6px; }
.fg-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fg-name b { font-family: var(--font); font-size: clamp(18px, 3.4vh, 24px); color: var(--rc); letter-spacing: 1px; }
.fg-r { font-size: 12px; color: #e8dcff; opacity: .85; }
.fg-info p { margin: 0; font-size: 13px; line-height: 1.35; color: #f2e9d6; }
.fg-for small { color: var(--mut); font-size: 12px; }
.fg-hs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fg-h { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid #1a1007; background: #261a10; overflow: hidden; }
.fg-h img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-h.lock img { filter: grayscale(1) brightness(.55); }
.fg-h.eq { box-shadow: 0 0 0 2px var(--rc, #ffc83d), 0 0 10px var(--rc, #ffc83d); }
.fg-h i { position: absolute; right: -1px; bottom: -1px; width: 16px; height: 16px; border-radius: 50%; background: #3fbf5a; border: 2px solid #1a1208; display: grid; place-items: center; }
.fg-h i .ico { width: 10px; height: 10px; }
.fg-cost { display: flex; gap: 10px; flex-wrap: wrap; }
.fc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 8px; border: 2px solid #1a1007; background: rgba(0, 0, 0, .45); }
.fc .ico, .fc .cico { width: 24px; height: 24px; }
.fc b { font-family: var(--font); font-size: 16px; }
.fc small { color: var(--mut); font-size: 11px; }
.fc small::before { content: "/ "; }
.fc.ok b { color: #9fe88a; } .fc.no b { color: #ff7a7a; }
.fg-info .btn.big { width: 100%; font-size: clamp(18px, 3.4vh, 26px); }
@media (max-width: 760px) { .fg-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ── animazione di forgiatura ── */
#modal.forging .modal-box { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; width: min(520px, 100%); text-align: center; animation: none; }
.fa-stage { position: relative; width: 100%; height: min(54vh, 330px); }
.fa-glow { position: absolute; left: 50%; bottom: 4%; width: 90%; aspect-ratio: 1; transform: translate(-50%, 40%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 50, .8), transparent 62%); opacity: .4; transition: opacity .3s; }
.fa-stage.hit .fa-glow { animation: fahit .5s ease-out; }
@keyframes fahit { 0% { opacity: 1; transform: translate(-50%, 36%) scale(1.15); } 100% { opacity: .4; transform: translate(-50%, 40%) scale(1); } }
.fa-anvil { position: absolute; left: 50%; bottom: 0; width: 46%; transform: translateX(-50%); }
.fa-anvil .ico { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .8)); }
.fa-stage.hit .fa-anvil { animation: faboing .3s ease-out; }
@keyframes faboing { 30% { transform: translateX(-50%) translateY(5px) scale(1.03, .97); } }
.fa-hammer { position: absolute; left: 50%; bottom: 36%; width: 36%; transform-origin: 85% 90%; transform: translateX(-30%) rotate(-65deg); animation: fahammer 1.8s linear forwards; }
.fa-hammer .ico { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); }
@keyframes fahammer {
  0% { transform: translateX(-30%) rotate(-70deg); }
  18% { transform: translateX(-30%) rotate(-70deg); } 25% { transform: translateX(-30%) rotate(8deg); } 33% { transform: translateX(-30%) rotate(-55deg); }
  43% { transform: translateX(-30%) rotate(-62deg); } 50% { transform: translateX(-30%) rotate(8deg); } 58% { transform: translateX(-30%) rotate(-55deg); }
  68% { transform: translateX(-30%) rotate(-62deg); } 75% { transform: translateX(-30%) rotate(8deg); } 84% { transform: translateX(-30%) rotate(-30deg); opacity: 1; }
  100% { transform: translateX(-30%) rotate(-30deg); opacity: 0; }
}
.fa-sparks { position: absolute; left: 50%; bottom: 44%; width: 0; height: 0; }
.fa-sparks i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 8px 2px #ff8a2b; opacity: 0; }
.fa-stage.hit .fa-sparks i { animation: faspark .6s ease-out var(--dl) both; }
@keyframes faspark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 50px)) scale(.2); } }
.fa-weapon { position: absolute; left: 50%; bottom: 34%; transform: translateX(-50%) scale(.2); opacity: 0; filter: drop-shadow(0 0 22px var(--rc)); }
#modal.forging.done .fa-weapon { animation: fapop .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes fapop { to { opacity: 1; transform: translateX(-50%) scale(1) translateY(-10px); } }
.fa-flash { position: absolute; inset: -30px; background: radial-gradient(circle at 50% 50%, #fff, transparent 60%); opacity: 0; pointer-events: none; }
#modal.forging.done .fa-flash { animation: faflash .8s ease-out; }
@keyframes faflash { 0% { opacity: .95; } 100% { opacity: 0; } }
.fa-done { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: fadein .4s ease-out .3s both; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }
.fa-done b { font-family: var(--font); font-size: clamp(22px, 4.4vh, 34px); color: var(--rc); text-shadow: 0 3px 8px #000; letter-spacing: 2px; text-transform: uppercase; }
.fa-done span { color: #fff; font-size: 14px; }
.fa-done small { color: var(--mut); }
.fa-done .fg-hs { justify-content: center; }

/* Minerale nella schermata dei risultati */
.rs-cell.rs-ore .ico { width: clamp(30px, 6.4vh, 52px); height: clamp(30px, 6.4vh, 52px); flex: none; }
.rs-cell.rs-ore b { color: #ffb36b; }

/* Casse del bottino */
.fg-crate { margin-right: 6px; } .fg-crate .ico { width: 20px; height: 20px; vertical-align: -4px; } .fg-crate b { background: #fff; color: #1a1208; border-radius: 9px; padding: 0 6px; margin-left: 4px; font-size: 12px; }
.ca-chest { position: absolute; left: 50%; bottom: 8%; width: 46%; transform: translateX(-50%); animation: cashake 1.8s ease-in-out forwards; }
.ca-chest .ico { width: 100%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.8)) drop-shadow(0 0 14px var(--rc)); }
@keyframes cashake { 0%,100% { transform: translateX(-50%) rotate(0); } 12% { transform: translateX(-50%) rotate(-7deg) scale(1.03); } 24% { transform: translateX(-50%) rotate(7deg) scale(1.03); } 36% { transform: translateX(-50%) rotate(-9deg) scale(1.06); } 48% { transform: translateX(-50%) rotate(9deg) scale(1.06); } 62% { transform: translateX(-50%) rotate(-11deg) scale(1.1); } 78% { transform: translateX(-50%) rotate(11deg) scale(1.12); } 92% { transform: translateX(-50%) scale(1.15); } }
#modal.crate.done .ca-chest { animation: caopen .6s ease-in forwards; }
@keyframes caopen { to { opacity: 0; transform: translateX(-50%) translateY(40px) scale(.7); } }
.ca-res .ico { width: 96px; height: 96px; }
.rs-crate { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 6px 12px; margin: 4px 0; border-radius: 10px; background: rgba(255,200,61,.14); border: 2px solid #ffc83d; animation: fadein .5s ease-out 1.2s both; }
.rs-crate .ico { width: 30px; height: 30px; } .rs-crate b { color: #ffd36b; font-family: var(--font); letter-spacing: 1px; } .rs-crate small { color: var(--mut); }