:root {
        --slm-bg: #071014;
        --slm-panel: rgba(10, 18, 22, 0.78);
        --slm-panel-strong: rgba(8, 15, 19, 0.92);
        --slm-border: rgba(255, 255, 255, 0.14);
        --slm-text: #ffffff;
        --slm-muted: rgba(255, 255, 255, 0.72);
        --slm-cyan: #43d6d6;
        --slm-gold: #d8b36a;
        --slm-violet: #bd86ff;
        --slm-radius-xl: 26px;
        --slm-radius-lg: 18px;
        --slm-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
      }

      @keyframes slide-in-bottom {
        0% { transform: translateX(-50%) translateY(100%); opacity: 0; }
        100% { transform: translateX(-50%) translateY(0); opacity: 1; }
      }
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes pulse-scan {
        0%, 100% { opacity: 0.55; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.03); }
      }

      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: #000;
        color: var(--slm-text);
      }

      #loadingOverlay {
        position: fixed;
        inset: 0;
        z-index: 999999999;
        background: radial-gradient(circle at 50% 20%, rgba(33, 52, 60, 0.96), rgba(4, 9, 12, 0.98));
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 28px;
        font-size: 18px;
        font-weight: 700;
      }
      .spinner {
        width: 54px;
        height: 54px;
        border: 5px solid rgba(255,255,255,0.12);
        border-top-color: var(--slm-cyan);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
      }

      .loading-progress {
        width: min(320px, 82vw);
        height: 10px;
        margin: 18px auto 8px;
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid rgba(67, 214, 214, 0.35);
        background: rgba(255, 255, 255, 0.10);
        box-shadow: 0 0 22px rgba(67, 214, 214, 0.12);
      }

      #loadingProgressBar {
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(19,124,125,0.95), rgba(67,214,214,1));
        box-shadow: 0 0 18px rgba(67, 214, 214, 0.45);
        transition: width 0.18s ease;
      }

      #loadingProgressValue {
        min-height: 22px;
        color: var(--slm-cyan);
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 0.04em;
      }

      .welcome-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        color: white;
        background:
          linear-gradient(180deg, rgba(4, 8, 10, 0.38), rgba(4, 8, 10, 0.95)),
          url('/img/san-lorenzo-bg.jpg') center/cover no-repeat,
          radial-gradient(circle at 50% 0%, #23343b 0%, #060c10 72%);
      }
      .welcome-card {
        position: relative;
        width: min(100%, 520px);
        max-height: 92vh;
        overflow-y: auto;
        padding: 26px 18px 20px;
        border: 1px solid var(--slm-border);
        border-radius: var(--slm-radius-xl);
        background: linear-gradient(180deg, rgba(8, 15, 19, 0.82), rgba(8, 15, 19, 0.94));
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: var(--slm-shadow);
      }
      .close-welcome-btn,
      #closeBtn,
      #backBtn {
        -webkit-tap-highlight-color: transparent;
      }
      .close-welcome-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 999px;
        cursor: pointer;
        font-size: 28px;
        line-height: 1;
        color: white;
        background: rgba(0, 0, 0, 0.32);
      }
      .welcome-logo-wrap { text-align: center; margin: 4px 0 14px; }
      .welcome-logo { width: 122px; max-width: 52%; height: auto; }
      .welcome-kicker {
        text-align: center;
        color: var(--slm-cyan);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 800;
        margin: 0 0 8px;
      }
      .welcome-title {
        text-align: center;
        font-size: clamp(30px, 8vw, 44px);
        line-height: 0.98;
        margin: 0 0 12px;
        font-weight: 800;
        letter-spacing: -0.04em;
      }
      .welcome-title span {
        display: block;
        color: var(--slm-cyan);
        font-size: 0.55em;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 8px;
      }
      .welcome-intro {
        text-align: center;
        color: var(--slm-muted);
        font-size: 16px;
        line-height: 1.5;
        margin: 0 0 22px;
      }
      .welcome-section { margin-bottom: 18px; }
      .welcome-section-title {
        font-size: 15px;
        margin: 0 0 10px;
        color: rgba(255,255,255,0.84);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .piano-selector {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .piano-btn {
        width: 100%;
        padding: 16px;
        text-align: left;
        color: white;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.06);
        cursor: pointer;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      }
      .piano-btn strong { display: block; font-size: 18px; margin-bottom: 5px; color: var(--slm-cyan); }
      .piano-btn span { display: block; font-size: 13px; color: var(--slm-muted); line-height: 1.35; }
      .piano-btn.active {
        border-color: rgba(67, 214, 214, 0.78);
        background: linear-gradient(135deg, rgba(67, 214, 214, 0.18), rgba(255,255,255,0.06));
        box-shadow: 0 0 0 1px rgba(67, 214, 214, 0.12) inset, 0 10px 26px rgba(67,214,214,0.10);
      }
      .piano-btn[data-piano="piano2"] strong { color: var(--slm-gold); }
      .piano-btn[data-piano="piano2"].active { border-color: rgba(216, 179, 106, 0.76); background: linear-gradient(135deg, rgba(216,179,106,0.18), rgba(255,255,255,0.06)); }
      .piano-btn[data-piano="piano3"] strong { color: var(--slm-violet); }
      .piano-btn[data-piano="piano3"].active { border-color: rgba(189, 134, 255, 0.76); background: linear-gradient(135deg, rgba(189,134,255,0.18), rgba(255,255,255,0.06)); }
      .language-box, .instructions-box {
        border-radius: 18px;
        padding: 15px;
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
      }
      .language-box .gtranslate_wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        min-height: 44px;
      }
      .instructions-box p {
        margin: 0 0 8px;
        color: var(--slm-muted);
        line-height: 1.45;
        font-size: 15px;
      }
      .instructions-box p:last-child { margin-bottom: 0; }
      .start-btn {
        width: 100%;
        border: none;
        border-radius: 18px;
        padding: 16px 18px;
        font-size: 17px;
        font-weight: 900;
        letter-spacing: 0.02em;
        color: white;
        cursor: pointer;
        background: linear-gradient(135deg, #137c7d, #43d6d6);
        box-shadow: 0 16px 34px rgba(67, 214, 214, 0.22);
      }



      .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 99999998;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px;
        color: white;
        background: rgba(4, 8, 10, 0.68);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
      .modal-card {
        position: relative;
        width: min(100%, 520px);
        max-height: 90vh;
        overflow-y: auto;
        padding: 24px 18px 20px;
        border: 1px solid var(--slm-border);
        border-radius: var(--slm-radius-xl);
        background: linear-gradient(180deg, rgba(8, 15, 19, 0.92), rgba(8, 15, 19, 0.98));
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: var(--slm-shadow);
      }
      .modal-title {
        text-align: center;
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1;
        margin: 22px 0 8px;
        font-weight: 800;
        letter-spacing: -0.04em;
      }
      .modal-intro {
        text-align: center;
        color: var(--slm-muted);
        font-size: 15px;
        line-height: 1.45;
        margin: 0 0 20px;
      }
      .modal-close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 999px;
        cursor: pointer;
        color: white;
        background: rgba(0, 0, 0, 0.32);
      }
      .welcome-language-action {
        width: 100%;
        border: 1px solid rgba(67,214,214,0.35);
        border-radius: 18px;
        padding: 14px 16px;
        color: white;
        background: rgba(67,214,214,0.10);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        cursor: pointer;
        text-align: left;
        margin: 0 0 14px;
      }
      .welcome-language-action strong {
        display: block;
        color: var(--slm-cyan);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .08em;
      }
      .welcome-language-action span:last-child {
        color: var(--slm-muted);
        font-size: 14px;
      }

      .welcome-language-section { margin-top: 18px; }
      .welcome-language-box { margin-top: 10px; }
      .welcome-language-box .gtranslate_wrapper { justify-content: center; }
      .language-note {
        color: var(--slm-muted);
        text-align: center;
        font-size: 13px;
        line-height: 1.4;
        margin: 12px 0 0;
      }

      .ar-hint-top {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 14px;
        z-index: 9999997;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        pointer-events: none;
      }
      .ar-pill {
        min-height: 44px;
        padding: 9px 13px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(0,0,0,0.38);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 22px rgba(0,0,0,0.22);
        color: white;
        font-size: 13px;
        line-height: 1.25;
      }
      .ar-pill strong { display: block; font-size: 12px; color: var(--slm-cyan); text-transform: uppercase; letter-spacing: 0.08em; }
      .ar-pill-left {
        display: flex;
        align-items: center;
        gap: 9px;
        max-width: 210px;
      }
      .ar-pill-right {
        min-width: 118px;
        text-align: right;
      }
      .ar-pill-right strong { color: rgba(255,255,255,0.66); }
      .ar-pill-right span { display: block; font-weight: 700; color: white; }

      .scan-reticle {
        position: fixed;
        inset: 22% 10% 26%;
        z-index: 9999996;
        pointer-events: none;
        border-radius: 26px;
        opacity: 0.78;
        animation: pulse-scan 2.8s ease-in-out infinite;
      }
      .scan-reticle::before,
      .scan-reticle::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid transparent;
        border-radius: 26px;
      }
      .scan-reticle::before {
        border-top-color: var(--slm-cyan);
        border-left-color: var(--slm-cyan);
        clip-path: polygon(0 0, 34% 0, 34% 12%, 12% 12%, 12% 34%, 0 34%);
      }
      .scan-reticle::after {
        border-right-color: var(--slm-cyan);
        border-bottom-color: var(--slm-cyan);
        clip-path: polygon(66% 88%, 88% 88%, 88% 66%, 100% 66%, 100% 100%, 66% 100%);
      }
      .scan-message {
        position: fixed;
        left: 50%;
        bottom: 104px;
        transform: translateX(-50%);
        z-index: 9999997;
        width: min(88%, 360px);
        padding: 14px 16px;
        border-radius: 18px;
        text-align: center;
        color: white;
        background: rgba(7, 16, 20, 0.72);
        border: 1px solid rgba(67,214,214,0.35);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: 0 12px 34px rgba(0,0,0,0.32);
        pointer-events: none;
      }
      .scan-message strong { color: var(--slm-cyan); display: block; margin-bottom: 3px; }

      #barra-app-ar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999998;
        padding: 10px 14px 14px;
        display: flex;
        justify-content: center;
        pointer-events: none;
      }
      .bottom-nav {
        pointer-events: all;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
        width: min(520px, 100%);
        min-height: 70px;
        padding: 8px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(5, 10, 13, 0.76);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 -10px 36px rgba(0,0,0,0.34);
      }
      .open-overlay-btn,
      .nav-btn {
        border: 0;
        color: rgba(255,255,255,0.78);
        border-radius: 17px;
        background: transparent;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
      .open-overlay-btn img { display: none; }
      .nav-icon { font-size: 22px; line-height: 1; }
      .open-overlay-btn span { font-size: 12px; }
      .nav-btn.active, .open-overlay-btn.active {
        color: white;
        background: rgba(67,214,214,0.18);
      }

      .slm-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: currentColor;
      }
      .slm-icon svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.85;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
      }
      .icon-cyan { color: var(--slm-cyan); }
      .icon-gold { color: var(--slm-gold); }
      .icon-violet { color: var(--slm-violet); }
      .icon-white { color: #fff; }
      .close-welcome-btn,
      #closeBtn,
      #backBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .close-welcome-btn .slm-icon svg,
      #closeBtn .slm-icon svg { width: 22px; height: 22px; }
      #backBtn .slm-icon svg { width: 18px; height: 18px; }
      .nav-icon {
        font-size: 0;
        line-height: 1;
      }
      .nav-icon .slm-icon svg { width: 25px; height: 25px; }
      .btn-container button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      .btn-container .slm-icon svg { width: 30px; height: 30px; stroke-width: 1.65; }
      .piano-btn {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
      }
      .piano-copy { min-width: 0; }
      .piano-map-icon {
        width: 126px;
        height: 96px;
        padding: 10px;
        border-radius: 14px;
        border: 1px solid currentColor;
        opacity: 0.96;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10), transparent 38%),
          rgba(255,255,255,0.035);
        box-shadow: inset 0 0 18px rgba(255,255,255,0.04);
        overflow: hidden;
        flex-shrink: 0;
      }
      .piano-map-icon svg {
        width: 100%;
        height: 100%;
        stroke: currentColor;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .piano-map-icon .floor-map-outline {
        stroke-width: 3;
      }
      .piano-map-icon .floor-map-inner {
        stroke-width: 1.45;
        opacity: 0.82;
      }
      .piano-map-icon .floor-map-soft {
        stroke-width: 1.15;
        opacity: 0.52;
      }
      .piano-map-icon .floor-map-dot {
        fill: #fff;
        stroke: currentColor;
        stroke-width: 2;
        filter: drop-shadow(0 0 5px currentColor);
      }

      /* Effetti colore delle piantine coerenti con le card dei piani */
      .piano-btn[data-piano="piano1"] .piano-map-icon {
        color: var(--slm-cyan);
        border-color: rgba(67, 214, 214, 0.95);
        background:
          radial-gradient(circle at 44% 50%, rgba(255,255,255,0.18), transparent 15%),
          radial-gradient(circle at 72% 22%, rgba(67,214,214,0.30), transparent 36%),
          linear-gradient(135deg, rgba(67,214,214,0.22), rgba(67,214,214,0.055));
        box-shadow:
          inset 0 0 26px rgba(67,214,214,0.18),
          0 0 20px rgba(67,214,214,0.16);
      }

      .piano-btn[data-piano="piano2"] .piano-map-icon {
        color: var(--slm-gold);
        border-color: rgba(216, 179, 106, 0.95);
        background:
          radial-gradient(circle at 36% 54%, rgba(255,255,255,0.18), transparent 15%),
          radial-gradient(circle at 28% 18%, rgba(216,179,106,0.34), transparent 38%),
          linear-gradient(135deg, rgba(216,179,106,0.23), rgba(216,179,106,0.055));
        box-shadow:
          inset 0 0 26px rgba(216,179,106,0.18),
          0 0 20px rgba(216,179,106,0.15);
      }

      .piano-btn[data-piano="piano3"] .piano-map-icon {
        color: var(--slm-violet);
        border-color: rgba(189, 134, 255, 0.95);
        background:
          radial-gradient(circle at 74% 68%, rgba(255,255,255,0.18), transparent 15%),
          radial-gradient(circle at 30% 78%, rgba(189,134,255,0.31), transparent 40%),
          linear-gradient(135deg, rgba(189,134,255,0.23), rgba(189,134,255,0.055));
        box-shadow:
          inset 0 0 26px rgba(189,134,255,0.18),
          0 0 20px rgba(189,134,255,0.15);
      }

      .piano-map-icon svg {
        filter: drop-shadow(0 0 6px currentColor);
      }

/* === WELCOME FEDELE AL MOCKUP === */
      body:not(.experience-started) #barra-app-ar,
      body:not(.experience-started) .ar-hint-top,
      body:not(.experience-started) .scan-reticle,
      body:not(.experience-started) .scan-message {
        display: none !important;
      }

      .welcome-overlay {
        padding: 6px;
        background:
          linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.72)),
          url('/img/san-lorenzo-bg.jpg') center/cover no-repeat,
          #070b0d;
      }

      .welcome-card {
        width: min(100%, 430px);
        min-height: calc(100dvh - 12px);
        max-height: calc(100dvh - 12px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        padding: 76px 26px 34px;
        overflow: hidden;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,0.18);
        background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.68));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 18px 55px rgba(0,0,0,0.45);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }

      .welcome-top-actions {
        position: absolute;
        top: 26px;
        left: 28px;
        right: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
      }

      .welcome-round-btn {
        pointer-events: all;
        width: 56px;
        height: 56px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(0,0,0,0.48);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0,0,0,0.35);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
      .welcome-round-btn .slm-icon svg { width: 30px; height: 30px; stroke-width: 2; }

      .welcome-logo-wrap { margin: 0 0 10px; }
      .welcome-logo { width: 150px; max-width: 56%; }

      .welcome-kicker {
        margin: 0;
        color: rgba(255,255,255,0.82);
        font-size: 15px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-family: Georgia, 'Times New Roman', serif;
        font-weight: 600;
      }

      .welcome-title {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(31px, 8.6vw, 44px);
        line-height: 0.92;
        letter-spacing: -0.025em;
        text-transform: uppercase;
        text-shadow: 0 3px 12px rgba(0,0,0,0.6);
        margin: 2px 0 8px;
        font-weight: 500;
      }
      .welcome-title span {
        color: var(--slm-cyan);
        font-family: 'Roboto', system-ui, sans-serif;
        font-size: 0.42em;
        line-height: 1.2;
        letter-spacing: 0.32em;
        margin-top: 12px;
        font-weight: 700;
      }

      .welcome-claim {
        margin: 52px 0 0;
        text-align: center;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: clamp(26px, 7vw, 34px);
        line-height: 1.05;
        font-weight: 700;
        text-shadow: 0 3px 14px rgba(0,0,0,0.7);
      }

      .welcome-intro {
        margin: 24px auto 0;
        max-width: 330px;
        color: rgba(255,255,255,0.88);
        font-size: 16px;
        line-height: 1.48;
        text-shadow: 0 2px 10px rgba(0,0,0,0.75);
      }

      .welcome-spacer { flex: 0 0 44px; }

      .welcome-language-section {
        margin: 18px 0 0;
        text-align: center;
      }
      .welcome-language-section .welcome-section-title {
        margin: 0 0 8px;
        font-size: 11px;
        letter-spacing: .16em;
        color: rgba(255,255,255,.70);
      }
      .welcome-language-box {
        display: inline-flex;
        justify-content: center;
        max-width: 100%;
        margin: 0 auto;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.18);
        background: rgba(0,0,0,0.28);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
      .welcome-language-box .gtranslate_wrapper { min-height: 32px; }

      .start-btn {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        border-radius: 18px;
        padding: 19px 20px;
        font-size: 17px;
        letter-spacing: .04em;
        text-transform: uppercase;
        background: linear-gradient(135deg, #15898a, #47d4d2);
        box-shadow: 0 14px 34px rgba(0,0,0,0.36), 0 10px 28px rgba(67,214,214,0.20);
      }

      .modal-overlay {
        background: rgba(4, 8, 10, 0.76);
      }

      @media (min-width: 780px) {
        .welcome-card { width: min(100%, 430px); padding: 76px 26px 34px; }
      }

      @media (max-width: 390px) {
        .welcome-card { padding-left: 20px; padding-right: 20px; }
        .welcome-round-btn { width: 50px; height: 50px; }
        .welcome-claim { margin-top: 42px; }
        .welcome-spacer { flex-basis: 34px; }
      }

    

      /* === FIX RESPONSIVE DESKTOP SELEZIONE PIANI ===
         Mantiene classi e ID esistenti. Intervento solo CSS. */
      #floorOverlay .modal-card {
        overflow-x: hidden;
      }

      #floorOverlay .piano-selector {
        width: 100%;
      }

      #floorOverlay .piano-btn {
        min-width: 0;
      }

      #floorOverlay .piano-copy {
        min-width: 0;
        position: relative;
        z-index: 2;
      }

      #floorOverlay .piano-map-icon {
        position: relative;
        z-index: 1;
      }

      @media (min-width: 780px) {
        #floorOverlay .modal-card {
          width: min(92vw, 860px);
          padding: 34px 40px 34px;
        }

        #floorOverlay .modal-title {
          margin-top: 18px;
          font-size: clamp(38px, 4.2vw, 54px);
        }

        #floorOverlay .modal-intro {
          max-width: 690px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 30px;
          font-size: 18px;
        }

        #floorOverlay .piano-selector {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px;
        }

        #floorOverlay .piano-btn {
          display: grid;
          grid-template-columns: minmax(0, 1fr) clamp(230px, 32vw, 330px);
          align-items: center;
          min-height: 150px;
          padding: 26px 34px;
          border-radius: 28px;
          gap: 28px;
        }

        #floorOverlay .piano-btn strong {
          font-size: clamp(30px, 3vw, 42px);
          line-height: 1.05;
          margin-bottom: 14px;
        }

        #floorOverlay .piano-copy > span {
          font-size: clamp(18px, 1.75vw, 24px);
          line-height: 1.35;
          color: rgba(255,255,255,0.86);
        }

        #floorOverlay .piano-map-icon {
          justify-self: end;
          width: clamp(230px, 32vw, 330px);
          height: clamp(116px, 15vw, 168px);
          padding: 20px 26px;
          border-radius: 22px;
        }
      }

      @media (min-width: 1100px) {
        #floorOverlay .modal-card {
          width: min(88vw, 980px);
        }

        #floorOverlay .piano-btn {
          grid-template-columns: minmax(0, 1fr) 360px;
        }

        #floorOverlay .piano-map-icon {
          width: 360px;
          height: 184px;
        }
      }

      @media (max-width: 779px) {
        #floorOverlay .piano-selector {
          display: flex;
          flex-direction: column;
        }

        #floorOverlay .piano-btn {
          grid-template-columns: minmax(0, 1fr) 126px;
          gap: 12px;
        }

        #floorOverlay .piano-map-icon {
          width: 126px;
          height: 96px;
        }
      }

      @media (max-width: 390px) {
        #floorOverlay .piano-btn {
          grid-template-columns: minmax(0, 1fr) 112px;
          padding: 14px;
        }

        #floorOverlay .piano-map-icon {
          width: 112px;
          height: 86px;
          padding: 9px;
        }
      }

      /* === WELCOME: GTRANSLATE PULITO + LOGO DELANTE IN BASSO === */

