/* ───── SCHEDA PERSONAGGIO: armi in primo piano, mosse in due file da 3 ───── */
#screen-detail .dgrid { grid-template-columns: minmax(180px, 23%) 1fr minmax(320px, 43%); gap: 16px; }
.d-right { gap: 12px; padding-right: 4px; padding-bottom: 8px; }
.d-right h3 { display: flex; align-items: center; gap: 10px; }
.d-right h3::after { content: ""; flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .7; }
.d-right .wbox { margin-bottom: 0; }

/* arma in evidenza */
.wfeat { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 8px 0 10px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--rc); overflow: hidden;
  background: radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--rc) 48%, #000) 0%, #120c08 72%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 38%, transparent), 0 5px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14); }
.wf-ico { position: relative; width: clamp(78px, 17vh, 128px); aspect-ratio: 1; display: grid; place-items: center; }
.wf-halo { position: absolute; inset: -22%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 80%, #fff) 0 7deg, transparent 7deg 18deg); opacity: .45; mask-image: radial-gradient(circle, #000 18%, transparent 66%); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%); animation: wfspin 16s linear infinite; }
.wf-ico .wicon { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .7)) drop-shadow(0 0 12px color-mix(in srgb, var(--rc) 70%, transparent)); animation: wffloat 3.2s ease-in-out infinite; }
@keyframes wfspin { to { transform: rotate(360deg); } }
@keyframes wffloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.wf-main { min-width: 0; display: grid; gap: 3px; }
.wf-n { font-family: var(--font); font-weight: 400; font-size: clamp(19px, 3.6vh, 28px); line-height: 1.05; color: var(--rc); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.wf-r { font-size: clamp(10px, 1.8vh, 13px); letter-spacing: .6px; text-transform: uppercase; color: #e8dcff; opacity: .85; }
.wf-main p { margin: 2px 0 4px; font-size: clamp(11px, 2vh, 14px); line-height: 1.35; color: #f6eedc; }
.wf-main .wi-act .btn { padding: 6px 16px; font-size: clamp(14px, 2.6vh, 18px); }
.wfeat.r4 { animation: wfglow 2.4s ease-in-out infinite alternate; }
@keyframes wfglow { to { box-shadow: 0 0 34px color-mix(in srgb, var(--rc) 70%, transparent), 0 5px 12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14); } }

/* caselle delle armi */
.wtiles { gap: 8px; margin: 0; }
.wtiles .wtile { width: clamp(52px, 9.4vh, 66px); height: clamp(52px, 9.4vh, 66px); border-radius: 12px; transition: transform .12s; }
.wtiles .wtile:hover { transform: translateY(-2px); }
.wtiles .wtile .wicon { width: 78%; height: 78%; }

/* mosse: 2 file da 3 */
.atk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atk-card { --c: #fff; position: relative; display: grid; align-content: start; gap: 4px; padding: 8px 8px 9px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--c) 45%, #000); border-top: 4px solid var(--c);
  background: linear-gradient(color-mix(in srgb, var(--c) 14%, rgba(52, 38, 26, .96)), rgba(24, 17, 11, .97)); box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 150, .16); }
.atk-card .ac-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.atk-card .ai { flex: none; width: clamp(32px, 6.2vh, 44px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 28%, #fff9, transparent 45%), var(--c); display: grid; place-items: center; font-size: clamp(18px, 3.4vh, 26px); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.atk-card .a-mana { font-size: clamp(14px, 2.4vh, 18px); }
.atk-card > b { display: block; font-family: var(--font); font-weight: 400; font-size: clamp(12px, 2.2vh, 16px); line-height: 1.08; color: var(--c); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.atk-card > small { color: #cdd4ff; font-size: clamp(10px, 1.75vh, 12px); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.atk-card.wadd { outline: 2px solid rgba(255, 211, 107, .6); }

@media (max-width: 900px) { #screen-detail .dgrid { grid-template-columns: minmax(130px, 22%) 1fr minmax(260px, 46%); gap: 10px; } }
@media (max-width: 700px) { .atk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wfeat { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
@media (max-height: 460px) { .atk-card > small { display: none; } .wf-main p { display: none; } }

/* skin dell'eroe nella scheda personaggio */
.skbox { margin: 10px 0 8px; }
.sktiles { display: flex; gap: 10px; flex-wrap: wrap; }
.sktile { position: relative; width: clamp(74px, 13vh, 104px); padding: 4px 4px 6px; border-radius: 12px; border: 2px solid var(--sc, #9a7239); background: linear-gradient(#34261a, #1b140e); color: #fff; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .12s, box-shadow .12s; }
.sktile:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 0 14px var(--sc); }
.sktile img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; object-position: top; border-radius: 8px; background: #0b0806; }
.sktile b { font-size: clamp(9px, 1.5vh, 12px); line-height: 1.1; text-align: center; letter-spacing: .3px; }
.sktile.eq { box-shadow: 0 0 0 2px #fff3, 0 0 16px var(--sc); }
.sktile i { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #3fbf4a; display: grid; place-items: center; } .sktile i .ico { width: 14px; height: 14px; }
.sktile[disabled] { opacity: .5; cursor: default; }
.sktile em { position: absolute; left: 6px; top: 6px; padding: 0 6px 1px; font-style: normal; font-size: 10px; border-radius: 7px; background: var(--sc); color: #1a1208; font-weight: 700; }
.sktile.lock img { filter: grayscale(.8) brightness(.6); }
.sktile i.skl { background: #3a2a4a; } .sktile i.skl .ico { width: 14px; height: 14px; }