/* Silk & Steel · mondo persistente (sopra campagna.css: ne riusa colori, inchiostro, finestre, targhe e battaglia) */
body.mondo { background: #0c0b0a; }
body.mondo, body.mondo * { scrollbar-width: none; }
body.mondo ::-webkit-scrollbar { display: none; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- viste */
.mb-scena { position: fixed; inset: 0; }
.mb-vista { position: fixed; inset: 0; }
.mb-dipinto { overflow-x: auto; overflow-y: hidden; background: #1a1712; }
.mb-quadro { position: absolute; left: 0; top: 0; }
.mb-fondo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mb-dipinto::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 55%, transparent 55%, rgba(8, 6, 4, .55)), linear-gradient(180deg, rgba(8, 6, 4, .55), transparent 16%); }

/* lotti (edifici e campi) */
.mb-lotto { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; width: calc(var(--s) * 9.4%); transform: translate(-50%, -74%); -webkit-tap-highlight-color: transparent; }
.mb-lotto img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 5px rgba(20, 12, 4, .45)); transition: filter .2s, transform .25s; transform-origin: 50% 85%; }
.mb-lotto img.alto { width: 74%; margin: 0 auto; }
.mb-lotto:hover img, .mb-lotto:focus-visible img { filter: drop-shadow(0 0 2px #fff3c4) drop-shadow(0 0 10px rgba(255, 220, 140, .85)) brightness(1.08); transform: translateY(-3%); }
.mb-lotto em { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px); padding: 4px 10px; white-space: nowrap; font: 700 12px/1 var(--f-titolo); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--oro-chiaro); background: rgba(10, 8, 6, .92); border: 1px solid rgba(232, 207, 148, .45); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.mb-lotto:hover em { opacity: 1; transform: translate(-50%, -4px); }
.mb-liv { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 50%); min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 13px; font: 800 13px/1 var(--f-titolo); color: #fff6e2; background: radial-gradient(circle at 50% 30%, #3a3026, #120e0b); box-shadow: 0 0 0 1.5px #e8cf94, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); }
.mb-liv i { position: absolute; right: -14px; top: -10px; font-style: normal; font-size: 13px; animation: martello 1s ease-in-out infinite; filter: drop-shadow(0 1px 1px #000); }
@keyframes martello { 50% { transform: rotate(-28deg); } }
.mb-liv.legno { box-shadow: 0 0 0 1.5px #9fd07a, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); }
.mb-liv.pietra { box-shadow: 0 0 0 1.5px #cfd3d6, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); }
.mb-liv.ferro { box-shadow: 0 0 0 1.5px #e09a6a, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); }
.mb-liv.riso { box-shadow: 0 0 0 1.5px #f1dd8a, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); }
.mb-lotto.lavori .mb-liv { background: radial-gradient(circle at 50% 30%, #7a4a1c, #2a160a); }
.mb-campo { width: calc(var(--s) * 8.6%); transform: translate(-50%, -62%); }
.mb-campo img { transform: scale(var(--k, 1)); }
.mb-campo:hover img { transform: scale(var(--k, 1)) translateY(-3%); }
.mb-campo.spento img { filter: saturate(.55) brightness(.9) drop-shadow(0 6px 5px rgba(20, 12, 4, .45)); }
.mb-campo .mb-liv { bottom: 14%; }
.mb-edificio.vuoto, .mb-edificio.fisso { width: 64px; height: 64px; transform: translate(-50%, -50%); }
.mb-edificio.vuoto .mb-liv, .mb-edificio.fisso .mb-liv { bottom: 50%; }
.mb-edificio.fisso .mb-liv { min-width: 34px; height: 34px; border-radius: 17px; font-size: 16px; }
.mb-edificio.fisso em { opacity: .95; transform: translate(-50%, 2px); bottom: 74%; }
.mb-piu { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 400 24px/1 var(--f-testo); color: #fff6e2; background: rgba(20, 15, 10, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 246, 226, .7), 0 0 14px rgba(255, 230, 170, .25); opacity: .55; transition: opacity .2s, transform .2s, background .2s; }
.mb-edificio.vuoto:hover .mb-piu { opacity: 1; transform: translate(-50%, -50%) scale(1.15); background: rgba(160, 40, 30, .7); }
.mb-centro { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 22%; height: 30%; border: 0; background: none; cursor: pointer; color: transparent; font: 0/0 a; }
.mb-centro b { display: none; }
.mb-centro:hover { background: radial-gradient(closest-side, rgba(255, 230, 170, .14), transparent); }
.mb-ai-campi { position: absolute; left: auto; right: 0; top: auto; bottom: 0; width: auto; height: auto; transform: none; display: none; }

/* ---------------------------------------------------------------- barra in alto */
.mb-testa { position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; padding: 10px 18px 22px; background: linear-gradient(180deg, rgba(8, 7, 6, .96) 0%, rgba(8, 7, 6, .82) 62%, transparent); pointer-events: none; }
.mb-testa > * { pointer-events: auto; }
.mb-villaggio { display: grid; min-width: 0; max-width: 240px; }
.mb-v-nome { padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: 800 19px/1.1 var(--f-titolo); letter-spacing: .06em; color: var(--oro-chiaro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-villaggio small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
.mb-villaggio select { margin-top: 4px; background: #15120f; color: var(--testo); border: 1px solid rgba(232, 207, 148, .35); font: inherit; padding: 2px 4px; }
.mb-risorse { display: flex; gap: 8px; flex: 1; justify-content: center; min-width: 0; }
.mb-ris { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 10px 9px 6px; background: rgba(22, 19, 16, .9); border: 1px solid rgba(232, 207, 148, .22); min-width: 128px; }
.mb-ris > b { width: 28px; height: 28px; display: grid; place-items: center; font: 400 17px/1 var(--f-pennello); color: #fff6e2; border-radius: 50%; background: var(--c, #555); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 1px #000; }
.mb-ris.legno { --c: #3f6b2c; } .mb-ris.pietra { --c: #6a6e72; } .mb-ris.ferro { --c: #7a3f22; } .mb-ris.riso { --c: #a88a2c; } .mb-ris.pop { --c: #4a3b5c; min-width: 0; }
.mb-ris span { display: grid; line-height: 1.05; }
.mb-ris em { font: 700 15px/1 var(--f-testo); font-style: normal; color: var(--testo); font-variant-numeric: tabular-nums; }
.mb-ris small { font-size: 9.5px; color: var(--testo-2); }
.mb-ris i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--c) calc(var(--p) * 100%), rgba(255, 255, 255, .06) 0); filter: brightness(1.4); }
.mb-ris u { position: absolute; right: 6px; top: 4px; text-decoration: none; font-size: 9.5px; color: #a8d088; }
.mb-ris.pieno em { color: #ffcf7a; } .mb-ris.pieno i { animation: pulsa 1.2s ease-in-out infinite; }
.mb-ris.fame u { color: #ff7b6b; }
@keyframes pulsa { 50% { opacity: .4; } }
.mb-schede { display: flex; gap: 2px; }
.mb-schede button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 10px 5px; border: 0; background: none; cursor: pointer; color: var(--testo-2); font: 700 10px/1 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; }
.mb-schede button b { font: 400 21px/1 var(--f-pennello); color: var(--testo); transition: color .15s, transform .15s; }
.mb-schede button:hover b { color: var(--oro-chiaro); transform: translateY(-1px); }
.mb-schede button.su { color: var(--oro-chiaro); }
.mb-schede button.su b { color: #fff3c4; text-shadow: 0 0 12px rgba(243, 211, 138, .6); }
.mb-schede button.su::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -4px; height: 2px; background: #c9a45a; }
.mb-schede i { position: absolute; right: 2px; top: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #a3262a; color: #fff; font: 700 10px/16px var(--f-testo); font-style: normal; letter-spacing: 0; }
.mb-io { display: flex; align-items: center; gap: 10px; }
.mb-eroe { position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: #15120f; box-shadow: 0 0 0 1.5px #ecd59c, 0 0 0 4px color-mix(in srgb, var(--fz) 82%, #000), 0 0 0 5px #b8924c; }
.mb-eroe span { position: absolute; inset: 0; border-radius: 50%; background: center 30% / 116% no-repeat; }
.mb-eroe i { position: absolute; right: -6px; bottom: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #0b0a09; border: 1px solid #e8cf94; color: #fff3c4; font: 700 10px/16px var(--f-testo); font-style: normal; }
.mb-chi { display: grid; line-height: 1.15; }
.mb-chi b { font: 700 13px/1.1 var(--f-titolo); letter-spacing: .06em; }
.mb-chi small { font-size: 10px; color: var(--testo-2); letter-spacing: .08em; }
.mb-velocita { padding: 6px 9px; border: 1px solid rgba(232, 207, 148, .45); background: #1c1814; color: var(--oro-chiaro); font: 700 12px/1 var(--f-testo); cursor: pointer; }
span.mb-velocita { cursor: default; }

/* ---------------------------------------------------------------- pannello laterale */
.mb-lato.inchiostro { position: fixed; z-index: 20; right: 22px; top: 96px; width: 270px; max-height: calc(100vh - 130px); overflow-y: auto; padding: 4px 6px 8px; }
.mb-lato h3 { margin: 12px 0 6px; font: 700 11px/1 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.mb-lato h3:first-child { margin-top: 4px; }
.mb-coda, .mb-marce { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mb-coda li, .mb-marce li { display: flex; align-items: baseline; gap: 6px; padding: 6px 8px; background: rgba(255, 255, 255, .04); border-left: 2px solid var(--oro); font-size: 12px; }
.mb-coda li span, .mb-marce li span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--oro-chiaro); white-space: nowrap; }
.mb-coda small, .mb-marce small { color: var(--testo-2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mb-coda button, .mb-marce button { padding: 0 4px; border: 0; background: none; color: #d9654f; cursor: pointer; font-size: 12px; }
.mb-marce li.ostile { border-left-color: #d9362a; background: rgba(160, 30, 20, .18); animation: allerta 1.4s ease-in-out infinite; }
.mb-marce li.rinforzo { border-left-color: #6fa8d6; }
.mb-marce li.ritorno { border-left-color: #6fbf5a; }
@keyframes allerta { 50% { background: rgba(160, 30, 20, .32); } }
.mb-vuoto { margin: 4px 0; font-size: 12px; color: var(--testo-2); }
.mb-truppe { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-mini { position: relative; width: 40px; height: 48px; display: inline-block; overflow: hidden; background: #1b1713; border: 1px solid var(--fz, #777); flex: none; }
.mb-mini img { position: absolute; left: 50%; top: 0; width: 140%; transform: translateX(-50%); }
.mb-mini i { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; text-align: center; font: 700 10px/1.2 var(--f-testo); font-style: normal; color: #fff; background: rgba(0, 0, 0, .78); }
.mb-mini.coloni { display: inline-grid; place-items: center; --fz: #c9a45a; }
.mb-mini.coloni b { font: 400 20px/1 var(--f-pennello); color: var(--oro-chiaro); margin-top: -10px; }
.mb-truppe.grandi .mb-mini { width: 54px; height: 66px; }

/* ---------------------------------------------------------------- finestre */
/* l'inchiostro resta fermo come cornice, scorre solo il contenuto */
.mb-finestra { text-align: left; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 72px); display: flex; flex-direction: column; padding: 22px 8px 18px 24px; z-index: 45; }
.mb-corpo { min-height: 0; overflow-y: auto; padding-right: 16px; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); padding-top: 6px; padding-bottom: 18px; }
.mb-f-scelta { width: min(980px, calc(100vw - 32px)); }
.mb-f-scelta .mb-elenco { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mb-f-scelta .mb-voce { grid-template-columns: 96px 1fr; align-items: start; border: 1px solid rgba(232, 207, 148, .12); }
.mb-f-scelta .mb-voce > img { margin-top: 4px; }
.mb-f-scelta .mb-elenco h3 { grid-column: 1 / -1; margin: 10px 0 0; }
.mb-voce.bloccato > img { filter: grayscale(.7) brightness(.75); }
.mb-voce.bloccato b { color: var(--testo-2); }
.mb-f-scelta .mb-costo span { font-size: 12px; padding-right: 6px; }
.velo { z-index: 44; }
.mb-finestra .esito { text-align: center; }
.mb-finestra .esito h2 { font-size: 36px; }
.mb-finestra h3 { margin: 18px 0 8px; font: 700 12px/1 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.mb-finestra p { margin: 8px 0; line-height: 1.5; }
.mb-chiudi { position: absolute; right: 2px; top: 0; z-index: 2; width: 30px; height: 30px; border: 0; background: none; color: var(--testo-2); font-size: 16px; cursor: pointer; }
.mb-chiudi:hover { color: #fff; }
.mb-finestra .scelte { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mb-finestra .scelte button, .mb-tipi button, .mb-velocita-scelte button { padding: 10px 16px; border: 1px solid rgba(232, 207, 148, .5); background: #1c1814; color: var(--testo); font: 700 12px/1 var(--f-testo); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mb-finestra .scelte button.primario, .mb-primario { background: linear-gradient(180deg, #8e2a1e, #5b170f); border: 1px solid #e8b98a; color: #fff3df; }
.mb-finestra button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.mb-finestra .scelte button:not(:disabled):hover { filter: brightness(1.18); }
.mb-scheda { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: center; }
.mb-scheda > img { width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.mb-scheda small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--testo-2); }
.mb-scheda h2 { margin: 4px 0 6px; font: 800 30px/1.05 var(--f-titolo); letter-spacing: .05em; color: var(--oro-chiaro); }
.mb-effetto { padding: 8px 10px; background: rgba(232, 207, 148, .07); border-left: 2px solid var(--oro); font-size: 12.5px; }
.mb-motivo { color: #e98a6f; font-size: 12.5px; }
.mb-durata { color: var(--testo-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mb-costo { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-costo span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; background: rgba(255, 255, 255, .05); font: 700 12.5px/1 var(--f-testo); font-variant-numeric: tabular-nums; }
.mb-costo span b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 400 12px/1 var(--f-pennello); color: #fff6e2; }
.mb-costo .legno b { background: #3f6b2c; } .mb-costo .pietra b { background: #6a6e72; } .mb-costo .ferro b { background: #7a3f22; } .mb-costo .riso b { background: #a88a2c; }
.mb-costo .manca { color: #ff8a73; background: rgba(160, 40, 30, .2); }
.mb-elenco { display: grid; gap: 10px; }
.mb-voce { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 10px; background: rgba(255, 255, 255, .035); }
.mb-voce > img { width: 100%; }
.mb-voce b { font: 700 17px/1.1 var(--f-titolo); color: var(--oro-chiaro); letter-spacing: .05em; }
.mb-voce p { margin: 4px 0 6px; font-size: 12.5px; color: var(--testo-2); }
.mb-voce .scelte { margin-top: 6px; } .mb-voce .scelte button { padding: 7px 12px; }
.mb-addestra { display: grid; gap: 10px; }
.mb-truppa { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 10px; background: rgba(255, 255, 255, .035); }
.mb-truppa.bloccata { opacity: .7; }
.mb-truppa.bloccata .mb-carta { filter: grayscale(.8); }
.mb-truppa b { font: 700 16px/1.1 var(--f-titolo); color: var(--oro-chiaro); }
.mb-truppa small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-2); margin: 2px 0 6px; }
.mb-truppa dl { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; }
.mb-truppa dl div { display: flex; gap: 4px; align-items: baseline; }
.mb-truppa dt { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
.mb-truppa dd { margin: 0; font-weight: 700; }
.mb-carta-coloni { width: 78px; aspect-ratio: 5 / 8; display: grid; place-items: center; background: #1b1713; border: 2px solid #c9a45a; }
.mb-carta-coloni b { font: 400 34px/1 var(--f-pennello); }
.mb-quanti { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.mb-quanti input, .mb-campo-testo input, .mb-invia input { width: 90px; padding: 8px; background: #0f0d0b; color: var(--testo); border: 1px solid rgba(232, 207, 148, .35); font: 700 13px/1 var(--f-testo); }
.mb-quanti button { padding: 8px 12px; border: 1px solid rgba(232, 207, 148, .4); background: #1c1814; color: var(--testo); cursor: pointer; font: 700 11px/1 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; }
.mb-quanti button.primario { background: linear-gradient(180deg, #8e2a1e, #5b170f); border-color: #e8b98a; color: #fff3df; }
.mb-campo-testo { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; color: var(--testo-2); }
.mb-campo-testo input { width: 100%; font-size: 15px; }
.mb-tipi { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mb-tipi button.su, .mb-velocita-scelte button.su { background: linear-gradient(180deg, #8e2a1e, #5b170f); border-color: #e8b98a; color: #fff3df; }
.mb-spiega { text-align: center; color: var(--testo-2); font-size: 12.5px; }
.mb-invia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.mb-invia-riga { display: grid; grid-template-columns: 40px 1fr 64px auto; align-items: center; gap: 8px; padding: 6px; background: rgba(255, 255, 255, .035); font-size: 12px; }
.mb-invia-riga input { width: 64px; padding: 6px; }
.mb-invia-riga button { padding: 6px 8px; border: 1px solid rgba(232, 207, 148, .3); background: none; color: var(--oro-chiaro); cursor: pointer; font-size: 11px; }
.mb-spunta { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 13px; }
.mb-velocita-scelte { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.mb-eroe-scheda { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: end; }
.mb-eroe-scheda > img { width: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.mb-eroe-scheda h2 { margin: 2px 0; font: 800 34px/1 var(--f-titolo); color: var(--oro-chiaro); }
.mb-eroe-scheda small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--fz) 50%, #fff); }
.mb-xp { position: relative; height: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 207, 148, .3); }
.mb-xp i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #8e6a2a, #e8cf94); }
.mb-xp span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; }

/* rapporti, classifica, raduno */
#v-pagina { background: radial-gradient(120% 90% at 50% 0%, rgba(40, 30, 20, .6), transparent), url(assets/mondo/castello-sfondo.webp) center / cover; overflow-y: auto; }
#v-pagina::before { content: ""; position: fixed; inset: 0; backdrop-filter: blur(6px) brightness(.45); }
.mb-pagina.inchiostro { position: relative; margin: 104px auto 40px; width: min(980px, calc(100vw - 48px)); padding: 10px 12px 18px; }
.mb-pagina .esito { text-align: center; }
.mb-pagina .esito small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--testo-2); }
.mb-pagina .esito h2 { margin: 6px 0 14px; font: 800 40px/1 var(--f-titolo); letter-spacing: .06em; text-transform: uppercase; color: var(--oro-chiaro); }
.mb-pagina h3 { margin: 16px 0 8px; font: 700 12px/1 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.mb-pagina a { color: var(--oro-chiaro); }
.mb-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.mb-rapporti { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mb-rapporti li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255, 255, 255, .035); cursor: pointer; border-left: 2px solid transparent; }
.mb-rapporti li:hover { background: rgba(232, 207, 148, .08); }
.mb-rapporti li b { width: 30px; height: 30px; display: grid; place-items: center; font: 400 17px/1 var(--f-pennello); background: #2a241c; border-radius: 50%; }
.mb-rapporti li.vittoria b { background: #6a5420; } .mb-rapporti li.sconfitta b { background: #6a2018; }
.mb-rapporti li.nuovo { border-left-color: var(--oro); } .mb-rapporti li.nuovo span { font-weight: 700; color: #fff; }
.mb-rapporti small { color: var(--testo-2); font-size: 11px; }
.mb-tab-truppe { border-collapse: collapse; font-size: 12px; }
.mb-tab-truppe td, .mb-tab-truppe th { padding: 3px 6px; text-align: center; font-variant-numeric: tabular-nums; }
.mb-tab-truppe td:first-child { text-align: left; color: var(--testo-2); }
.mb-tab-truppe .morti { color: #ff8a73; }
.mb-classifica { width: 100%; border-collapse: collapse; font-size: 13px; }
.mb-classifica th { text-align: left; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--testo-2); padding: 6px 8px; }
.mb-classifica td { padding: 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
.mb-classifica td i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--fz); box-shadow: 0 0 0 1px #000; }
.mb-classifica tr.io td { background: rgba(232, 207, 148, .08); color: var(--oro-chiaro); font-weight: 700; }

/* ---------------------------------------------------------------- mappa */
.mb-mappa { background: #8fa3a8; }
.mb-segno-v .citta { transform-origin: 50% 100%; }
.mb-segno-v.mio .targa { border-top-color: #fff3c4; box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(243, 211, 138, .6), 0 3px 10px rgba(0, 0, 0, .45); }
.mb-segno-v.ribelle .citta > img { filter: grayscale(.7) brightness(.9); }
.segno.lontano .targa .nome small, .segno.lontano .targa .pop { display: none; }
.segno.lontano.mb-segno-v:not(.mio) .targa { display: none; }
.mb-segno-oasi .ss-avamposto { --w: 92px; width: 92px; }
.mb-padrone { display: block; text-align: center; font-size: 10px; color: var(--oro-chiaro); text-shadow: 0 1px 2px #000; }
.mb-segno-libero { cursor: pointer; }
.mb-segno-ribelle { cursor: pointer; display: grid; justify-items: center; }
.mb-segno-ribelle img { width: 42px; filter: grayscale(.75) brightness(.85) drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); transition: transform .15s, filter .15s; }
.mb-segno-ribelle span { margin-top: -6px; padding: 2px 6px; white-space: nowrap; font: 700 10px/1.1 var(--f-testo); color: #e6dcc8; background: rgba(12, 10, 8, .85); border: 1px solid rgba(255, 255, 255, .15); opacity: 0; transition: opacity .15s; }
.mb-segno-ribelle:hover img { transform: scale(1.2); filter: grayscale(.3) drop-shadow(0 0 6px #ffcf7a); }
.mb-segno-ribelle:hover span { opacity: 1; }
.mb-segno-libero i { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 246, 226, .35); box-shadow: 0 0 0 1.5px rgba(255, 246, 226, .8), 0 1px 3px rgba(0, 0, 0, .5); transition: transform .15s; }
.mb-segno-libero:hover i { transform: scale(1.5); background: #e8cf94; }
.segno.marcia { pointer-events: none; }
.segno.marcia b { display: grid; place-items: center; width: 24px; height: 28px; font: 400 14px/1 var(--f-pennello); color: #fff; background: linear-gradient(180deg, #8e2a1e, #4a120b); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 2px 3px #000); }
.segno.marcia.mia.rinforzo b, .segno.marcia.mia.fonda b { background: linear-gradient(180deg, #2e6a8e, #12344a); }
.segno.marcia.ostile b { animation: vacilla .7s ease-in-out infinite; background: linear-gradient(180deg, #e0442e, #6a120b); }

/* ---------------------------------------------------------------- avvisi */
.avvisi { position: fixed; z-index: 70; left: 50%; top: 92px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none; }
.mb-avviso { padding: 9px 16px; background: rgba(10, 8, 6, .94); border: 1px solid rgba(232, 207, 148, .4); color: var(--testo); font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); transition: opacity .7s, transform .7s; max-width: 80vw; }
.mb-avviso.errore { border-color: #d9654f; color: #ffcbbf; }
.mb-avviso.allarme { border-color: #ff4d36; background: rgba(90, 14, 8, .95); color: #fff; font-weight: 700; }
.mb-avviso.rapporto { border-color: var(--oro); }
.mb-avviso.via { opacity: 0; transform: translateY(-8px); }

/* ---------------------------------------------------------------- accesso */
.mb-accesso { position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: grid; place-items: start center; }
.mb-accesso-sfondo { position: fixed; inset: 0; background: url(assets/mondo/castello-sfondo.webp) center / cover; filter: brightness(.55) saturate(.9); transform: scale(1.04); animation: respiro 30s ease-in-out infinite alternate; }
.mb-accesso-sfondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 40%, transparent, rgba(6, 5, 4, .8)); }
@keyframes respiro { to { transform: scale(1.1) translateY(-1.5%); } }
.mb-accesso-corpo { position: relative; width: min(860px, calc(100vw - 32px)); padding: 6vh 0 40px; display: grid; gap: 22px; justify-items: center; }
.mb-carica { margin-top: 30vh; font: 700 14px/1 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-chiaro); }
.mb-logo { text-align: center; }
.mb-logo small { font: 700 12px/1 var(--f-testo); letter-spacing: .4em; text-transform: uppercase; color: var(--oro); }
.mb-logo h1 { margin: 8px 0 10px; font: 800 clamp(34px, 6vw, 62px)/1 var(--f-titolo); letter-spacing: .05em; color: #fff3c4; text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }
.mb-logo p { max-width: 560px; margin: 0 auto; font-size: 14px; line-height: 1.6; color: var(--testo); text-shadow: 0 2px 8px #000; }
.mb-modulo.inchiostro { position: relative; width: 100%; padding: 8px 10px 14px; }
.mb-tab { display: flex; justify-content: center; gap: 4px; margin-bottom: 14px; }
.mb-tab button { padding: 10px 22px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--testo-2); font: 700 13px/1 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.mb-tab button.su { color: var(--oro-chiaro); border-bottom-color: var(--oro); }
#mb-form { display: grid; gap: 12px; }
#mb-form label { display: grid; gap: 5px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-2); }
#mb-form input { padding: 11px 12px; background: #0f0d0b; color: var(--testo); border: 1px solid rgba(232, 207, 148, .35); font: 500 15px/1 var(--f-testo); }
#mb-form input:focus { outline: none; border-color: var(--oro-chiaro); }
.mb-riga2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mb-passo { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 700 15px/1 var(--f-titolo); letter-spacing: .06em; color: var(--oro-chiaro); }
.mb-passo b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #5b170f; color: #fff3df; font-size: 13px; box-shadow: 0 0 0 1px #e8b98a; }
.mb-errore { min-height: 1em; margin: 0; color: #ff8a73; font-size: 13px; text-align: center; }
.mb-primario { padding: 14px 24px; font: 700 14px/1 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; justify-self: center; }
.mb-primario:hover { filter: brightness(1.15); }
.mb-generali { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mb-popolo { display: grid; gap: 6px; align-content: start; }
.mb-popolo h4 { margin: 0 0 2px; padding: 6px; text-align: center; font: 700 13px/1 var(--f-titolo); letter-spacing: .14em; text-transform: uppercase; color: #fff6e2; background: linear-gradient(180deg, color-mix(in srgb, var(--fz) 90%, #fff 6%), color-mix(in srgb, var(--fz) 65%, #000)); }
.mb-gen { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--testo); text-align: left; cursor: pointer; }
.mb-gen span { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: center 30% / 116% no-repeat #15120f; box-shadow: 0 0 0 1px #ecd59c, 0 0 0 3px color-mix(in srgb, var(--fz) 80%, #000); }
.mb-gen b { font: 700 12.5px/1.1 var(--f-titolo); }
.mb-gen small { font-size: 9.5px; color: var(--testo-2); line-height: 1.2; }
.mb-gen:hover { background: rgba(232, 207, 148, .08); }
.mb-gen.su { border-color: var(--oro-chiaro); background: rgba(232, 207, 148, .14); box-shadow: 0 0 14px rgba(232, 207, 148, .25); }
.mb-regioni { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: center; }
.mb-minimappa { position: relative; width: 100%; aspect-ratio: 1050 / 1574; background: center / 100% 100% no-repeat #1d3e4f; box-shadow: 0 0 0 1px rgba(232, 207, 148, .4); }
.mb-reg-punto { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 246, 226, .75); box-shadow: 0 0 0 1.5px #1b140c, 0 1px 3px #000; cursor: pointer; transition: transform .15s; }
.mb-reg-punto:hover { transform: scale(1.4); }
.mb-reg-punto.su { background: #d9362a; transform: scale(1.6); box-shadow: 0 0 0 2px #fff3c4, 0 0 12px #f3d38a; }
.mb-reg-info { display: grid; gap: 6px; font-size: 13px; color: var(--testo-2); }
.mb-reg-info b { font: 800 26px/1 var(--f-titolo); color: var(--oro-chiaro); letter-spacing: .05em; }
.mb-link-campagna { color: var(--oro-chiaro); font-size: 13px; letter-spacing: .1em; text-shadow: 0 1px 4px #000; }

/* ---------------------------------------------------------------- schermi stretti */
@media (max-width: 1180px) {
  .mb-testa { flex-wrap: wrap; gap: 8px 14px; }
  .mb-risorse { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; }
  .mb-lato.inchiostro { top: 150px; width: 240px; }
}
@media (max-width: 760px) {
  .mb-testa { padding: 8px 10px 14px; }
  .mb-ris { min-width: 104px; } .mb-ris u { display: none; }
  .mb-schede { position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(8, 7, 6, .96); border-top: 1px solid rgba(232, 207, 148, .25); }
  .mb-schede button { padding: 4px 6px; font-size: 9px; }
  .mb-chi { display: none; }
  .mb-lato.inchiostro { top: auto; bottom: 74px; right: 12px; left: 12px; width: auto; max-height: 24vh; }
  .mb-edificio.vuoto, .mb-edificio.fisso { width: 40px; height: 40px; } .mb-piu { width: 24px; height: 24px; font-size: 17px; } .mb-liv { min-width: 20px; height: 20px; font-size: 11px; }
  .mb-scheda, .mb-eroe-scheda { grid-template-columns: 1fr; } .mb-scheda > img { width: 160px; justify-self: center; } .mb-eroe-scheda > img { width: 180px; justify-self: center; }
  .mb-colonne, .mb-riga2, .mb-regioni { grid-template-columns: 1fr; }
  .mb-generali { grid-template-columns: 1fr 1fr; }
  .mb-pagina.inchiostro { margin-top: 150px; width: calc(100vw - 28px); }
  .mb-finestra .esito h2 { font-size: 28px; }
}

/* ---------------------------------------------------------------- città 3D (vista Castello) */
.mb-c3 { background: #b9c6cc; overflow: hidden; }
.c3-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.c3-carica { position: absolute; left: 0; right: 0; top: 40%; margin: 0; text-align: center; color: #3a3026; }
.mb-c3::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 55%, transparent 60%, rgba(8, 6, 4, .45)), linear-gradient(180deg, rgba(8, 6, 4, .55), transparent 15%); }
.c3-strato { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.c3-et { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; }
.c3-et b { position: absolute; left: -13px; top: -13px; min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center; border-radius: 13px; font: 800 13px/1 var(--f-titolo); color: #fff6e2; background: radial-gradient(circle at 50% 30%, #3a3026, #120e0b); box-shadow: 0 0 0 1.5px #e8cf94, 0 0 0 3px #0b0a09, 0 3px 6px rgba(0, 0, 0, .6); transition: transform .15s; }
.c3-et b i { position: absolute; right: -14px; top: -10px; font-style: normal; font-size: 13px; animation: martello 1s ease-in-out infinite; filter: drop-shadow(0 1px 1px #000); }
.c3-et.lavori b { background: radial-gradient(circle at 50% 30%, #7a4a1c, #2a160a); }
.c3-et.vuoto b { font: 400 18px/1 var(--f-testo); background: rgba(20, 15, 10, .5); box-shadow: inset 0 0 0 1.5px rgba(255, 246, 226, .75); opacity: .75; }
.c3-et span { position: absolute; left: 0; bottom: 18px; transform: translateX(-50%); padding: 4px 10px; white-space: nowrap; font: 700 12px/1 var(--f-titolo); letter-spacing: .1em; text-transform: uppercase; color: var(--oro-chiaro); background: rgba(10, 8, 6, .92); border: 1px solid rgba(232, 207, 148, .45); opacity: 0; pointer-events: none; transition: opacity .15s; }
.c3-et:hover span, .c3-et.su span { opacity: 1; }
.c3-et:hover b, .c3-et.su b { transform: scale(1.15); }
.c3-et.vuoto:hover b, .c3-et.vuoto.su b { opacity: 1; background: rgba(160, 40, 30, .8); }

/* ================================================================ rifinitura: icone, barra risorse, code, pannelli */
.mb-ic { width: 22px; height: 22px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .6)); user-select: none; }
.mb-testa { align-items: center; padding: 8px 16px 26px; background: linear-gradient(180deg, rgba(10, 8, 6, .97) 0%, rgba(10, 8, 6, .9) 58%, rgba(10, 8, 6, 0)); }
.mb-risorse { gap: 6px; }
.mb-ris { gap: 8px; min-width: 132px; padding: 6px 12px 8px 6px; border-radius: 10px; background: linear-gradient(180deg, rgba(36, 30, 24, .95), rgba(18, 15, 12, .95)); border: 1px solid rgba(232, 207, 148, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .35); cursor: help; transition: border-color .2s, transform .2s; }
.mb-ris:hover { border-color: rgba(232, 207, 148, .5); transform: translateY(-1px); }
.mb-ris > .mb-ic { width: 36px; height: 36px; margin: -6px -2px -6px -4px; }
.mb-ris-v { display: grid; line-height: 1.05; min-width: 0; }
.mb-ris-v em { font: 800 16px/1 var(--f-testo); font-style: normal; color: #fff6e2; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.mb-ris-v small { font-size: 10px; color: var(--testo-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mb-ris u { position: absolute; right: 8px; top: 5px; text-decoration: none; font: 700 10px/1 var(--f-testo); color: #9fd47a; font-variant-numeric: tabular-nums; }
.mb-ris i { left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; filter: none; }
.mb-ris i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width .5s; }
.mb-ris.legno { --c1: #5d8f3c; --c2: #9fd47a; } .mb-ris.pietra { --c1: #7d8288; --c2: #c9cdd2; } .mb-ris.ferro { --c1: #8a4626; --c2: #e0915e; } .mb-ris.riso { --c1: #a8862c; --c2: #f0d77a; }
.mb-ris.pieno i::after { background: linear-gradient(90deg, #c06a1a, #ffbe5c); animation: pulsa 1.2s ease-in-out infinite; }
.mb-ris.pieno em { color: #ffd38a; }
.mb-ris.fame { border-color: rgba(217, 80, 60, .7); } .mb-ris.fame u { color: #ff8a73; }
.mb-ris-pop { min-width: 0; padding-right: 14px; cursor: default; }
.mb-ris-pop .mb-ris-v em { font-size: 14px; }

/* costi con icone */
.mb-costo { gap: 6px; }
.mb-costo span { gap: 6px; padding: 4px 10px 4px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06); font: 700 13px/1 var(--f-testo); }
.mb-costo span .mb-ic { width: 22px; height: 22px; }
.mb-costo .manca { color: #ffb4a3; background: rgba(170, 45, 30, .22); border-color: rgba(217, 80, 60, .45); }

/* pannello laterale */
.mb-lato.inchiostro { padding: 6px 8px 10px; }
.mb-lato h3 { display: flex; align-items: center; gap: 8px; }
.mb-lato h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 164, 90, .45), transparent); }
.mb-coda li.mb-q { display: grid; gap: 6px; padding: 8px 10px 9px; border-left: 0; border-radius: 8px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .05); }
.mb-q > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mb-q > div b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-q .mb-mini { width: 26px; height: 32px; }
.mb-q .mb-mini i { font-size: 8.5px; }
.mb-prog { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mb-prog::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: linear-gradient(90deg, #8e6a2a, #f3d38a); box-shadow: 0 0 8px rgba(243, 211, 138, .5); transition: width .5s linear; }
.mb-marce li { border-radius: 8px; }
.mb-truppe .mb-mini { border-radius: 6px; }

/* finestre e pulsanti */
.mb-finestra .scelte button, .mb-tipi button, .mb-velocita-scelte button, .mb-quanti button { border-radius: 8px; transition: filter .15s, transform .15s, background .15s; }
.mb-finestra .scelte button:not(:disabled):hover, .mb-quanti button:not(:disabled):hover { transform: translateY(-1px); }
.mb-finestra .scelte button.primario, .mb-quanti button.primario, .mb-primario { border-radius: 8px; box-shadow: 0 4px 14px rgba(142, 42, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .18); }
.mb-quanti input, .mb-campo-testo input, .mb-invia input, #mb-form input { border-radius: 8px; }
.mb-voce, .mb-truppa { border-radius: 12px; }
.mb-durata { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.mb-motivo { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: rgba(170, 45, 30, .14); border: 1px solid rgba(217, 80, 60, .28); }
.mb-motivo::before { content: "!"; flex: none; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #b8402c; color: #fff; font: 800 11px/1 var(--f-testo); }
.mb-effetto { border-radius: 0 8px 8px 0; }
.mb-avviso { border-radius: 10px; }
.mb-schede button { border-radius: 10px; }
.mb-schede button:hover { background: rgba(255, 255, 255, .05); }
.c3-et.dietro { opacity: .22; } .c3-et.dietro:hover { opacity: 1; }
.c3-et { transition: opacity .25s; }
.mb-finestra { top: calc(50% + 34px); max-height: calc(100vh - 120px); }
.mb-finestra .scelte button:disabled { background: #221d18; border-color: rgba(255, 255, 255, .12); color: var(--testo-2); box-shadow: none; }
@media (max-width: 760px) { .mb-finestra { top: 50%; max-height: calc(100vh - 150px); } }

/* strumenti di costruzione (vista Castello) */
.c3-strumenti { position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, rgba(30, 25, 20, .94), rgba(12, 10, 8, .94)); border: 1px solid rgba(232, 207, 148, .3); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.c3-strumenti button { display: grid; justify-items: center; gap: 3px; min-width: 76px; padding: 7px 10px 6px; border: 1px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, .04); color: var(--testo-2); cursor: pointer; font: 700 10px/1 var(--f-testo); letter-spacing: .12em; text-transform: uppercase; transition: background .15s, color .15s, transform .15s; }
.c3-strumenti button b { font: 400 22px/1 var(--f-pennello); color: var(--testo); }
.c3-strumenti button:hover { background: rgba(232, 207, 148, .1); color: var(--oro-chiaro); transform: translateY(-2px); }
.c3-strumenti button.su { background: linear-gradient(180deg, #8e2a1e, #5b170f); border-color: #e8b98a; color: #fff3df; }
.c3-strumenti button.su b { color: #fff3df; }
.c3-aiuto { position: absolute; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(10, 8, 6, .9); border: 1px solid rgba(232, 207, 148, .35); color: var(--testo); font-size: 13px; white-space: nowrap; }
.c3-aiuto b { color: var(--oro-chiaro); }
.c3-aiuto kbd { padding: 1px 6px; border-radius: 4px; background: #2a241c; border: 1px solid rgba(255, 255, 255, .2); font: 700 11px/1.4 var(--f-testo); }
@media (max-width: 760px) { .c3-strumenti { bottom: 84px; } .c3-strumenti button { min-width: 0; padding: 6px 8px; } .c3-strumenti button span { display: none; } .c3-aiuto { bottom: 150px; white-space: normal; width: calc(100vw - 32px); text-align: center; } }
.c3-et.campo { opacity: 0; transition: opacity .2s; } .c3-et.campo.su { opacity: 1; }

/* etichette della città: discrete, alla Three Kingdoms */
.c3-et { opacity: 0; transition: opacity .2s; }
.c3-et.su, .c3-et.lavori, .c3-strato.livelli .c3-et:not(.campo) { opacity: 1; }
.c3-et.lavori:not(.su) span { opacity: 0; }
.c3-strato.livelli .c3-et b { transform: scale(.88); }
.c3-et span { bottom: 20px; padding: 6px 14px 6px; font-size: 13px; background: linear-gradient(180deg, rgba(26, 21, 16, .96), rgba(10, 8, 6, .96)); border-color: rgba(232, 207, 148, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.c3-sep { width: 1px; margin: 4px 2px; background: rgba(232, 207, 148, .25); }
/* gradazione e vignetta cinematografica */
.mb-c3::after { background: radial-gradient(120% 95% at 50% 52%, transparent 58%, rgba(28, 18, 8, .5)), linear-gradient(180deg, rgba(8, 6, 4, .5), transparent 14%), linear-gradient(180deg, rgba(255, 214, 150, .06), rgba(120, 80, 40, .08)); mix-blend-mode: normal; }

/* caricamento della città 3D */
.c3-caricamento { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; background: radial-gradient(circle at 50% 45%, #2a2219, #0c0a08); color: var(--oro-chiaro); transition: opacity .8s; }
.c3-caricamento b { font: 400 64px/1 var(--f-pennello); color: #fff3c4; text-shadow: 0 0 30px rgba(243, 211, 138, .35); }
.c3-caricamento span { font: 700 12px/1 var(--f-testo); letter-spacing: .3em; text-transform: uppercase; }
.c3-caricamento i { width: 220px; height: 3px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.c3-caricamento s { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8e6a2a, #f3d38a); transition: width .3s; }
.c3-caricamento.via { opacity: 0; pointer-events: none; }
.mb-c3::after { background: none; }

/* vista Campi: territorio dall'alto, etichette dei campi sempre visibili, niente strumenti di costruzione */
.modo-campi .c3-strumenti, .modo-campi .c3-aiuto { display: none; }
.c3-strato.campi .c3-et { opacity: 0; pointer-events: none; }
.c3-strato.campi .c3-et.campo { opacity: 1; pointer-events: auto; }
.c3-strato.campi .c3-et.campo span { opacity: 1; bottom: 18px; font-size: 11px; padding: 4px 9px; }
.c3-strato.campi .c3-et.campo[data-tipo=legno] b { box-shadow: 0 0 0 1.5px #9fd47a, 0 0 0 3px #0b0a09; }
.c3-strato.campi .c3-et.campo[data-tipo=pietra] b { box-shadow: 0 0 0 1.5px #c9cdd2, 0 0 0 3px #0b0a09; }
.c3-strato.campi .c3-et.campo[data-tipo=ferro] b { box-shadow: 0 0 0 1.5px #e0915e, 0 0 0 3px #0b0a09; }
.c3-strato.campi .c3-et.campo[data-tipo=riso] b { box-shadow: 0 0 0 1.5px #f0d77a, 0 0 0 3px #0b0a09; }
.mb-campi.inchiostro { position: absolute; z-index: 3; left: 22px; top: 104px; width: 300px; padding: 4px 8px 8px; }
.mb-campi h3 { margin: 4px 0 8px; font: 700 11px/1 var(--f-testo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.mb-campi-riga { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); margin-bottom: 6px; }
.mb-campi-riga > .mb-ic { width: 40px; height: 40px; }
.mb-campi-riga b { font: 700 14px/1.1 var(--f-titolo); color: var(--oro-chiaro); }
.mb-campi-riga small { display: block; font-size: 11px; color: #a8d088; margin: 2px 0 6px; }
.mb-campi-liv { display: flex; flex-wrap: wrap; gap: 4px; }
.mb-campi-liv button { min-width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(232, 207, 148, .35); background: #1c1814; color: #fff6e2; font: 800 13px/1 var(--f-titolo); cursor: pointer; transition: transform .15s, background .15s; }
.mb-campi-liv button:hover { transform: translateY(-2px); background: #3a2e20; }
.mb-campi-liv button.lavori { background: radial-gradient(circle at 50% 30%, #7a4a1c, #2a160a); border-color: #e8b98a; }
.mb-campi-nota { margin: 6px 2px 0; font-size: 11px; color: var(--testo-2); }
@media (max-width: 760px) { .mb-campi.inchiostro { left: 12px; right: 12px; top: auto; bottom: 74px; width: auto; max-height: 34vh; overflow-y: auto; } }

/* villaggio in fiamme */
.mb-fuoco { position: fixed; z-index: 31; left: 50%; top: 104px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(90, 22, 8, .95), rgba(40, 10, 4, .95)); border: 1px solid #ff7a3a; box-shadow: 0 0 24px rgba(255, 100, 30, .45); color: #ffe7d2; animation: bagliore 1.6s ease-in-out infinite; }
.mb-fuoco b { font: 400 30px/1 var(--f-pennello); color: #ffb35a; text-shadow: 0 0 14px #ff6a1a; }
.mb-fuoco strong { display: block; font: 800 14px/1.2 var(--f-titolo); letter-spacing: .04em; }
.mb-fuoco small { font-size: 11.5px; color: #ffc9a8; }
@keyframes bagliore { 50% { box-shadow: 0 0 36px rgba(255, 120, 40, .7); } }
.segno.brucia .citta > img, .segno.brucia > img { filter: sepia(.6) saturate(1.6) brightness(.7); }
.mb-fiamme { position: absolute; left: 50%; bottom: 28px; width: 46px; height: 46px; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.mb-fiamme s { position: absolute; bottom: 0; width: 18px; height: 34px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 80%, #fff6c8, #ffb02e 35%, #e8481a 65%, transparent 72%); filter: blur(.5px); animation: fiamma .7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.mb-fiamme s:nth-child(1) { left: 2px; animation-delay: -.2s; height: 26px; } .mb-fiamme s:nth-child(2) { left: 14px; height: 38px; } .mb-fiamme s:nth-child(3) { left: 26px; animation-delay: -.4s; height: 28px; }
@keyframes fiamma { from { transform: scaleY(.85) skewX(-6deg); opacity: .85; } to { transform: scaleY(1.15) skewX(6deg); opacity: 1; } }

/* ================================================================ pergamena (stile Manor Lords): carta invecchiata, inchiostro bruno, testate color ruggine */
:root { --f-carta: "IM Fell English SC", "Shippori Mincho", Georgia, serif; --f-carta-testo: "Alegreya", "IM Fell English", Georgia, serif; --carta-ruggine: #7b4330; --carta-scuro: #2a201a; }
.mb-finestra, .mb-campi, .mb-lato {
  --testo: #2c2118; --testo-2: #6a5541; --oro: #7b4330; --oro-chiaro: #2c1a10; --inchiostro: #e4d4b2;
  color: var(--testo); font-family: var(--f-carta-testo); font-size: 14px;
}
.mb-finestra::before, .mb-campi::before, .mb-lato::before {
  background: url(assets/carte/pergamena.webp) center / 380px, #e4d4b2;
  box-shadow: inset 0 0 0 2px rgba(60, 40, 25, .55), inset 0 0 0 5px rgba(228, 212, 178, .9), inset 0 0 0 6px rgba(60, 40, 25, .35), inset 0 0 70px rgba(110, 72, 36, .35), 0 14px 40px rgba(0, 0, 0, .55);
}
.mb-finestra .esito h2, .mb-scheda h2, .mb-finestra h2 { font: 400 32px/1.05 var(--f-carta); letter-spacing: .02em; color: var(--oro-chiaro); }
.mb-finestra .esito small, .mb-scheda small { font: italic 400 13px/1.2 "IM Fell English", serif; letter-spacing: .04em; text-transform: none; color: var(--testo-2); }
/* intestazioni di sezione: maiuscoletto bruno con filetto sotto */
.mb-finestra h3, .mb-campi h3 { font: 400 17px/1.1 var(--f-carta); letter-spacing: .03em; text-transform: none; color: #3b2a1d; padding-bottom: 4px; border-bottom: 1px solid rgba(60, 40, 25, .45); box-shadow: 0 1px 0 rgba(255, 248, 230, .5); }
.mb-finestra p { color: var(--testo); }
.mb-effetto { background: rgba(123, 67, 48, .08); border-left: 2px solid var(--carta-ruggine); }
.mb-motivo { color: #8e2a1e; font-style: italic; }
.mb-chiudi { color: #5a4532; } .mb-chiudi:hover { color: #8e2a1e; }
.mb-costo span { background: rgba(60, 40, 25, .08); color: #2c2118; border: 1px solid rgba(60, 40, 25, .18); border-radius: 4px; }
.mb-costo .manca { color: #9c2a1a; background: rgba(156, 42, 26, .1); }
/* bottoni: legno scuro con scritta crema, quello principale color ruggine */
.mb-finestra .scelte button, .mb-tipi button, .mb-velocita-scelte button { background: linear-gradient(180deg, #3a2e25, #241c16); border: 1px solid #120d0a; color: #efe2c4; font: 400 15px/1 var(--f-carta); letter-spacing: .04em; text-transform: none; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 2px 4px rgba(0, 0, 0, .3); }
.mb-finestra .scelte button.primario, .mb-primario { background: linear-gradient(180deg, #8a4a33, #5e2c1c); border: 1px solid #2a140c; color: #fbecd0; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 230, 200, .2), 0 2px 6px rgba(0, 0, 0, .35); }
.mb-finestra .scelte button:disabled { background: #b9a888; border-color: rgba(60, 40, 25, .3); color: #6a5541; box-shadow: none; filter: none; opacity: .8; }
.mb-scheda > img { border-radius: 4px; box-shadow: 0 0 0 1px rgba(60, 40, 25, .4), 0 6px 14px rgba(60, 35, 15, .3); filter: none; }
.mb-voce, .mb-truppa { background: rgba(60, 40, 25, .06); border: 1px solid rgba(60, 40, 25, .18); }
.mb-campi-liv button { background: #3a2e25; color: #efe2c4; border: 1px solid #120d0a; }

/* testata a nastro color ruggine (come "Materiali per la creazione") */
.mb-titolo-barra { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 16px; background: linear-gradient(180deg, #8a4f38, #6d3826); border: 1px solid #2a140c; box-shadow: inset 0 0 0 1px rgba(255, 220, 190, .25), 0 3px 8px rgba(60, 30, 15, .35); color: #fbecd0; }
.mb-titolo-barra span { width: 34px; height: 34px; display: grid; place-items: center; background: #efe2c4; color: #6d3826; border: 1px solid #2a140c; font: 700 20px/1 var(--f-titolo); }
.mb-titolo-barra h2 { margin: 0; font: 400 28px/1 var(--f-carta) !important; color: #fbecd0 !important; }
.mb-titolo-barra small { margin-left: auto; font: italic 13px/1 "IM Fell English", serif; color: #f1d7bb; }

/* menu delle costruzioni: carte illustrate a sinistra, dettaglio a destra */
.mb-f-scelta { width: min(1180px, calc(100vw - 32px)); }
.mb-costruzioni { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.mb-carte-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.mb-carte-ed h3 { grid-column: 1 / -1; margin: 6px 0 0; }
.mb-carta-ed { position: relative; padding: 0; border: 1px solid rgba(60, 40, 25, .55); background: #efe3c6; border-radius: 3px; overflow: hidden; cursor: pointer; box-shadow: 0 3px 8px rgba(60, 35, 15, .28); transition: transform .15s, box-shadow .15s; text-align: center; }
.mb-carta-ed img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mb-carta-ed b { display: block; padding: 6px 4px 7px; background: linear-gradient(180deg, #3a2e25, #241c16); color: #efe2c4; font: 400 14px/1.1 var(--f-carta); border-top: 1px solid #120d0a; }
.mb-carta-ed i { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; display: grid; place-items: center; background: rgba(239, 226, 198, .92); border: 1px solid rgba(60, 40, 25, .6); color: #6d3826; font: 700 14px/1 var(--f-titolo); font-style: normal; }
.mb-carta-ed:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(60, 35, 15, .35); }
.mb-carta-ed.su { outline: 3px solid #b5743f; outline-offset: -1px; }
.mb-carta-ed.su b { background: linear-gradient(180deg, #8a4f38, #6d3826); }
.mb-carta-ed.povero img { filter: sepia(.25) saturate(.8); }
.mb-carta-ed.bloccato img { filter: grayscale(1) brightness(.85) contrast(.9); }
.mb-carta-ed.bloccato b { color: #a99a82; }
.mb-det { position: sticky; top: 0; padding: 12px 14px; border: 1px solid rgba(60, 40, 25, .35); background: rgba(255, 248, 230, .35); }
.mb-det-testa { display: flex; align-items: center; gap: 10px; }
.mb-det-testa i { font: 700 26px/1 var(--f-titolo); font-style: normal; color: #6d3826; }
.mb-det-testa h2 { margin: 0; font-size: 26px !important; }
.mb-det > img { width: 100%; margin: 10px 0 4px; border: 1px solid rgba(60, 40, 25, .4); }
@media (max-width: 760px) { .mb-costruzioni { grid-template-columns: 1fr; } .mb-det { position: static; order: -1; } .mb-carte-ed { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ================================================================ barra in basso alla Manor Lords: quadrilobi smaltati su un filetto d'oro */
.c3-strumenti { bottom: 14px; gap: 8px; padding: 10px 14px 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.c3-strumenti::before { content: ""; position: absolute; left: -40vw; right: -40vw; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #c7a978 20%, #e6cfa1 50%, #c7a978 80%, transparent); box-shadow: 0 1px 0 rgba(0, 0, 0, .5); pointer-events: none; }
.c3-strumenti button { position: relative; width: 58px; height: 58px; min-width: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: url(assets/carte/quadrilobo.svg) center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55)); transition: transform .12s, filter .12s; }
.c3-strumenti button b { font: 400 25px/1 var(--f-pennello); color: #efe2c4; text-shadow: 0 1px 0 #000; }
.c3-strumenti button span { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px 7px; background: rgba(28, 20, 16, .94); border: 1px solid #120d0a; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); color: #efe2c4; font: 400 17px/1 var(--f-carta); letter-spacing: .02em; text-transform: none; opacity: 0; pointer-events: none; transition: opacity .12s; }
.c3-strumenti button:hover { background-color: transparent; transform: translateY(-2px); filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .6)) brightness(1.12); }
.c3-strumenti button:hover span { opacity: 1; }
.c3-strumenti button.su { background-color: transparent; border-color: transparent; filter: drop-shadow(0 0 8px rgba(240, 200, 120, .8)) brightness(1.2); }
.c3-strumenti button.su b { color: #ffd98a; }
.c3-sep { width: 1px; margin: 10px 4px; background: rgba(230, 207, 161, .45); }
/* riga dei comandi */
.c3-aiuto { bottom: 96px; padding: 8px 22px; border-radius: 0; border: 0; background: linear-gradient(90deg, transparent, rgba(30, 24, 18, .8) 8%, rgba(30, 24, 18, .8) 92%, transparent); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; white-space: nowrap; font: 400 17px/1 var(--f-carta-testo); color: #efe2c4; max-width: calc(100vw - 32px); }
.c3-aiuto[hidden] { display: none; }
.c3-cmd { display: inline-flex; align-items: center; gap: 8px; }
.c3-cmd kbd { min-width: 30px; height: 30px; padding: 0 7px; display: inline-grid; place-items: center; background: rgba(239, 226, 196, .14); border: 1px solid rgba(239, 226, 196, .25); border-radius: 2px; font: 400 17px/1 var(--f-carta); color: #efe2c4; }
.c3-cmd em { font-style: normal; } .c3-cmd em.rosso { color: #ec6a58; } .c3-cmd em.costo { color: #d9c08c; font-style: italic; }
.c3-rombo { width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, #e6cfa1, #8c7350); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.c3-mouse { width: 12px; height: 17px; border: 1.5px solid #efe2c4; border-radius: 6px; position: relative; display: block; }
.c3-mouse::after { content: ""; position: absolute; top: 0; width: 50%; height: 45%; background: #efe2c4; }
.c3-mouse.sx::after { left: 0; border-radius: 5px 0 0 0; } .c3-mouse.dx::after { right: 0; border-radius: 0 5px 0 0; }
@media (max-width: 760px) { .c3-strumenti button { width: 46px; height: 46px; } .c3-strumenti button b { font-size: 20px; } .c3-aiuto { bottom: 150px; white-space: normal; } }

/* ================================================================ pannello esercito: carte esagonali allungate con + */
.mb-esercito { position: absolute; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 0 18px 12px; background: rgba(28, 22, 17, .72); border: 1px solid rgba(230, 207, 161, .25); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: blur(3px); }
.mb-esercito[hidden] { display: none; }
.mb-es-testa { margin: 0 -18px 14px; padding: 8px 40px 8px 18px; background: linear-gradient(90deg, rgba(18, 12, 9, .95), rgba(18, 12, 9, .6)); color: #efe2c4; font: 400 20px/1 var(--f-carta); position: relative; }
.mb-es-chiudi { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #c9b38a; font-size: 15px; cursor: pointer; }
.mb-es-carte { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.mb-es-carta { position: relative; flex: 0 0 auto; width: 96px; height: 150px; padding: 3px; background: #d9c39a; clip-path: polygon(50% 0, 100% 9%, 100% 91%, 50% 100%, 0 91%, 0 9%); transition: transform .12s, background .12s; }
.mb-es-carta:hover { transform: translateY(-3px); background: #f0dcae; }
.mb-es-tela { width: 100%; height: 100%; display: grid; place-items: end center; overflow: hidden; clip-path: polygon(50% 0, 100% 9%, 100% 91%, 50% 100%, 0 91%, 0 9%); background: repeating-linear-gradient(45deg, rgba(120, 90, 50, .08) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 40%, #f3e6c7, #d7c299); }
.mb-es-tela img { width: 130%; margin-bottom: 4px; }
.mb-es-kanji { font: 400 52px/1 var(--f-pennello); color: #6d3826; align-self: center; }
.mb-es-carta.bloccata .mb-es-tela { filter: grayscale(1) brightness(.8); }
.mb-es-carta.povera .mb-es-tela { filter: sepia(.4) brightness(.92); }
.mb-es-n { position: absolute; top: 16px; right: 8px; padding: 2px 6px; background: rgba(28, 20, 16, .85); color: #efe2c4; font: 700 12px/1.2 var(--f-carta-testo); }
.mb-es-n small { color: #9fd17a; margin-left: 3px; }
.mb-es-carta button { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 32px; height: 32px; border: 2px solid #f0e2c0; border-radius: 6px; background: linear-gradient(180deg, #b38f63, #8a6a44); color: #fff7e6; font: 700 17px/1 sans-serif; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.mb-es-carta button:disabled { background: #8f8676; cursor: not-allowed; opacity: .75; }
.mb-es-carta button:not(:disabled):hover { filter: brightness(1.15); }
.mb-es-tip { position: absolute; left: 18px; bottom: calc(100% + 8px); margin: 0; padding: 8px 14px; max-width: 640px; background: rgba(22, 15, 11, .95); border: 1px solid #120d0a; color: #efe2c4; font: 400 16px/1.3 var(--f-carta-testo); }
.mb-es-vuoto { margin: 0; color: #efe2c4; font: italic 16px/1.4 var(--f-carta-testo); }
.modo-campi .mb-esercito { display: none; }

/* finestra dello stendardo: anteprima a sinistra, scelte a destra */
.mb-f-stendardo { width: min(720px, calc(100vw - 32px)); }
.mb-st { display: grid; grid-template-columns: 140px 1fr; gap: 22px; align-items: start; }
.mb-st > canvas { width: 128px; height: 384px; box-shadow: 0 0 0 1px rgba(60, 40, 25, .5), 0 8px 18px rgba(60, 35, 15, .35); }
.mb-st-scelte h3:first-child { margin-top: 0; }
.mb-st-tinte { display: flex; gap: 8px; flex-wrap: wrap; }
.mb-st-tinte button { width: 34px; height: 34px; padding: 0; border: 2px solid #efe2c4; outline: 1px solid rgba(60, 40, 25, .6); background: var(--c); cursor: pointer; }
.mb-st-tinte button.su { outline: 3px solid #b5743f; }
.mb-st-mon, .mb-st-kanji { display: flex; gap: 6px; flex-wrap: wrap; }
.mb-st-mon button { display: grid; justify-items: center; gap: 2px; padding: 4px 4px 3px; background: rgba(60, 40, 25, .06); border: 1px solid rgba(60, 40, 25, .25); cursor: pointer; font: 400 12px/1 var(--f-carta-testo); color: var(--testo); }
.mb-st-mon canvas { width: 40px; height: 40px; }
.mb-st-kanji button { width: 38px; height: 38px; padding: 0; border: 1px solid rgba(60, 40, 25, .4); cursor: pointer; font: 700 20px/1 var(--f-titolo); }
.mb-st-mon button.su, .mb-st-kanji button.su { outline: 3px solid #b5743f; outline-offset: -1px; }
@media (max-width: 600px) { .mb-st { grid-template-columns: 1fr; } .mb-st > canvas { justify-self: center; width: 96px; height: 288px; } }

/* ================================================================ segnalini nella scena alla Manor Lords: disco scuro con anello chiaro, targhetta nera con scritta oro */
.c3-et b { min-width: 30px; height: 30px; left: -15px; top: -15px; border-radius: 15px; background: radial-gradient(circle at 50% 35%, #3a3632, #141210); box-shadow: 0 0 0 2px #e9e2d2, 0 0 0 3.5px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .5); font: 400 15px/1 var(--f-carta); color: #f4ead2; }
.c3-et.lavori b { background: radial-gradient(circle at 50% 35%, #6a4a2a, #24160b); box-shadow: 0 0 0 2px #e8c27a, 0 0 0 3.5px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .5); }
.c3-et span, .c3-strato.campi .c3-et.campo span { left: 22px; bottom: auto; top: -2px; transform: none; padding: 6px 12px 7px; border: 1px solid #0b0806; border-radius: 0; background: rgba(22, 16, 12, .93); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); font: 400 16px/1 var(--f-carta-testo); letter-spacing: 0; text-transform: none; color: #f1cf7a; }
.c3-strato.campi .c3-et.campo span { font-size: 14px; padding: 5px 10px 6px; }
.c3-strato.campi .c3-et.campo b { box-shadow: 0 0 0 2px #e9e2d2, 0 0 0 3.5px rgba(0, 0, 0, .7), 0 3px 6px rgba(0, 0, 0, .5) !important; }
.c3-et span small, .c3-et span em { color: #e8dcc0; font-style: normal; }

/* ================================================================ mappa a pergamena: nomi delle regioni a stampa antica */
.mb-regioni { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; transition: opacity .3s; }
.mb-regione { position: absolute; left: 0; top: 0; white-space: nowrap; font: 400 calc(30px * var(--f)) / 1 "IM Fell English SC", Georgia, serif; letter-spacing: .32em; color: #2a1d14; text-shadow: 0 0 6px rgba(235, 222, 196, .9), 0 0 2px rgba(235, 222, 196, .9); transform-origin: 50% 50%; }
.mb-mappa.carta .segno .targa, .mb-mappa.carta .segno .citta { filter: sepia(.35) saturate(.85); }

:root { color-scheme: dark; }
.mb-mappa.carta .mb-segno-libero { opacity: .3; }
.mb-mappa.carta .mb-segno-libero:hover { opacity: 1; }

/* ================================================================ barra in alto alla Manor Lords: striscia scura con filetto d'oro, risorse in fila separate da trattini */
.mb-testa { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto auto; gap: 0 14px; align-items: center; height: 54px; padding: 0 12px 0 16px; background: linear-gradient(180deg, #1d1712 0%, #120e0b 100%); border-bottom: 2px solid #b39467; box-shadow: 0 1px 0 #2a1f16, 0 6px 18px rgba(0, 0, 0, .55); }
.mb-testa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: linear-gradient(90deg, transparent, rgba(179, 148, 103, .35) 15%, rgba(179, 148, 103, .35) 85%, transparent); pointer-events: none; }
.mb-villaggio { max-width: none; overflow: hidden; }
.mb-villaggio .mb-v-nome, .mb-villaggio b { font: 400 21px/1.05 var(--f-carta); color: #f1dfb6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.mb-villaggio small { font: italic 400 12.5px/1.2 "IM Fell English", serif; letter-spacing: 0; text-transform: none; color: #b9a684; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mb-risorse { gap: 0; justify-content: center; overflow: hidden; }
.mb-ris { min-width: 0; padding: 4px 14px 6px 10px; gap: 7px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mb-ris + .mb-ris::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, transparent, rgba(179, 148, 103, .55), transparent); }
.mb-ris:hover { transform: none; background: rgba(255, 240, 210, .05); }
.mb-ris > .mb-ic { width: 30px; height: 30px; margin: 0; filter: drop-shadow(0 1px 1px #000); }
.mb-ris-v em { font: 700 16px/1 var(--f-carta-testo); color: #f4e7c8; }
.mb-ris-v small { font: 400 10.5px/1 var(--f-carta-testo); color: #9e8c6c; }
.mb-ris u { position: static; order: 3; font: 700 11px/1 var(--f-carta-testo); color: #a7cf7f; align-self: flex-start; margin-top: 3px; }
.mb-ris i { left: 10px; right: 14px; bottom: 3px; height: 2px; background: rgba(255, 255, 255, .07); }
.mb-ris-pop { padding-right: 10px; }

.mb-schede { gap: 0; }
.mb-schede button { min-width: 64px; padding: 5px 8px 4px; border-radius: 0; color: #b9a684; font: 400 13px/1 var(--f-carta); letter-spacing: .02em; text-transform: none; }
.mb-schede button b { font-size: 19px; color: #e9d9b4; }
.mb-schede button:hover { background: rgba(255, 240, 210, .06); }
.mb-schede button.su { color: #f1cf7a; background: linear-gradient(180deg, rgba(179, 148, 103, .0), rgba(179, 148, 103, .18)); }
.mb-schede button.su::after { left: 10%; right: 10%; bottom: -9px; height: 3px; background: #e2c47f; box-shadow: 0 0 8px rgba(226, 196, 127, .7); }
.mb-io { gap: 8px; }

/* pannelli laterali: pergamena compatta sotto la barra */
.mb-lato.inchiostro { top: 74px; }
.mb-lato h3, .mb-campi h3 { font: 400 16px/1.1 var(--f-carta); letter-spacing: .02em; text-transform: none; color: #3b2a1d; }
.mb-lato h3::after { background: linear-gradient(90deg, rgba(60, 40, 25, .45), transparent); }
.mb-campi { top: 74px; }
.mb-campi-riga small { color: #4d7a2e; }
.mb-campi-liv button { border-radius: 3px; font: 400 14px/1 var(--f-carta); }

@media (max-width: 1250px) { .mb-ris-v small { display: none; } .mb-ris { padding: 4px 10px 6px 8px; } .mb-schede button { min-width: 52px; font-size: 11.5px; } .mb-testa { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto auto; } }
@media (max-width: 760px) { .mb-testa { height: auto; grid-template-columns: 1fr auto; padding: 6px 10px; row-gap: 4px; } .mb-risorse { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; } .mb-schede { grid-column: 1 / -1; order: 4; overflow-x: auto; } }
.mb-testa .mb-ris u { position: absolute; left: 47px; right: auto; top: auto; bottom: 7px; margin: 0; font-size: 10.5px; }
.mb-testa .mb-ris-v small { visibility: hidden; }
.mb-testa .mb-ris-pop .mb-ris-v small { visibility: visible; }
/* numeri moderni e allineati ovunque (i caratteri antichi hanno cifre medievali: 1 sembra I) */
.mb-testa, .mb-finestra, .mb-campi, .mb-lato, .c3-et, .mb-esercito, .c3-aiuto { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.mb-campi-liv button, .c3-et b, .mb-es-n { font-family: var(--f-carta-testo); font-weight: 700; }
/* da lontano solo i dischi con il livello; la targhetta compare al passaggio del mouse */
.c3-strato.lontano .c3-et span, .c3-strato.campi.lontano .c3-et.campo span { opacity: 0; }
.c3-strato.lontano .c3-et:hover span, .c3-strato.lontano .c3-et.su span { opacity: 1; z-index: 5; }
@media (max-width: 1420px) { .mb-testa .mb-ris { padding: 4px 9px 6px 7px; gap: 5px; } .mb-testa .mb-ris > .mb-ic { width: 26px; height: 26px; } .mb-testa .mb-ris u { left: 38px; } .mb-testa .mb-ris-v em { font-size: 15px; } .mb-schede button { min-width: 54px; padding: 5px 5px 4px; } }

/* ================================================================ pagine (raduno, rapporti, classifica) su pergamena, sopra un tavolo di legno scuro */
section.mb-carta { background: radial-gradient(ellipse at 50% 30%, #2a2018, #110c09 75%); }
.mb-pagina { --testo: #2c2118; --testo-2: #6a5541; --oro: #7b4330; --oro-chiaro: #2c1a10; --inchiostro: #e4d4b2; color: var(--testo); font-family: var(--f-carta-testo); font-size: 14.5px; font-variant-numeric: lining-nums tabular-nums; }
.mb-pagina.inchiostro { margin-top: 84px; }
.mb-pagina::before { background: url(assets/carte/pergamena.webp) center / 380px, #e4d4b2; box-shadow: inset 0 0 0 2px rgba(60, 40, 25, .55), inset 0 0 70px rgba(110, 72, 36, .35), 0 14px 40px rgba(0, 0, 0, .6); }
.mb-pagina .esito small { font: italic 400 14px/1.2 "IM Fell English", serif; letter-spacing: .04em; text-transform: none; }
.mb-pagina .esito h2 { font: 400 42px/1 var(--f-carta); letter-spacing: .02em; text-transform: none; }
.mb-pagina h3 { font: 400 18px/1.1 var(--f-carta); letter-spacing: .02em; text-transform: none; color: #3b2a1d; padding-bottom: 4px; border-bottom: 1px solid rgba(60, 40, 25, .45); }
.mb-pagina a { color: #7b4330; }
.mb-classifica th { font: 400 15px/1 var(--f-carta); color: #3b2a1d; border-bottom: 1px solid rgba(60, 40, 25, .5); }
.mb-classifica td { border-bottom: 1px solid rgba(60, 40, 25, .15); color: #2c2118; }
.mb-classifica tr.io td { background: rgba(123, 67, 48, .12); }
.mb-pagina button { font-family: var(--f-carta); }
.mb-rapporti li, .mb-rapporti button, .mb-marce > *, .mb-coda > * { color: #2c2118; }
.mb-rapporti li { background: rgba(60, 40, 25, .06); border-left-color: rgba(60, 40, 25, .3); }
.mb-rapporti li:hover { background: rgba(123, 67, 48, .12); }
.mb-rapporti li.nuovo { border-left-color: #8e2a1e; } .mb-rapporti li.nuovo span { color: #2c1a10; }
.mb-rapporti li b { color: #f4e7c8; background: #3a2e25; }
.mb-pagina input, .mb-finestra input, .mb-pagina select, .mb-finestra select { background: #f3e7cb; color: #2c2118; border: 1px solid rgba(60, 40, 25, .5); border-radius: 2px; font: 400 15px/1.2 var(--f-carta-testo); }
.mb-tab-truppe td:first-child { color: #6a5541; } .mb-tab-truppe .morti { color: #9c2a1a; }

/* ================================================================ accesso: titolo a stampa antica e modulo su pergamena */
.mb-logo small { font: italic 400 15px/1 "IM Fell English", serif; letter-spacing: .3em; text-transform: none; color: #e2c47f; }
.mb-logo h1 { font: 400 clamp(38px, 6.4vw, 70px)/1 var(--f-carta); letter-spacing: .02em; color: #f4e7c8; }
.mb-logo p { font: 400 16px/1.55 var(--f-carta-testo); color: #efe2c4; }
.mb-modulo { --testo: #2c2118; --testo-2: #6a5541; --oro: #7b4330; --oro-chiaro: #2c1a10; color: #2c2118; font-family: var(--f-carta-testo); }
.mb-modulo::before { background: url(assets/carte/pergamena.webp) center / 380px, #e4d4b2 !important; box-shadow: inset 0 0 0 2px rgba(60, 40, 25, .55), inset 0 0 70px rgba(110, 72, 36, .35), 0 14px 40px rgba(0, 0, 0, .6); }
.mb-modulo .mb-tipi button { font: 400 18px/1 var(--f-carta) !important; letter-spacing: .02em !important; text-transform: none !important; color: #6a5541 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.mb-modulo .mb-tipi button.su { color: #2c1a10 !important; box-shadow: inset 0 -2px 0 #8a4a33 !important; }
.mb-modulo label, .mb-modulo label > span, .mb-modulo small { font: 400 15px/1.2 var(--f-carta) !important; letter-spacing: .02em !important; text-transform: none !important; color: #3b2a1d !important; }
.mb-modulo input { background: #f6ecd4 !important; color: #2c2118 !important; border: 1px solid rgba(60, 40, 25, .5) !important; border-radius: 2px !important; font: 400 17px/1.2 var(--f-carta-testo) !important; }
.mb-modulo button.primario, .mb-modulo .mb-primario { font: 400 18px/1 var(--f-carta) !important; letter-spacing: .03em !important; text-transform: none !important; background: linear-gradient(180deg, #8a4a33, #5e2c1c) !important; border: 1px solid #2a140c !important; border-radius: 3px !important; color: #fbecd0 !important; }
.mb-accesso-corpo > a, .mb-accesso a { font: italic 400 16px/1 "IM Fell English", serif; color: #e2c47f; }
.mb-modulo .mb-tab button { font: 400 20px/1 var(--f-carta) !important; letter-spacing: .02em !important; text-transform: none !important; color: #7a6650 !important; }
.mb-modulo .mb-tab button.su { color: #2c1a10 !important; }
.mb-modulo .mb-tab button.su::after, .mb-modulo .mb-tab button.su { border-color: #8a4a33 !important; }

/* ================================================================ battaglia nello stesso stile: testata scura con filetto d'oro, barra dei reparti su legno */
.bt-testa { top: 0; border-radius: 0; padding: 8px 22px 10px; background: linear-gradient(180deg, #1d1712, #120e0b); border: 0; border-bottom: 2px solid #b39467; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.bt-lato b { font: 400 19px/1.1 var(--f-carta); letter-spacing: .02em; text-transform: none; }
.bt-lato small, .bt-bilancia span { font: italic 400 13px/1.1 "IM Fell English", serif; letter-spacing: .03em; text-transform: none; color: #b9a684; }
.bt-bilancia i { height: 8px; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(179, 148, 103, .6); }
.bt-pulsanti button, .bt-comandi button { background: linear-gradient(180deg, #3a2e25, #241c16); border: 1px solid #0d0907; border-radius: 3px; color: #efe2c4; font: 400 15px/1 var(--f-carta); letter-spacing: .02em; text-transform: none; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12); }
.bt-pulsanti button.primario { background: linear-gradient(180deg, #8a4a33, #5e2c1c); border-color: #2a140c; color: #fbecd0; }
.bt-barra { border-radius: 0; background: rgba(28, 22, 17, .82); border: 1px solid rgba(179, 148, 103, .35); border-top: 2px solid #b39467; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); backdrop-filter: blur(3px); }
.bt-carta.sel { outline-color: #e2c47f; }
.bt-gen-carta figcaption { font: 400 11px/1.1 var(--f-carta); text-transform: none; color: #f1cf7a; }
.bt-avviso { border-radius: 0; background: rgba(22, 15, 11, .94); border: 1px solid #0d0907; border-left: 3px solid #b39467; font: 400 17px/1.3 var(--f-carta-testo); color: #efe2c4; }
.bt-stendardo b { font-family: var(--f-carta-testo); font-weight: 700; }
.bt-testa::before, .bt-barra::before { display: none !important; }
.bt-barra { padding: 12px 16px 10px; }