.welcome-logo-wrap {
  display: none !important;
}

.welcome-gtranslate-clean {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 auto;
}

.welcome-gtranslate-clean .gtranslate_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
}

/* Rimuove il contenitore “box” attorno a GTranslate nella welcome */
.welcome-language-box {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Se GTranslate genera select o bottoni, li rendiamo più discreti */
.welcome-gtranslate-clean select,
.welcome-gtranslate-clean button,
.welcome-gtranslate-clean a {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(0,0,0,0.34) !important;
  color: #fff !important;
  min-height: 34px;
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Logo Delante sotto la lingua */
.welcome-delante-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  opacity: 0.82;
}

.welcome-delante-logo {
  width: 92px;
  max-width: 34%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
}

@media (max-width: 390px) {
  .welcome-delante-logo-wrap {
    margin-top: 14px;
  }

  .welcome-delante-logo {
    width: 82px;
  }
}


/* === NASCONDE UI SCANNER DEFAULT MINDAR === */
.mindar-ui-scanning,
.mindar-ui-overlay.mindar-ui-scanning {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.content-separator {
  border: 0;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(67, 214, 214, 0.55),
    transparent
  );
}

.group-content-block {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(67,214,214,0.22);
}

.group-content-label {
  margin: 0 0 8px;
  color: var(--slm-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.group-content-subtitle {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.45;
  margin-top: -4px;
}


#artworkGroupLabel {
  display: none;
  margin: 0 22px 18px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(67,214,214,0.28);
  background: rgba(67,214,214,0.08);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  line-height: 1.35;
}

#artworkGroupLabel strong {
  display: block;
  color: var(--slm-cyan);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 3px;
}

.content-separator {
  border: 0;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(67,214,214,0.55),
    transparent
  );
}

