/* ============================================================
   Suzanne — Tema "Cinema di mezzanotte"
   Override Bootstrap 5 con palette §12 di PROGETTO.md.
   ============================================================ */

:root {
    --su-bg:           #0E0B0A;
    --su-bg-alt:       #1A1614;
    --su-paper:        #F2E9DC;
    --su-accent:       #A8123E;
    --su-accent-soft:  #C7355C;
    --su-mustard:      #D4A537;
    --su-text:         #F2E9DC;
    --su-text-dim:     rgba(242, 233, 220, 0.65);
    --su-text-muted:   rgba(242, 233, 220, 0.45);
    --su-border:       #2A2522;
    --su-border-soft:  rgba(242, 233, 220, 0.10);

    --bs-body-bg:      var(--su-bg);
    --bs-body-color:   var(--su-text);
    --bs-primary:      var(--su-accent);
    --bs-primary-rgb:  168, 18, 62;
    --bs-link-color:   var(--su-accent-soft);
    --bs-link-hover-color: var(--su-mustard);
    --bs-border-color: var(--su-border);
    --bs-border-radius: 2px;
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: 3px;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.6;
}

html, body {
    background-color: var(--su-bg);
    color: var(--su-text);
    font-family: var(--bs-body-font-family);
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
    font-family: 'Playfair Display', "Times New Roman", serif;
    letter-spacing: 0.5px;
}

a { color: var(--su-accent-soft); text-decoration: none; }
a:hover { color: var(--su-mustard); }

.text-muted-light { color: var(--su-text-dim) !important; }
.text-muted-faint { color: var(--su-text-muted) !important; }

/* --- Buttons --- */
.btn {
    border-radius: 2px;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 0.6rem 1.4rem;
    transition: transform 120ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.btn-primary {
    background-color: var(--su-accent);
    border-color: var(--su-accent);
    color: var(--su-paper);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--su-accent-soft);
    border-color: var(--su-accent-soft);
    color: var(--su-paper);
    transform: translateY(-1px);
}
.btn-outline-light {
    border-color: var(--su-border-soft);
    color: var(--su-text);
}
.btn-outline-light:hover {
    background-color: var(--su-border-soft);
    color: var(--su-paper);
}
.btn-lg { padding: 0.85rem 1.8rem; font-size: 1.05rem; }

/* --- Navbar --- */
.suzanne-navbar {
    background-color: rgba(14, 11, 10, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--su-border-soft);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.suzanne-navbar .navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    letter-spacing: 4px;
    color: var(--su-paper);
    text-transform: uppercase;
}

