/* Componente MODALE condivisa — un'unica finestra per tutte le "aperture":
   cast e PNG (ritratto + profilo), materiali (iframe), area giocatori e GM.
   Stile fisso/autonomo (fondo scuro), coerente ovunque. API in modal.js (window.Modal). */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column;
  background: rgba(8,6,5,.9); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: clamp(.5rem,3vw,2rem);
}
@media (prefers-reduced-motion: no-preference) {
  .modal:not([hidden]) { animation: modal-fade .22s ease; }
  @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
}

.modal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .1rem .7rem; flex: none; }
.modal-title { font-family: "Didot","Bodoni MT",Georgia,serif; font-size: 1.05rem; color: #e6cd82; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-acts { display: flex; gap: .7rem; align-items: center; flex: none; }
.modal-newtab { color: #c9bda0; font-size: .78rem; text-decoration: none; white-space: nowrap; font-family: system-ui,-apple-system,sans-serif; }
.modal-newtab:hover, .modal-newtab:focus-visible { color: #e6cd82; }
.modal-toggle { font-family: system-ui,-apple-system,sans-serif; font-size: .72rem; color: #c9bda0; background: none; border: 1px solid rgba(200,180,120,.4); border-radius: 6px; padding: .35rem .7rem; cursor: pointer; white-space: nowrap; }
.modal-toggle:hover, .modal-toggle:focus-visible { color: #e6cd82; border-color: #e6cd82; }
.modal-x { background: none; border: 1px solid rgba(200,180,120,.4); color: #e7ddc8; width: 2.1rem; height: 2.1rem; border-radius: 6px; font-size: 1.3rem; line-height: 1; cursor: pointer; flex: none; }
.modal-x:hover, .modal-x:focus-visible { border-color: #e6cd82; color: #e6cd82; }

.modal-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; }

/* --- modalità iframe (materiali) --- */
.modal.is-frame .modal-stage { align-items: stretch; }
.modal-frame { flex: 1 1 auto; width: 100%; border: 0; border-radius: 8px; background: #100d0c; box-shadow: 0 24px 60px -20px rgba(0,0,0,.75); }

/* --- modalità contenuto (ritratto + testo) --- */
.modal-card { display: flex; gap: 1.6rem; align-items: flex-start; max-width: min(94vw,880px); margin: auto; color: #e7ddc8; }
.modal-media { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 42%; }
.modal-media img { max-width: 100%; max-height: 82vh; border-radius: 6px; border: 1px solid rgba(230,205,130,.5); box-shadow: 0 30px 60px -20px #000; display: block; }
.modal-media img.err { display: none; }
.modal-text { flex: 1 1 auto; min-width: 0; overflow-y: auto; max-height: 84vh; text-align: left; }
.modal-text .m-name { display: block; font-family: "Didot",Georgia,serif; font-size: 1.5rem; color: #ece2cc; }
.modal-text .m-role { display: block; color: #e6cd82; font-style: italic; font-size: .95rem; margin: .2rem 0 .9rem; }
.modal-text p { color: #c9bda3; font-size: .95rem; line-height: 1.6; margin: 0 0 .8rem; }
.modal-text h4 { color: #e6cd82; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; font-family: system-ui,sans-serif; margin: 1.1rem 0 .5rem; }
.modal-text ul { list-style: none; margin: 0; padding: 0; }
.modal-text li { color: #c9bda3; font-size: .92rem; line-height: 1.5; margin: 0 0 .55rem; padding-left: .9rem; border-left: 2px solid rgba(230,205,130,.35); }
.modal-text li b { color: #ece2cc; }
.modal.imgonly .modal-text { display: none; }

@media (max-width: 640px) {
  .modal-card { flex-direction: column; align-items: center; }
  .modal-media { max-width: 100%; }
  .modal-media img { max-height: 46vh; }
  .modal-text { max-height: none; overflow: visible; }
}

/* --- carta Arcano (tarocco) dentro la modale --- */
.modal-arcano { width: 190px; max-width: 100%; --card-ink:#16110f; --card-ink-2:#241a17; --agold:#b8912f; --agold-b:#e6cd82; --abone:#ece2cc; --ashadow:rgba(0,0,0,.45); }
.modal-arcano .face { position: relative; aspect-ratio: 62/107; border-radius: 7px; padding: 9px; background: radial-gradient(120% 80% at 50% 0%, var(--card-ink-2), var(--card-ink) 70%); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 28px -16px var(--ashadow); outline: 1px solid color-mix(in srgb, var(--agold) 55%, transparent); outline-offset: -4px; }
.modal-arcano .plate { position: relative; height: 100%; border: 1px solid color-mix(in srgb,var(--agold) 70%, transparent); border-radius: 3px; display: grid; grid-template-rows: auto 1fr auto; padding: .45rem .4rem .4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--tint,var(--agold)) 9%, transparent), transparent 34%); }
.modal-arcano .corner { position: absolute; width: 6px; height: 6px; border: 1px solid var(--agold); transform: rotate(45deg); background: var(--card-ink); }
.modal-arcano .corner.tl { top:-4px; left:-4px } .modal-arcano .corner.tr { top:-4px; right:-4px } .modal-arcano .corner.bl { bottom:-4px; left:-4px } .modal-arcano .corner.br { bottom:-4px; right:-4px }
.modal-arcano .numeral { font-family: "Didot",Georgia,serif; text-align: center; color: var(--agold-b); font-size: 1.15rem; letter-spacing: .16em; line-height: 1; padding: .05rem 0 .3rem; border-bottom: 1px solid color-mix(in srgb,var(--agold) 30%, transparent); }
.modal-arcano .art { display: grid; place-items: center; padding: .4rem .2rem; min-height: 0; }
.modal-arcano .art svg { width: 100%; height: 100%; max-height: 180px; display: block; stroke: var(--agold); }
.modal-arcano .glow { fill: color-mix(in srgb, var(--tint,var(--agold)) 26%, transparent); stroke: none; }
.modal-arcano .fillt { fill: color-mix(in srgb, var(--tint,var(--agold)) 55%, transparent); }
.modal-arcano .filli { fill: var(--card-ink); }
.modal-arcano .name { text-align: center; color: var(--abone); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; padding: .35rem 0 .05rem; border-top: 1px solid color-mix(in srgb,var(--agold) 30%, transparent); font-variant: small-caps; }

@media print { .modal { display: none !important; } }