.group-content-block {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(67,214,214,0.22);
}

.group-content-label {
  margin: 0 0 8px;
  color: var(--slm-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.group-content-subtitle {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.45;
  margin-top: -4px;
}

.content-source {
  margin-top: 22px;
  color: rgba(255,255,255,0.58);
  font-size: 13px;
  font-style: italic;
}

#textBox blockquote {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--slm-gold);
  border-radius: 14px;
  background: rgba(216,179,106,0.10);
  color: rgba(255,255,255,0.88);
  font-style: italic;
}

#textBox h4 {
  margin: 24px 0 10px;
  color: var(--slm-gold);
  font-size: 18px;
}

/* =========================================================
   MEDIA CARD V2 - FULL SCREEN IMMERSIVA
   Sfondo = immagine target
   Pannello contenuto ridotto per lasciare visibile l'opera
   Azioni: Ascolta / Guarda LIS
   ========================================================= */

body.content-overlay-open {
  overflow: hidden !important;
}

body.content-overlay-open .ar-hint-top,
body.content-overlay-open .scan-reticle,
body.content-overlay-open .scan-message,
body.content-overlay-open #barra-app-ar {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Overlay full screen */
#mediaContainer.media-card-v2 {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #05090b !important;
  color: #fff !important;
  z-index: 2147483000 !important;
  display: none;
  transform: none !important;
}