.badge-soft {
    border: 1px solid var(--su-border-soft);
    padding: 0.35rem 0.7rem;
    color: var(--su-text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.7rem;
}

/* --- Hero --- */
.suzanne-hero {
    position: relative;
    padding: 6rem 0 5rem;
    background:
        radial-gradient(ellipse at top, rgba(168, 18, 62, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(212, 165, 55, 0.07), transparent 70%),
        var(--su-bg);
    overflow: hidden;
}
.suzanne-hero__veil {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.suzanne-hero__inner { position: relative; z-index: 1; }

.suzanne-eyebrow {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.78rem;
    color: var(--su-mustard);
    margin-bottom: 0.7rem;
}
.suzanne-display {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 700;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
    line-height: 1.05;
}
.suzanne-lead {
    font-size: 1.15rem;
    color: var(--su-text-dim);
    max-width: 36rem;
    margin: 0 auto;
}

/* --- Cards (vetrina sotto hero) --- */
.suzanne-card {
    background-color: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    padding: 1.6rem;
    transition: transform 200ms ease, border-color 200ms ease;
}
.suzanne-card:hover {
    transform: translateY(-3px);
    border-color: var(--su-accent);
}
.suzanne-card h3 {
    color: var(--su-paper);
    margin-bottom: 0.7rem;
}

/* --- Footer --- */
.suzanne-footer {
    border-top: 1px solid var(--su-border-soft);
    padding: 2rem 0;
    margin-top: 4rem;
}

/* --- Age Gate --- */
.suzanne-gate-body {
    background:
        radial-gradient(ellipse at center, rgba(168, 18, 62, 0.20), transparent 60%),
        var(--su-bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.suzanne-gate {
    width: 100%;
    max-width: 460px;
}
.suzanne-gate__panel {
    background-color: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.suzanne-gate__panel h1 { color: var(--su-paper); }

/* --- Forms --- */
.form-control {
    background-color: var(--su-bg);
    border: 1px solid var(--su-border-soft);
    color: var(--su-text);
}
.form-control:focus {
    background-color: var(--su-bg);
    border-color: var(--su-accent);
    color: var(--su-text);
    box-shadow: 0 0 0 0.2rem rgba(168, 18, 62, 0.25);
}

/* --- Utilities --- */
::selection {
    background: var(--su-accent);
    color: var(--su-paper);
}

/* --- Navbar links --- */
.suzanne-navlink {
    color: var(--su-text-dim);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 150ms ease;
}
.suzanne-navlink:hover { color: var(--su-paper); }

.btn-sm.btn-primary {
    background-color: var(--su-accent);
    border-color: var(--su-accent);
    color: var(--su-paper);
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
}

/* --- Auth pages --- */
.suzanne-auth-section {
    padding: 5rem 0 4rem;
    background:
        radial-gradient(ellipse at top, rgba(168, 18, 62, 0.10), transparent 60%),
        var(--su-bg);
    min-height: 70vh;
}
.suzanne-auth-card {
    background-color: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.suzanne-auth-card h1 { color: var(--su-paper); }
.suzanne-auth-card .form-label {
    color: var(--su-text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.suzanne-auth-card .form-text { color: var(--su-text-muted); }
.suzanne-auth-card .form-check-label { color: var(--su-text-dim); }
.suzanne-auth-card .text-muted-light a { color: var(--su-accent-soft); }
.suzanne-auth-card .text-muted-light a:hover { color: var(--su-mustard); }

/* --- Catalog head + filters --- */
.suzanne-catalog-head {
    padding: 4rem 0 1.5rem;
    background:
        radial-gradient(ellipse at top, rgba(168, 18, 62, 0.10), transparent 60%),
        var(--su-bg);
}
.catalog-filters .form-control,
.catalog-filters .form-select {
    background-color: var(--su-bg-alt);
    border-color: var(--su-border-soft);
    color: var(--su-text);
}
.catalog-filters .form-control:focus,
.catalog-filters .form-select:focus {
    background-color: var(--su-bg-alt);
    border-color: var(--su-accent);
    color: var(--su-text);
    box-shadow: 0 0 0 0.2rem rgba(168, 18, 62, 0.18);
}
.catalog-filters .form-control::placeholder { color: var(--su-text-muted); }

/* --- Catalog grid --- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}
.catalog-card {
    display: block;
    text-decoration: none;
    color: var(--su-text);
    background-color: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
    overflow: hidden;
}
.catalog-card:hover {
    transform: translateY(-4px);
    border-color: var(--su-accent);
    box-shadow: 0 12px 30px rgba(168, 18, 62, 0.18);
    color: var(--su-text);
}
.catalog-card__media {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--su-bg);
    overflow: hidden;
}
.catalog-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}
.catalog-card:hover .catalog-card__media img { transform: scale(1.04); }
.catalog-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--su-text-muted);
    font-family: 'Playfair Display', serif;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.catalog-card__badge {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    background: rgba(14, 11, 10, 0.85);
    color: var(--su-paper);
    font-size: 0.78rem;
    padding: 0.25rem 0.55rem;
    border-radius: 2px;
    backdrop-filter: blur(4px);
}
.catalog-card__badge--free {
    background: var(--su-mustard);
    color: var(--su-bg);
    font-weight: 600;
}
.catalog-card__body { padding: 0.85rem 1rem 1rem; }
.catalog-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    margin: 0 0 0.25rem;
    color: var(--su-paper);
    line-height: 1.25;
}
.catalog-card__meta {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--su-text-muted);
}

/* --- Story show (capitolo) --- */
.story-hero {
    position: relative;
    padding: 6rem 0 4rem;
    overflow: hidden;
    background: var(--su-bg);
}
.story-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    filter: blur(8px) saturate(0.9);
    transform: scale(1.05);
}
.story-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,11,10,0.72) 0%, rgba(14,11,10,0.92) 90%);
}
.story-hero__inner { position: relative; z-index: 1; }
.story-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 700;
    margin: 0.4rem 0 1.5rem;
    color: var(--su-paper);
}
.story-hero__summary {
    color: var(--su-text-dim);
    font-size: 1.05rem;
    max-width: 56rem;
    margin-bottom: 2rem;
}
.story-hero__cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.story-hero__price {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--su-paper);
    margin-right: 0.4rem;
}
.story-hero__price--free { color: var(--su-mustard); }

/* Preview thumbnails */
.story-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .story-preview-grid { grid-template-columns: repeat(3, 1fr); }
}
.story-preview-grid__item {
    aspect-ratio: 4 / 5;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    overflow: hidden;
}
.story-preview-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-preview-grid__btn {
    /* Reset bottone — eredita lo stile della card. Aggiunge cursor + hover. */
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    transition: transform 200ms ease, border-color 200ms ease;
}
.story-preview-grid__btn:hover {
    transform: scale(1.02);
    border-color: var(--su-accent-soft);
}
.story-preview-grid__btn:focus-visible {
    outline: 2px solid var(--su-accent);
    outline-offset: 2px;
}

/* Lightbox per anteprime */
.story-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(14, 11, 10, 0.92);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.story-lightbox[hidden] { display: none; }
.story-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(242, 233, 220, 0.10);
}
.story-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(242, 233, 220, 0.20);
    color: var(--su-paper);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.story-lightbox__close:hover {
    background: var(--su-accent);
    border-color: var(--su-accent);
}
body.story-lightbox-open { overflow: hidden; }

/* ============================================================
   Characters page — alternative navigation by character
   ============================================================ */
.characters-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-right: 1px solid var(--su-border-soft);
    padding-right: 1rem;
}
@media (max-width: 767px) {
    .characters-list { border-right: 0; padding-right: 0; }
}
.characters-list__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid var(--su-border-soft);
    border-radius: 3px;
    padding: 0.65rem 0.8rem;
    color: var(--su-text);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.characters-list__item:hover {
    background: rgba(168, 18, 62, 0.10);
    border-color: var(--su-accent-soft);
}
.characters-list__item.is-active {
    background: rgba(168, 18, 62, 0.18);
    border-color: var(--su-accent);
}
.characters-list__portrait {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    flex-shrink: 0;
}
.characters-list__portrait--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--su-text-muted);
    font-size: 1.2rem;
}
.characters-list__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.characters-list__name {
    color: var(--su-paper);
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.characters-list__alias {
    color: var(--su-text-muted);
    font-size: 0.78rem;
    font-style: italic;
}

.characters-panel {
    padding-left: 0.5rem;
}
@media (max-width: 767px) {
    .characters-panel { padding-left: 0; padding-top: 1rem; }
}
.characters-panel__title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--su-paper);
    margin-bottom: 0.25rem;
}
.characters-panel__alias {
    color: var(--su-mustard);
    font-style: italic;
    margin-bottom: 0.75rem;
}
.characters-panel__desc {
    color: var(--su-text-dim);
    line-height: 1.6;
    max-width: 60ch;
}

