/* Silk & Steel · stili dell'arte di gioco (carte, miniature, insediamenti, strutture).
   Richiede i font "Yuji Syuku" (kanji a pennello) e "Shippori Mincho" (nomi). */
:root {
  --ss-carta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --ss-pennello: "Yuji Syuku", "Shippori Mincho", serif;
  --ss-titolo: "Shippori Mincho", "Yu Mincho", Georgia, serif;
  --ss-oro: #c9a45a;
}

/* ---------------------------------------------------------------- carta unità */
.ss-carta {
  position: relative; margin: 0; width: var(--w, 120px); aspect-ratio: 5 / 8; overflow: hidden; isolation: isolate;
  background: var(--ss-carta), radial-gradient(120% 80% at 50% 18%, rgba(255,255,255,.18), transparent 60%), linear-gradient(180deg, var(--a), var(--b));
  background-blend-mode: soft-light, normal, normal;
  border: calc(var(--w, 120px) * .03) solid var(--fz); outline: 1px solid #0d0b09; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 190, .35), inset 0 0 calc(var(--w, 120px) * .22) rgba(0, 0, 0, .38), 0 3px 10px rgba(20, 12, 4, .35);
  container-type: inline-size;
}
.ss-carta .ss-k {
  position: absolute; inset: 4% 0 auto; text-align: center; z-index: 0; pointer-events: none;
  font: 400 78cqi/1 var(--ss-pennello); color: rgba(255, 248, 230, .26); mix-blend-mode: screen;
  text-shadow: 0 0 1px rgba(255, 255, 255, .15);
}
.ss-carta img { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); max-width: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
/* figure umane: tagliate sotto le ginocchia, come in Shogun 2 */
.ss-busto img { height: 128%; top: 5%; }
/* creature, navi, branchi: intere, appoggiate in basso */
.ss-intera img { width: 112%; height: 96%; object-fit: contain; object-position: 50% 100%; bottom: 1%; }
.ss-carta .ss-era { position: absolute; z-index: 2; top: 3%; left: 6%; font-size: 7cqi; letter-spacing: .25em; color: rgba(255, 244, 214, .85); text-shadow: 0 1px 2px #000; }
.ss-mitico { border-color: var(--ss-oro); box-shadow: inset 0 0 0 1px var(--fz), inset 0 0 0 calc(var(--w, 120px) * .02) rgba(201,164,90,.0), inset 0 0 calc(var(--w, 120px) * .22) rgba(0,0,0,.38), 0 0 0 1px var(--fz), 0 3px 12px rgba(120, 90, 20, .45); }
.ss-mitico::after { content: ""; position: absolute; inset: 3%; z-index: 3; pointer-events: none; border: 1px solid rgba(232, 200, 120, .7); }
.ss-carta .ss-piede { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 18% 7% 6%; background: linear-gradient(transparent, rgba(0,0,0,.82)); display: grid; gap: 4%; justify-items: end; }
.ss-carta .ss-piede b { font: 700 13cqi/1 var(--ss-titolo); color: #f1e6cc; text-shadow: 0 1px 2px #000; }
.ss-carta .ss-piede i { width: 100%; height: 4cqi; min-height: 3px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; }
.ss-carta .ss-piede i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, #8e1d17, #d0473a); }
.ss-carta .ss-rango { position: absolute; z-index: 5; left: 5%; bottom: 4%; width: 26cqi; height: 26cqi; display: grid; place-items: center; border-radius: 50%; font: 700 15cqi/1 var(--ss-titolo); color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--a) 80%, #fff), var(--b) 70%); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.6); }
.ss-carta figcaption { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 22% 6% 5%; text-align: center; font: 700 9.5cqi/1.15 var(--ss-titolo); color: #f4ead2; text-shadow: 0 1px 3px #000; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---------------------------------------------------------------- miniatura del generale */
.ss-generale { position: relative; margin: 0; width: var(--w, 140px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ss-generale img { width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.ss-ombra { position: absolute; z-index: 0; left: 18%; right: 18%; bottom: 0; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fz) 70%, #000) 0%, transparent 100%); opacity: .75; filter: blur(3px); }
.ss-generale figcaption, .ss-luogo figcaption {
  position: relative; z-index: 2; margin-top: -4%; padding: .28em .9em .32em; display: grid; justify-items: center; gap: .1em;
  font: 700 clamp(10px, calc(var(--w, 140px) * .09), 15px)/1.1 var(--ss-titolo); color: #f4ead2; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fz) 82%, #000), color-mix(in srgb, var(--fz) 55%, #000));
  border: 1px solid rgba(232, 200, 120, .75); box-shadow: 0 2px 6px rgba(0,0,0,.45); clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}
.ss-generale figcaption span { font-weight: 400; font-size: .72em; opacity: .85; }
.ss-forza { display: block; width: 62%; height: 4px; margin-top: 3px; background: rgba(0,0,0,.6); position: relative; z-index: 2; }
.ss-forza::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: linear-gradient(90deg, var(--fz), var(--fzc)); }

/* ---------------------------------------------------------------- insediamenti e avamposti */
.ss-luogo { position: relative; margin: 0; width: var(--w, 170px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ss-luogo img { width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.ss-luogo .ss-ombra { left: 10%; right: 10%; bottom: 8%; height: 16%; }
.ss-luogo figcaption span { font-size: .62em; letter-spacing: .2em; color: var(--ss-oro); }
.ss-avamposto figcaption { font-size: clamp(9px, calc(var(--w, 140px) * .075), 13px); }

/* ---------------------------------------------------------------- tessera della struttura */
.ss-struttura { position: relative; margin: 0; width: var(--w, 110px); display: grid; gap: 6px; justify-items: center; container-type: inline-size; }
.ss-struttura img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: 3px solid #2a1f16; outline: 1px solid var(--ss-oro); outline-offset: -6px; box-shadow: 0 3px 10px rgba(20, 12, 4, .35), inset 0 0 20px rgba(0,0,0,.4); background: #efe6d2; }
.ss-struttura .ss-k { position: absolute; top: 7cqi; right: 7cqi; width: 1.6em; height: 1.6em; display: grid; place-items: center; font: 400 12cqi/1 var(--ss-pennello); color: #f4ead2; background: #8e231d; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ss-struttura .ss-liv { position: absolute; top: 8px; left: 9px; font-size: 10px; letter-spacing: .15em; color: #8e231d; }
.ss-struttura figcaption { font: 700 13px/1.15 var(--ss-titolo); text-align: center; color: inherit; }