#mediaContainer.media-card-v2.show {
  display: block !important;
  animation: none !important;
}

/* Immagine del target come sfondo reale */
#mediaContainer.media-card-v2 #artworkImage {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100vw !important;
  height: 48dvh !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 0 30px 30px !important;

  display: block !important;

  z-index: 0;
}

/* Velo di leggibilità, meno invasivo nella parte alta */
#mediaContainer.media-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(2, 5, 7, 0.12) 0%,
      rgba(2, 5, 7, 0.20) 28%,
      rgba(2, 5, 7, 0.48) 48%,
      rgba(2, 5, 7, 0.88) 100%
    );
}

/* Header */
#mediaContainer.media-card-v2 .mediaHeader {
  position: absolute !important;
  top: calc(14px + env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  height: 50px;
  z-index: 5;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

#mediaContainer.media-card-v2 #closeBtn,
#mediaContainer.media-card-v2 #backBtn {
  pointer-events: auto;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(5, 9, 11, 0.72) !important;
  color: #fff !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px !important;
  margin: 0 !important;
  cursor: pointer;
}

#mediaContainer.media-card-v2 #closeBtn {
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  margin-left: auto !important;
}

#mediaContainer.media-card-v2 #backBtn {
  display: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

#mediaContainer.media-card-v2[data-view="audio"] #backBtn,
#mediaContainer.media-card-v2[data-view="video"] #backBtn {
  display: inline-flex !important;
}

#mediaContainer.media-card-v2 .slm-icon {
  width: 24px;
  height: 24px;
}

/* Pannello ridotto: non copre tutta l'immagine */
#mediaContainer.media-card-v2 .media-content-panel {
  position: absolute;

  left: 18px;
  right: 18px;

  /* Il pannello sale e lascia solo la parte alta dell'immagine visibile */
  top: calc(12dvh + env(safe-area-inset-top));

  /* Spazio per i due pulsanti inferiori */
  bottom: calc(92px + env(safe-area-inset-bottom));

  z-index: 3;

  display: flex;
  flex-direction: column;

  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(10, 15, 17, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 22px 58px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.08);

  overflow: hidden;
}

/* Titolo + autore compatti e ravvicinati */
#mediaContainer.media-card-v2 #artworkTitle {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 18px 20px 0 !important;

  color: #fff !important;

  font-size: clamp(26px, 6.4vw, 40px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em;

  text-align: left !important;

  background: transparent !important;
}

#mediaContainer.media-card-v2 #artworkAuthor {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 2px 20px 8px !important;

  color: rgba(255,255,255,0.76) !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;

  text-align: left !important;

  background: transparent !important;
}

#mediaContainer.media-card-v2 #artworkAuthor {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 2px 20px 10px !important;
  color: rgba(255,255,255,0.76) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
  text-align: left !important;
  background: transparent !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Contenuto collegato: compatto */
#mediaContainer.media-card-v2 #artworkGroupLabel {
  flex: 0 0 auto;
  margin: 0 20px 10px !important;
  padding: 8px 12px !important;
  border-radius: 14px;
  border: 1px solid rgba(67, 214, 214, 0.34);
  background: rgba(20, 54, 56, 0.58);
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  line-height: 1.3;
}

#mediaContainer.media-card-v2 #artworkGroupLabel:empty {
  display: none !important;
}

#mediaContainer.media-card-v2 #artworkGroupLabel strong {
  display: block;
  margin-bottom: 3px;
  color: #43d6d6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 900;
}

/* Testo: scrolla nello spazio del pannello */
#mediaContainer.media-card-v2 #textBox {
  flex: 1 1 auto;
  min-height: 0;

  margin: 0 !important;
  padding: 2px 20px 34px !important;

  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;

  display: block !important;

  color: rgba(255,255,255,0.94) !important;

  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 520 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#mediaContainer.media-card-v2 #textBox h3 {
  margin: 0 0 14px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#mediaContainer.media-card-v2 #textBox h4 {
  margin: 24px 0 10px !important;
  color: #e4bd6a !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

#mediaContainer.media-card-v2 #textBox p {
  margin: 0 0 15px !important;
}

#mediaContainer.media-card-v2 #textBox blockquote {
  margin: 15px 0 !important;
  padding: 15px !important;
  border-left: 3px solid #e4bd6a !important;
  border-radius: 14px !important;
  background: rgba(228, 189, 106, 0.12) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* Audio e video dentro lo stesso pannello */
#mediaContainer.media-card-v2 #audioList {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 !important;
  padding: 2px 20px 32px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: none !important;
  height: auto !important;
}

#mediaContainer.media-card-v2 #audioList > div {
  margin: 0 0 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(228, 189, 106, 0.36);
  background: rgba(255,255,255,0.08);
}