.characters-stories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.85rem;
    margin-top: 0.75rem;
}
.characters-stories__item {
    display: flex;
    flex-direction: column;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none;
    color: var(--su-text);
    transition: transform 150ms ease, border-color 150ms ease;
}
.characters-stories__item:hover {
    transform: translateY(-2px);
    border-color: var(--su-accent-soft);
    color: var(--su-paper);
}
.characters-stories__cover {
    aspect-ratio: 4 / 5;
    background: var(--su-bg);
    overflow: hidden;
}
.characters-stories__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.characters-stories__body {
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.characters-stories__title {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.characters-stories__badge {
    background: rgba(212, 165, 55, 0.15);
    color: var(--su-mustard);
    border: 1px solid rgba(212, 165, 55, 0.40);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.2rem 0.45rem;
}

/* Cast */
.story-cast { display: flex; flex-direction: column; gap: 0.75rem; }
.story-cast__item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
}
.story-cast__portrait {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--su-border-soft);
    flex-shrink: 0;
}
.story-cast__portrait--empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--su-text-muted);
    background: var(--su-bg);
}
.story-cast__name { color: var(--su-paper); font-weight: 500; }
.story-cast__alias { color: var(--su-text-muted); font-size: 0.82rem; font-style: italic; }

/* Relation badges (public) */
.admin-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.55rem;
    border-radius: 2px;
    font-weight: 500;
}
.admin-rel-badge--logical   { background: rgba(168, 18, 62, 0.20); color: var(--su-accent-soft); }
.admin-rel-badge--temporal  { background: rgba(212, 165, 55, 0.20); color: var(--su-mustard); }
.admin-rel-badge--character { background: rgba(242, 233, 220, 0.10); color: var(--su-text-dim); }