#mediaContainer.media-card-v2 #audioList h4 {
  margin: 0 0 10px;
  color: #e4bd6a;
  font-size: 16px;
  font-weight: 900;
}

#mediaContainer.media-card-v2 #audioList audio {
  width: 100%;
}

#mediaContainer.media-card-v2 #videoPlayer {
  flex: 0 0 auto;
  width: calc(100% - 40px) !important;
  max-width: none !important;
  max-height: 46dvh !important;
  margin: 4px 20px 20px !important;
  border-radius: 18px !important;
  background: #000;
}

/* Stati vista */
#mediaContainer.media-card-v2[data-view="read"] #audioList,
#mediaContainer.media-card-v2[data-view="read"] #audioPlayerContainer,
#mediaContainer.media-card-v2[data-view="read"] #videoPlayer {
  display: none !important;
}

#mediaContainer.media-card-v2[data-view="audio"] #textBox,
#mediaContainer.media-card-v2[data-view="audio"] #artworkGroupLabel,
#mediaContainer.media-card-v2[data-view="audio"] #videoPlayer {
  display: none !important;
}

#mediaContainer.media-card-v2[data-view="audio"] #audioList {
  display: block !important;
}

#mediaContainer.media-card-v2[data-view="video"] #textBox,
#mediaContainer.media-card-v2[data-view="video"] #artworkGroupLabel,
#mediaContainer.media-card-v2[data-view="video"] #audioList,
#mediaContainer.media-card-v2[data-view="video"] #audioPlayerContainer {
  display: none !important;
}

#mediaContainer.media-card-v2[data-view="video"] #videoPlayer {
  display: block !important;
}

/* Barra azioni in basso */
#mediaContainer.media-card-v2 .btn-container {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  z-index: 4;

  margin: 0 !important;
  padding: 10px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);

  background: rgba(5, 9, 11, 0.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#mediaContainer.media-card-v2 #showTextBtn {
  display: none !important;
}

#mediaContainer.media-card-v2 .btn-container button {
  min-height: 56px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 14px !important;
  font-weight: 900 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

#mediaContainer.media-card-v2 #showAudioBtn {
  border-color: rgba(228, 189, 106, 0.62) !important;
  background: rgba(228, 189, 106, 0.12) !important;
}

#mediaContainer.media-card-v2 #showVideoBtn {
  border-color: rgba(180, 117, 255, 0.62) !important;
  background: rgba(180, 117, 255, 0.12) !important;
}

/* Scrollbar */
#mediaContainer.media-card-v2 #textBox::-webkit-scrollbar,
#mediaContainer.media-card-v2 #audioList::-webkit-scrollbar {
  width: 5px;
}

#mediaContainer.media-card-v2 #textBox::-webkit-scrollbar-track,
#mediaContainer.media-card-v2 #audioList::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}

#mediaContainer.media-card-v2 #textBox::-webkit-scrollbar-thumb,
#mediaContainer.media-card-v2 #audioList::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.48);
  border-radius: 999px;
}

/* Desktop */
@media (min-width: 768px) {
  #mediaContainer.media-card-v2 #artworkImage {
    height: 34dvh !important;
  }

  #mediaContainer.media-card-v2 .media-content-panel {
    left: max(36px, 28vw);
    right: max(36px, 28vw);
    top: 30dvh;
    bottom: calc(96px + env(safe-area-inset-bottom));
  }

  #mediaContainer.media-card-v2 .btn-container {
    left: max(36px, 36vw) !important;
    right: max(36px, 36vw) !important;
  }
}

@media (max-width: 420px) {
  #mediaContainer.media-card-v2 .media-content-panel {
    top: 18dvh;
    left: 16px;
    right: 16px;
  }

  #mediaContainer.media-card-v2 #artworkTitle {
    font-size: clamp(24px, 6.2vw, 34px) !important;
  }

  #mediaContainer.media-card-v2 #textBox {
    font-size: 16px !important;
  }
}




/* =========================================================
   CARD CONTENUTO V3 - EXPERIENCE AUDIO FIRST
   ========================================================= */

#mediaContainer.media-card-v3 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;

  background: #050808 !important;
  color: #fff !important;

  display: none;
  overflow: hidden !important;
  border-radius: 0 !important;
}

#mediaContainer.media-card-v3.show {
  display: block !important;
}

#mediaContainer.media-card-v3 #artworkImage {
  position: absolute !important;
  inset: 0 0 auto 0 !important;

  width: 100vw !important;
  height: 56dvh !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;
  z-index: 1 !important;

  filter: saturate(0.95) contrast(1.04);
}

#mediaContainer.media-card-v3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.12) 32%,
      rgba(0, 0, 0, 0.72) 52%,
      rgba(5, 8, 8, 0.98) 72%,
      #050808 100%
    );
}

#mediaContainer.media-card-v3 #mediaHeader {
  position: absolute !important;
  top: calc(18px + env(safe-area-inset-top)) !important;
  left: 18px !important;
  right: 18px !important;
  z-index: 10 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  pointer-events: none;
}

#mediaContainer.media-card-v3 #closeBtn,
#mediaContainer.media-card-v3 #backBtn {
  pointer-events: auto;
}

#mediaContainer.media-card-v3 #closeBtn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(0,0,0,0.62) !important;
  backdrop-filter: blur(14px);
}

#mediaContainer.media-card-v3 #backBtn {
  display: none;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(0,0,0,0.58) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  backdrop-filter: blur(14px);
}

#mediaContainer.media-card-v3 .media-content-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(128px + env(safe-area-inset-bottom)) !important;
  top: auto !important;

  z-index: 5 !important;

  padding: 0 24px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;

  display: block !important;
}

#mediaContainer.media-card-v3 #artworkTitle {
  font-size: clamp(34px, 7.6vw, 58px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
  color: #fff !important;
  text-shadow: 0 10px 26px rgba(0,0,0,0.55);
}

#mediaContainer.media-card-v3 #artworkAuthor {
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: #f0c36a !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

#mediaContainer.media-card-v3 #artworkGroupLabel {
  display: none !important;
}

#mediaContainer.media-card-v3 .content-meta-row {
  display: flex;
  gap: 8px;
  align-items: center;

  margin: 0 0 18px;
  color: rgba(255,255,255,0.58);
  font-size: 14px;
  font-weight: 600;
}

#mediaContainer.media-card-v3 .content-meta-row::before {
  content: "◆";
  color: rgba(240,195,106,0.82);
  font-size: 10px;
}

#mediaContainer.media-card-v3 #textBox {
  display: block !important;
  max-height: 27dvh;
  overflow: hidden;

  font-size: 17px !important;
  line-height: 1.42 !important;
  color: rgba(255,255,255,0.78) !important;
  font-weight: 500 !important;
}

#mediaContainer.media-card-v3 #textBox h3,
#mediaContainer.media-card-v3 #textBox h4,
#mediaContainer.media-card-v3 #textBox blockquote,
#mediaContainer.media-card-v3 #textBox .content-source {
  display: none;
}

#mediaContainer.media-card-v3 .content-excerpt {
  margin: 0 0 18px;
}

#mediaContainer.media-card-v3 .read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 0;
  background: transparent;
  padding: 0;

  color: #f0c36a;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
}

#mediaContainer.media-card-v3 .read-more-btn::after {
  content: "›";
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Vista lettura completa */
#mediaContainer.media-card-v3[data-view="read-full"] #artworkImage {
  height: 34dvh !important;
}

#mediaContainer.media-card-v3[data-view="read-full"]::before {
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.78) 30%,
      #050808 46%,
      #050808 100%
    );
}

#mediaContainer.media-card-v3[data-view="read-full"] .media-content-panel {
  top: calc(24dvh + env(safe-area-inset-top)) !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  padding-bottom: 90px !important;
}

#mediaContainer.media-card-v3[data-view="read-full"] #textBox {
  max-height: none !important;
  overflow: visible !important;
  color: rgba(255,255,255,0.86) !important;
}

#mediaContainer.media-card-v3[data-view="read-full"] #textBox h3,
#mediaContainer.media-card-v3[data-view="read-full"] #textBox h4,
#mediaContainer.media-card-v3[data-view="read-full"] #textBox blockquote,
#mediaContainer.media-card-v3[data-view="read-full"] #textBox .content-source {
  display: block;
}

#mediaContainer.media-card-v3[data-view="read-full"] #textBox h3 {
  font-size: 22px;
  line-height: 1.15;
  margin: 24px 0 12px;
}

#mediaContainer.media-card-v3[data-view="read-full"] #textBox h4 {
  color: #f0c36a;
  margin: 26px 0 10px;
}

#mediaContainer.media-card-v3[data-view="read-full"] #textBox p {
  margin: 0 0 16px;
}

/* Barra azioni in basso - audio first */
#mediaContainer.media-card-v3 .btn-container {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;

  z-index: 2147483001 !important;

  display: block !important;

  padding: 10px !important;
  border-radius: 24px !important;
  background: rgba(5, 8, 8, 0.86) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px);
}

/* Nascondiamo testo e LIS nella nuova UX */
#mediaContainer.media-card-v3 #showTextBtn,
#mediaContainer.media-card-v3 #showVideoBtn {
  display: none !important;
}

/* Pulsante audio grande */
#mediaContainer.media-card-v3 #showAudioBtn {
  width: 100% !important;
  height: 78px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;

  padding: 0 18px !important;

  border-radius: 20px !important;
  border: 1px solid rgba(240,195,106,0.55) !important;
  background: linear-gradient(135deg, rgba(240,195,106,0.22), rgba(255,255,255,0.05)) !important;

  color: #fff !important;
  font-weight: 900 !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* Reset delle regole precedenti che creavano sovrapposizioni */
#mediaContainer.media-card-v3 #showAudioBtn::before {
  content: none !important;
}

#mediaContainer.media-card-v3 #showAudioBtn .slm-icon {
  flex: 0 0 48px !important;

  width: 48px !important;
  height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid rgba(240,195,106,0.92) !important;
  border-radius: 999px !important;

  color: #f0c36a !important;
  font-size: 24px !important;
}

#mediaContainer.media-card-v3 #showAudioBtn span:last-child {
  position: static !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;

  font-size: 0 !important;
  line-height: 1 !important;
}

#mediaContainer.media-card-v3 #showAudioBtn span:last-child::before {
  content: "ASCOLTA IL CONTENUTO";
  display: block;

  color: #f0c36a;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.03em;
}

#mediaContainer.media-card-v3 #showAudioBtn span:last-child::after {
  content: "Audioguida disponibile";
  display: block;

  color: rgba(255,255,255,0.88);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
}

/* Spazio in basso per non coprire Leggi di più */
#mediaContainer.media-card-v3 .media-content-panel {
  bottom: calc(122px + env(safe-area-inset-bottom)) !important;
}

#mediaContainer.media-card-v3 .read-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin-top: 10px !important;
  margin-bottom: 8px !important;

  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;

  color: #f0c36a !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#mediaContainer.media-card-v3 .read-more-btn::after {
  content: "›";
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

/* L'estratto deve essere più corto, così resta spazio per Leggi di più */
#mediaContainer.media-card-v3 #textBox {
  max-height: 20dvh !important;
  overflow: visible !important;
}

#mediaContainer.media-card-v3 .content-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;

  overflow: hidden;
  margin-bottom: 8px !important;
}

/* Vista audio / video */
#mediaContainer.media-card-v3[data-view="audio"] .media-content-panel,
#mediaContainer.media-card-v3[data-view="video"] .media-content-panel {
  top: calc(38dvh + env(safe-area-inset-top)) !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
}

#mediaContainer.media-card-v3[data-view="audio"] .btn-container,
#mediaContainer.media-card-v3[data-view="video"] .btn-container {
  display: none !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList audio {
  width: 100%;
}

#mediaContainer.media-card-v3[data-view="video"] #videoPlayer {
  width: 100% !important;
  max-height: 46dvh !important;
  border-radius: 20px !important;
  background: #000 !important;
}

/* Desktop/tablet */
@media (min-width: 780px) {
  #mediaContainer.media-card-v3 {
    inset: 24px !important;
    width: min(520px, calc(100vw - 48px)) !important;
    height: calc(100dvh - 48px) !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,0.65);
  }

  #mediaContainer.media-card-v3 #artworkImage {
    width: 100% !important;
  }
}

/* =========================================================
   FIX Z-INDEX CARD CONTENUTO SOPRA TUTTA L'APP
   ========================================================= */

body.content-overlay-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Quando la card è aperta, blocchiamo i layer AR sottostanti */
body.content-overlay-open a-scene,
body.content-overlay-open canvas,
body.content-overlay-open .mindar-ui-overlay,
body.content-overlay-open .mindar-ui-scanning,
body.content-overlay-open .mindar-ui-loading,
body.content-overlay-open .mindar-ui-error,
body.content-overlay-open #arSceneContainer,
body.content-overlay-open #sceneContainer,
body.content-overlay-open #mapOverlay,
body.content-overlay-open #floorMap,
body.content-overlay-open #voiceGuidePanel,
body.content-overlay-open #bottomNav,
body.content-overlay-open #debugPanel {
  pointer-events: none !important;
}

/* La card deve stare sopra tutto */
#mediaContainer.media-card-v3 {
  z-index: 2147483000 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

/* Tutti gli elementi interni devono poter ricevere click/touch */
#mediaContainer.media-card-v3,
#mediaContainer.media-card-v3 * {
  pointer-events: auto !important;
}

/* Overlay visivo ulteriore, sopra canvas AR */
#mediaContainer.media-card-v3::after {
  pointer-events: none !important;
}

/* Header e bottoni sempre cliccabili */
#mediaContainer.media-card-v3 #mediaHeader,
#mediaContainer.media-card-v3 #closeBtn,
#mediaContainer.media-card-v3 #backBtn,
#mediaContainer.media-card-v3 .btn-container,
#mediaContainer.media-card-v3 button,
#mediaContainer.media-card-v3 audio,
#mediaContainer.media-card-v3 video {
  position: relative;
  z-index: 2147483001 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Vista audio piena */
#mediaContainer.media-card-v3[data-view="audio"] .media-content-panel {
  top: calc(42dvh + env(safe-area-inset-top)) !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;

  padding: 0 24px 24px !important;

  overflow-y: auto !important;
}