/* Related */
.story-related { display: flex; flex-direction: column; gap: 0.4rem; }
.story-related__item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.7rem 1rem;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    color: var(--su-text);
    text-decoration: none;
    transition: border-color 200ms ease;
}
.story-related__item:hover { border-color: var(--su-accent); color: var(--su-text); }
.story-related__title { color: var(--su-paper); font-weight: 500; }
.story-related__desc { color: var(--su-text-muted); font-size: 0.85rem; }

/* --- Footer legal links --- */
.suzanne-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    border-top: 1px solid var(--su-border-soft);
    padding-top: 0.85rem;
}
.suzanne-footer__legal a {
    color: var(--su-text-muted);
    text-decoration: none;
}
.suzanne-footer__legal a:hover { color: var(--su-paper); }
.suzanne-footer__legal .dot { color: var(--su-text-muted); }

/* Language switcher in footer */
.suzanne-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 1px;
}
.suzanne-lang-switcher a {
    color: var(--su-text-muted);
    text-decoration: none;
    font-weight: 500;
}
.suzanne-lang-switcher a:hover { color: var(--su-paper); }
.suzanne-lang-switcher__active {
    color: var(--su-mustard);
    font-weight: 600;
}

/* --- Legal pages --- */
.legal-hero {
    padding: 4rem 0 1.5rem;
    background:
        radial-gradient(ellipse at top, rgba(168, 18, 62, 0.08), transparent 60%),
        var(--su-bg);
    border-bottom: 1px solid var(--su-border-soft);
}
.legal-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--su-paper);
    margin: 0.4rem 0 0.5rem;
}
.legal-hero__date {
    color: var(--su-text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.legal-body {
    padding: 3rem 0 5rem;
    background: var(--su-bg);
    font-size: 0.98rem;
    line-height: 1.7;
}
.legal-body h2 {
    font-family: 'Playfair Display', serif;
    color: var(--su-paper);
    margin: 2.2rem 0 0.8rem;
    font-size: 1.45rem;
}
.legal-body p, .legal-body li { color: var(--su-text-dim); }
.legal-body strong { color: var(--su-paper); }
.legal-body ul { padding-left: 1.4rem; }
.legal-body ul li { margin-bottom: 0.35rem; }
.legal-body a { color: var(--su-accent-soft); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--su-mustard); }
.legal-body code {
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    padding: 0.05rem 0.35rem;
    border-radius: 2px;
    color: var(--su-paper);
    font-size: 0.85em;
}

.legal-disclaimer {
    background: var(--su-bg-alt);
    border-left: 3px solid var(--su-accent);
    padding: 1rem 1.2rem;
    margin: 1.5rem 0 2rem;
    color: var(--su-text);
    font-size: 0.95rem;
}
.legal-warning {
    background: rgba(168, 18, 62, 0.18);
    border: 1px solid rgba(168, 18, 62, 0.45);
    padding: 1.1rem 1.3rem;
    margin: 0 0 2rem;
    color: var(--su-paper);
    border-radius: 2px;
}
.legal-revision {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--su-border-soft);
    color: var(--su-text-muted);
    font-size: 0.85rem;
}