#mediaContainer.media-card-v3[data-view="audio"] .btn-container {
  display: none !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioPlayerContainer {
  display: block !important;
  width: 100% !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList {
  display: block !important;
  width: 100% !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList::before {
  content: "Ascolta l'audioguida";
  display: block;

  margin: 0 0 18px;

  color: #fff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList audio {
  width: 100% !important;
  margin-top: 12px !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList button,
#mediaContainer.media-card-v3[data-view="audio"] .audio-item,
#mediaContainer.media-card-v3[data-view="audio"] .audio-track {
  width: 100% !important;
  border-radius: 20px !important;
  border: 1px solid rgba(240,195,106,0.35) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}

/* =========================================================
   OVERRIDE CARD V3 - PREVIEW COMPATTA MOBILE
   ========================================================= */

#mediaContainer.media-card-v3 {
  background: #050808 !important;
}

/* immagine meno alta, così resta spazio alla preview */
#mediaContainer.media-card-v3 #artworkImage {
  height: 47dvh !important;
}

/* sfumatura più anticipata */
#mediaContainer.media-card-v3::before {
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.02) 0%,
      rgba(0,0,0,0.14) 28%,
      rgba(0,0,0,0.70) 45%,
      rgba(5,8,8,0.98) 60%,
      #050808 100%
    ) !important;
}

/* area contenuto più alta e compatta */
#mediaContainer.media-card-v3 .media-content-panel {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(126px + env(safe-area-inset-bottom)) !important;

  padding: 0 28px !important;
  overflow: visible !important;
  max-height: none !important;
}

/* titolo più compatto */
#mediaContainer.media-card-v3 #artworkTitle {
  font-size: clamp(32px, 8vw, 42px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  margin: 0 0 10px !important;
}

/* sottotitolo compatto */
#mediaContainer.media-card-v3 #artworkAuthor {
  font-size: 17px !important;
  line-height: 1.25 !important;
  margin: 0 0 14px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* riga luogo */
#mediaContainer.media-card-v3 .content-meta-row {
  margin: 0 0 18px !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.62) !important;
}

/* blocco testo: non deve mai andare sotto al bottone */
#mediaContainer.media-card-v3 #textBox {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* estratto max 3 righe */
#mediaContainer.media-card-v3 .content-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;

  overflow: hidden !important;
  margin: 0 0 12px !important;

  color: rgba(255,255,255,0.80) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* leggi di più sempre visibile */
#mediaContainer.media-card-v3 .read-more-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: #f0c36a !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#mediaContainer.media-card-v3 .read-more-btn::after {
  content: "›" !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

/* barra in basso */
#mediaContainer.media-card-v3 .btn-container {
  position: absolute !important;
  left: 22px !important;
  right: 22px !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;

  display: block !important;

  height: 96px !important;
  padding: 10px !important;

  border-radius: 24px !important;
  background: rgba(5, 8, 8, 0.88) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px) !important;
}

/* nascondi testo e LIS */
#mediaContainer.media-card-v3 #showTextBtn,
#mediaContainer.media-card-v3 #showVideoBtn {
  display: none !important;
}

/* bottone audio pulito */
#mediaContainer.media-card-v3 #showAudioBtn {
  width: 100% !important;
  height: 76px !important;

  display: grid !important;
  grid-template-columns: 56px 1fr 42px !important;
  align-items: center !important;
  column-gap: 14px !important;

  padding: 0 18px !important;

  border-radius: 20px !important;
  border: 1px solid rgba(240,195,106,0.60) !important;
  background: linear-gradient(135deg, rgba(240,195,106,0.22), rgba(255,255,255,0.055)) !important;

  color: #fff !important;
  text-align: left !important;
  overflow: hidden !important;
}

/* cancella pseudo precedenti */
#mediaContainer.media-card-v3 #showAudioBtn::before,
#mediaContainer.media-card-v3 #showAudioBtn::after {
  content: none !important;
}

/* icona cuffie */
#mediaContainer.media-card-v3 #showAudioBtn .slm-icon {
  grid-column: 1 !important;

  width: 52px !important;
  height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 2px solid rgba(240,195,106,0.95) !important;
  border-radius: 999px !important;

  color: #f0c36a !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

/* testo bottone */
#mediaContainer.media-card-v3 #showAudioBtn span:last-child {
  grid-column: 2 !important;

  position: static !important;
  display: block !important;

  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}

#mediaContainer.media-card-v3 #showAudioBtn span:last-child::before {
  content: "ASCOLTA IL CONTENUTO" !important;
  display: block !important;

  color: #f0c36a !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 7px !important;
}

#mediaContainer.media-card-v3 #showAudioBtn span:last-child::after {
  content: "Audioguida disponibile" !important;
  display: block !important;

  color: rgba(255,255,255,0.86) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

/* play circle a destra */
#mediaContainer.media-card-v3 #showAudioBtn .audio-play-dot {
  grid-column: 3 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: #f0c36a !important;
}

/* se non esiste audio-play-dot, usiamo pseudo su bottone */
#mediaContainer.media-card-v3 #showAudioBtn .audio-play-dot::before {
  content: "▶" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  color: #111 !important;
  font-size: 17px !important;
}

/* Vista audio piena */
#mediaContainer.media-card-v3[data-view="audio"] #artworkImage {
  height: 34dvh !important;
}

#mediaContainer.media-card-v3[data-view="audio"] .media-content-panel {
  top: calc(38dvh + env(safe-area-inset-top)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  padding: 0 28px 28px !important;
  overflow-y: auto !important;
}

#mediaContainer.media-card-v3[data-view="audio"] .btn-container {
  display: none !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #textBox {
  display: none !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioPlayerContainer,
#mediaContainer.media-card-v3[data-view="audio"] #audioList {
  display: block !important;
  width: 100% !important;
}

#mediaContainer.media-card-v3[data-view="audio"] #audioList::before {
  content: "Ascolta l'audioguida" !important;
  display: block !important;

  margin: 0 0 20px !important;

  color: #fff !important;
  font-size: 32px !important;
  line-height: 0.95 !important;
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}


/* player audio */
.custom-audio-player {
  width: 100%;
  border: 1px solid rgba(210, 166, 74, 0.45);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(8, 8, 8, 0.94);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  padding: 18px;
  color: #fff;
}

.custom-audio-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.custom-audio-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(210, 166, 74, 0.75);
  background: rgba(210, 166, 74, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d2a64a;
  font-size: 20px;
}

.custom-audio-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
}

.custom-audio-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.68);
}

.custom-audio-controls {
  display: grid;
  grid-template-columns: 48px 46px 1fr 46px;
  align-items: center;
  gap: 10px;
}

.audio-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(210, 166, 74, 0.85);
  background: #d2a64a;
  color: #111;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.audio-time {
  font-size: 12px;
  color: rgba(255,255,255,0.74);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.audio-progress {
  width: 100%;
  accent-color: #d2a64a;
  cursor: pointer;
}

.custom-audio-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.audio-rewind-btn,
.audio-forward-btn,
.audio-speed-btn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.audio-rewind-btn:active,
.audio-forward-btn:active,
.audio-speed-btn:active,
.audio-play-btn:active {
  transform: scale(0.96);
}
/*              */

/* =========================================================
   PLAYER AUDIO CUSTOM - SOLO MODALITÀ RIPRODUZIONE ATTIVA
========================================================= */

.active-audio-player {
  width: 100%;
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(214, 171, 78, 0.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(8, 8, 8, 0.96);
  box-shadow: 0 18px 45px rgba(0,0,0,0.42);
  color: #fff;
}

.active-audio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.active-audio-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.active-audio-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(214, 171, 78, 0.82);
  background: rgba(214, 171, 78, 0.11);
  color: #d6ab4e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-audio-icon svg {
  width: 23px;
  height: 23px;
}

.active-audio-title {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
}

.active-audio-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,0.66);
}