.legal-owner-box {
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
    padding: 1.1rem 1.3rem;
    margin-bottom: 2rem;
    border-radius: 2px;
}
.legal-owner-box__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--su-mustard);
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.legal-owner-box p { color: var(--su-text); }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 2rem;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border-soft);
}
.legal-table th, .legal-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--su-border-soft);
    text-align: left;
    vertical-align: top;
}
.legal-table th {
    background: var(--su-bg);
    color: var(--su-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    font-weight: 600;
}
.legal-table td { color: var(--su-text-dim); font-size: 0.9rem; }
.legal-table tr:last-child td { border-bottom: 0; }

/* --- Map (Cytoscape) --- */
.map-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* subtract navbar */
    background: var(--su-bg);
}
.map-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem 1.5rem;
    border-bottom: 1px solid var(--su-border-soft);
    background: var(--su-bg-alt);
    flex-wrap: wrap;
}
.map-bar__hint { color: var(--su-text-muted); font-size: 0.78rem; margin: 0.25rem 0 0; max-width: 36rem; }
.map-bar__legend { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.map-bar__filters { display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; }
.map-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--su-text-dim);
    font-size: 0.85rem;
    cursor: pointer;
}
.map-legend {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--su-paper);
}
.map-legend--logical   { background: var(--su-accent); }
.map-legend--temporal  { background: var(--su-mustard); color: var(--su-bg); }
.map-legend--character { background: rgba(242, 233, 220, 0.15); color: var(--su-text-dim); }

.map-canvas {
    flex: 1;
    min-height: 0;
    background:
        radial-gradient(ellipse at center, rgba(168, 18, 62, 0.06), transparent 70%),
        var(--su-bg);
}

.map-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--su-text-dim);
}

/* --- Reader (fullscreen) --- */
.reader-body {
    background: #000;
    color: var(--su-text);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}
.reader-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(242, 233, 220, 0.06);
    color: var(--su-text-dim);
    font-size: 0.85rem;
}
.reader-bar__exit {
    color: var(--su-text);
    text-decoration: none;
    border: 1px solid rgba(242, 233, 220, 0.18);
    padding: 0.3rem 0.75rem;
    border-radius: 2px;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.reader-bar__exit:hover {
    background: rgba(242, 233, 220, 0.08);
    color: var(--su-paper);
}
.reader-bar__title {
    display: flex; align-items: center; gap: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    justify-content: center;
}
.reader-bar__brand {
    font-family: 'Playfair Display', serif;
    letter-spacing: 3px;
    color: var(--su-paper);
    text-transform: uppercase;
}
.reader-bar__sep { color: var(--su-text-muted); }
.reader-bar__chapter {
    color: var(--su-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw;
}
.reader-bar__counter {
    font-variant-numeric: tabular-nums;
    color: var(--su-text-dim);
    min-width: 70px;
    text-align: right;
}
.reader-bar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.reader-bar__zoom {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.reader-bar__zoom-btn {
    background: rgba(242, 233, 220, 0.06);
    border: 1px solid rgba(242, 233, 220, 0.18);
    color: var(--su-paper);
    width: 28px;
    height: 28px;
    line-height: 1;
    font-size: 1rem;
    border-radius: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.reader-bar__zoom-btn:hover {
    background: var(--su-accent);
    border-color: var(--su-accent);
}
.reader-bar__zoom-btn--reset {
    font-size: 0.85rem;
}
.reader-bar__zoom-val {
    color: var(--su-text-muted);
    font-size: 0.78rem;
    min-width: 3.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.reader-bar__lang {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.reader-bar__lang-label {
    color: var(--su-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reader-bar__lang select {
    background: rgba(242, 233, 220, 0.06);
    border: 1px solid rgba(242, 233, 220, 0.18);
    color: var(--su-paper);
    padding: 0.25rem 0.55rem;
    font-size: 0.85rem;
    border-radius: 2px;
    appearance: none;
}
.reader-bar__lang select:focus {
    outline: none;
    border-color: var(--su-accent);
}
.reader-bar__lang select option {
    /* Il dropdown nativo usa lo sfondo del SO (di solito bianco): forziamo
       testo scuro per garantire la leggibilità anche su tema dark. */
    color: #111;
    background: #fff;
}

.reader-stage {
    padding: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Strip mode: vertical stack */
.reader-strip {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Single mode: only the active page is shown */
.reader-page { margin: 0; padding: 0; display: none; width: 100%; justify-content: center; align-items: flex-start; }
.reader-page.is-active { display: flex; }

/* Frame wraps image + dialogue overlay; container for absolute positioning */
.reader-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}
.reader-frame img {
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.reader-page .reader-frame {
    /* Default: l'immagine non supera l'altezza della viewport disponibile sotto la
       barra (la stage ha ora padding-block 0). Lo zoom moltiplica questo limite. */
    max-height: calc((100vh - var(--reader-bar-h, 3.5rem)) * var(--reader-zoom, 1));
}
.reader-page .reader-frame img {
    max-height: calc((100vh - var(--reader-bar-h, 3.5rem)) * var(--reader-zoom, 1));
    width: auto;
    margin: 0;
}
/* Strip mode: zoom moltiplica la larghezza naturale dell'immagine */
.reader-strip .reader-frame img {
    width: calc(100% * var(--reader-zoom, 1));
    max-width: none;
    height: auto;
}

/* Dialogue overlay (translated balloons) */
.reader-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.reader-balloon {
    position: absolute;
    background: rgba(255, 255, 255, 0.60);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 1% 1.5%;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Niente overflow: hidden — il balloon si espande verso il basso se il testo
       è più lungo del min-height impostato dal bbox. Garantisce sempre piena leggibilità. */
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.reader-balloon__text {
    /* Font calcolato da JS in base alla larghezza dell'IMMAGINE (non del singolo balloon),
       così tutti i balloon nella stessa tavola hanno la stessa dimensione di font.
       Fallback se JS non gira: 14px. */
    font-size: var(--reader-font, 14px);
    line-height: 1.15;
    text-align: center;
    color: inherit;
    width: 100%;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Single mode: side nav buttons */
.reader-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(242, 233, 220, 0.20);
    background: rgba(14, 11, 10, 0.65);
    color: var(--su-paper);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.reader-nav:hover {
    background: var(--su-accent);
    border-color: var(--su-accent);
}
.reader-nav--prev { left: 1rem; }
.reader-nav--next { right: 1rem; }
@media (max-width: 600px) {
    .reader-nav { width: 44px; height: 44px; font-size: 1.4rem; }
}

/* --- Profile --- */
.suzanne-profile-list {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
}
.suzanne-profile-list dt {
    color: var(--su-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    align-self: center;
}
.suzanne-profile-list dd { margin: 0; color: var(--su-text); }
@media (max-width: 540px) {
    .suzanne-profile-list { grid-template-columns: 1fr; }
    .suzanne-profile-list dt { margin-top: 0.5rem; }
}

/* Profile orders */
.profile-orders-table {
    background: transparent;
    color: var(--su-text);
    margin: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--su-text);
    --bs-table-border-color: var(--su-border-soft);
    --bs-table-hover-bg: rgba(242, 233, 220, 0.04);
    --bs-table-hover-color: var(--su-paper);
}
.profile-orders-table thead th {
    color: var(--su-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    font-weight: 600;
    border-color: var(--su-border-soft);
}
.profile-orders-table tbody td {
    border-color: var(--su-border-soft);
    vertical-align: middle;
}
.profile-orders-link { color: var(--su-paper); text-decoration: none; font-weight: 500; }
.profile-orders-link:hover { color: var(--su-accent-soft); }