.active-audio-collapse {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 0;
  background: transparent;
  color: #d6ab4e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.active-audio-bars {
  height: 54px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  margin: 6px 0 12px;
}

.active-audio-bars span {
  display: block;
  width: 4px;
  min-width: 4px;
  height: var(--bar-height, 18px);
  border-radius: 999px;
  background: rgba(214, 171, 78, 0.24);
  transition: background 0.12s linear, opacity 0.12s linear;
}

.active-audio-bars span.is-active {
  background: #d6ab4e;
  opacity: 1;
}

.active-audio-progress-row {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.active-audio-time {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
}

.active-audio-time.end {
  text-align: right;
}

.active-audio-range {
  width: 100%;
  accent-color: #d6ab4e;
  cursor: pointer;
}

.active-audio-controls {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 18px;
}

.active-audio-skip {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.055);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.active-audio-main {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  background: #d6ab4e;
  color: #111;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-audio-speed-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.active-audio-speed {
  min-width: 70px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.17);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.active-audio-skip:active,
.active-audio-main:active,
.active-audio-speed:active,
.active-audio-collapse:active {
  transform: scale(0.96);
}

@media (max-width: 480px) {
  .active-audio-player {
    padding: 16px;
    border-radius: 20px;
  }

  .active-audio-bars {
    height: 48px;
  }

  .active-audio-main {
    width: 66px;
    height: 66px;
  }
}

/* =========================================================
   AUDIO ACTIVE VIEW - PLAYER CUSTOM
   Stato iniziale invariato: questi stili valgono solo
   quando la card ha data-view="audio-active"
========================================================= */

.media-card-v3[data-view="audio-active"] #textBox {
  display: none;
}

.media-card-v3[data-view="audio-active"] .btn-container {
  display: none;
}

.media-card-v3[data-view="audio-active"] #audioPlayerContainer {
  display: block;
}

.active-audio-player {
  width: 100%;
  margin-top: 20px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(214, 171, 78, 0.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(8, 8, 8, 0.96);
  box-shadow: 0 18px 45px rgba(0,0,0,0.42);
  color: #fff;
}

.active-audio-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.active-audio-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.active-audio-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(214, 171, 78, 0.82);
  background: rgba(214, 171, 78, 0.11);
  color: #d6ab4e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-audio-icon .slm-icon,
.active-audio-icon svg {
  width: 23px;
  height: 23px;
}

.active-audio-title {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
}

.active-audio-subtitle {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,0.66);
}

.active-audio-collapse {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 0;
  background: transparent;
  color: #d6ab4e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.active-audio-bars {
  height: 54px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  margin: 6px 0 12px;
}

.active-audio-bars span {
  display: block;
  width: 4px;
  min-width: 4px;
  height: var(--bar-height, 18px);
  border-radius: 999px;
  background: rgba(214, 171, 78, 0.24);
  transition: background 0.12s linear, opacity 0.12s linear;
}

.active-audio-bars span.is-active {
  background: #d6ab4e;
  opacity: 1;
}

.active-audio-time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.active-audio-current,
.active-audio-duration {
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
}

.active-audio-range {
  width: 100%;
  accent-color: #d6ab4e;
  cursor: pointer;
  margin-bottom: 18px;
}

.active-audio-controls {
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
  gap: 18px;
}

.active-audio-skip {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.055);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.active-audio-main {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  background: #d6ab4e;
  color: #111;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-audio-speed-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.active-audio-speed {
  min-width: 70px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.17);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.88);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.active-audio-skip:active,
.active-audio-main:active,
.active-audio-speed:active,
.active-audio-collapse:active {
  transform: scale(0.96);
}

@media (max-width: 480px) {
  .active-audio-player {
    padding: 16px;
    border-radius: 20px;
  }

  .active-audio-bars {
    height: 48px;
  }

  .active-audio-main {
    width: 66px;
    height: 66px;
  }
}

.active-audio-main-icon,
.active-audio-main-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.active-audio-main {
  font-family: inherit;
  line-height: 1;
}

.active-audio-skip {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.skip-symbol {
  font-size: 16px;
  line-height: 1;
}

/* modalità discreta */
/* =========================================================
   MODALITÀ ASCOLTO DISCRETO
========================================================= */

.active-audio-discreet-row {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.active-audio-discreet {
  border-radius: 999px;
  border: 1px solid rgba(214, 171, 78, 0.45);
  background: rgba(214, 171, 78, 0.08);
  color: #d6ab4e;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.active-audio-discreet.is-active {
  background: rgba(214, 171, 78, 0.22);
  border-color: rgba(214, 171, 78, 0.9);
  color: #ffd36a;
}

.active-audio-discreet-hint {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(214, 171, 78, 0.10);
  border: 1px solid rgba(214, 171, 78, 0.32);
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  line-height: 1.35;
}

.active-audio-player.is-discreet {
  background:
    linear-gradient(180deg, rgba(214,171,78,0.055), rgba(255,255,255,0.01)),
    rgba(3, 3, 3, 0.98);
}

.active-audio-player.is-discreet .active-audio-discreet-hint {
  display: block;
}

.active-audio-player.is-discreet .active-audio-bars span:not(.is-active) {
  background: rgba(214, 171, 78, 0.14);
}

.active-audio-player.is-discreet .active-audio-title::after {
  content: " · ascolto discreto";
  color: #d6ab4e;
  font-weight: 700;
}

.active-audio-discreet-title {
  display: block;
  margin-bottom: 4px;
  color: #ffd36a;
  font-size: 13px;
}

.active-audio-discreet-message {
  display: block;
}

/* =========================================================
   FEEDBACK SCHEDA CONTENUTO
   ========================================================= */

.box-feedback-scheda {
  margin-top: 20px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(241, 196, 85, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(241, 196, 85, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}

.feedback-domanda {
  margin: 0 0 6px 0;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
  font-weight: 700;
}

.feedback-sottotitolo {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.62);
}

.feedback-azioni {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feedback-btn {
  min-height: 48px;
  border: 1px solid rgba(241, 196, 85, 0.34);
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  color: rgba(255,255,255,0.94);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}

.feedback-btn:active {
  transform: scale(0.97);
}

.feedback-btn-utile,
.feedback-btn-non-utile {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.16);
}

.feedback-btn-utile .feedback-icona,
.feedback-btn-non-utile .feedback-icona {
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.72);
}

.feedback-icona {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.28);
  color: #f1c455;
  font-size: 15px;
  line-height: 1;
}

.feedback-testo-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

.feedback-testo-btn small {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.58);
}

.feedback-messaggio {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
}

.feedback-messaggio.ok {
  color: #f1c455;
  border-color: rgba(241,196,85,0.28);
  background: rgba(241,196,85,0.08);
}

.feedback-messaggio.errore {
  color: #ffb4b4;
  border-color: rgba(255,100,100,0.22);
  background: rgba(255,80,80,0.08);
}

.box-feedback-scheda.feedback-inviato .feedback-btn {
  opacity: 0.45;
  pointer-events: none;
}

.box-feedback-scheda.feedback-inviato .feedback-btn.feedback-selezionato {
  opacity: 1;
  border-color: rgba(241,196,85,0.85);
  background: linear-gradient(180deg, rgba(241,196,85,0.26), rgba(241,196,85,0.10));
}

@media (max-width: 380px) {
  .feedback-azioni {
    grid-template-columns: 1fr;
  }

  .feedback-btn {
    justify-content: flex-start;
    padding-left: 12px;
  }
}