*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#09090a;--panel:#111113;--line:rgba(255,255,255,.10);--text:#f5f5f3;--muted:#8d8d92;--red:#d10d12;--gold:#fcb900}
html{background:var(--bg)}
body{min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(190,12,18,.16),transparent 34rem),linear-gradient(180deg,#0b0b0d,#070708);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);mix-blend-mode:overlay}
.site-header{border-bottom:1px solid var(--line);background:rgba(9,9,10,.76);backdrop-filter:blur(18px)}
.header-shell{width:min(1180px,calc(100% - 48px));margin:auto;min-height:154px;display:grid;grid-template-columns:100px 1fr auto;align-items:center;gap:32px}
.logo{width:78px;height:auto}.header-copy{text-align:left}.eyebrow{margin-bottom:8px;color:var(--red);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.header-copy h1{font-size:clamp(34px,5vw,66px);line-height:.95;letter-spacing:-.055em;font-weight:850}.header-subtitle{margin-top:11px;font-size:14px;color:var(--muted)}
.primary-button{border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0)),var(--red);color:#fff;min-height:48px;padding:0 18px 0 20px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 12px 34px rgba(209,13,18,.2);transition:.18s ease}
.primary-button:hover{transform:translateY(-2px);background:#e31319}.primary-button:disabled{opacity:.45;cursor:wait}.button-icon{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.22);display:inline-flex;align-items:center;justify-content:center}
main{width:min(1280px,calc(100% - 32px));margin:auto}
.packStage{position:relative;min-height:calc(100svh - 155px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 16px 30px;isolation:isolate;transition:min-height .55s ease}
.pack-glow{position:absolute;width:min(76vw,820px);height:min(76vw,820px);border-radius:50%;background:radial-gradient(circle,rgba(209,13,18,.25),rgba(209,13,18,.08) 38%,transparent 72%);filter:blur(38px);z-index:-1}
.pack{position:relative;height:clamp(520px,calc(100svh - 260px),880px);width:auto;aspect-ratio:557/943;max-width:92vw;cursor:pointer;user-select:none;transform-origin:center 88%;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .55s ease,filter .35s ease;z-index:3}
.pack-image{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 32px 54px rgba(0,0,0,.62)) drop-shadow(0 0 34px rgba(209,13,18,.22))}
.pack-sheen{position:absolute;inset:8% 16%;border-radius:18px;pointer-events:none;opacity:.55;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.15) 47%,transparent 59%);background-size:240% 100%;animation:packSheen 3.4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes packSheen{0%,55%{background-position:150% 0}100%{background-position:-80% 0}}
.pack:hover{transform:translateY(-7px) rotate(-1deg) scale(1.015)}
.pack.preparing{animation:packReady 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes packReady{0%{transform:scale(.95);opacity:0;filter:blur(4px)}18%{transform:scale(1.025);opacity:1;filter:blur(0)}75%{transform:scale(1);opacity:1}100%{transform:scale(1.015);opacity:1}}
.pack.torn{animation:packOpen .68s cubic-bezier(.55,.05,.2,1) forwards}
@keyframes packOpen{0%{transform:scale(1.015);opacity:1;filter:brightness(1)}26%{transform:scale(.96) rotate(-1deg);filter:brightness(1.5)}52%{transform:scale(1.07) rotate(1deg);filter:brightness(1.9)}100%{transform:scale(.82) translateY(-26px);opacity:0;filter:brightness(2.2) blur(5px)}}
.pack-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:8px;color:#b3b3b7;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:opacity .25s ease;white-space:nowrap;z-index:5}
.hint-dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(209,13,18,.65);animation:pulseDot 1.6s ease infinite}@keyframes pulseDot{50%{transform:scale(1.65);opacity:.45}}
.pack-spark{position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;opacity:0;pointer-events:none;z-index:10;box-shadow:0 0 10px currentColor}
.pack-spark.go{animation:packBurst .9s cubic-bezier(.16,.84,.44,1) forwards}@keyframes packBurst{0%{transform:translate(0,0) scale(.6);opacity:0}18%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.05);opacity:0}}
.container,.selectedCards{display:flex;flex-direction:column;align-items:center}.container{position:absolute;inset:0;display:none;align-items:center;justify-content:center;margin:0;padding:42px 0 34px;z-index:4;pointer-events:none}.container.is-visible{display:flex}.container.is-interactive{pointer-events:auto}.packStage.cards-visible{min-height:max(calc(100svh - 155px),980px)}.row{display:flex;justify-content:center;gap:18px;margin-bottom:24px}
.card{perspective:1000px;width:329px;height:450px;position:relative;margin:0;border-radius:16px}.card-inner{width:100%;height:100%;transition:transform .65s cubic-bezier(.2,.75,.25,1);transform-style:preserve-3d;border-radius:inherit}.card.is-flipped .card-inner{transform:rotateY(180deg)}
.card-front,.card-back,.card-pres{width:100%;height:100%;position:absolute;backface-visibility:hidden;border-radius:inherit;overflow:hidden;background:#111;display:flex;align-items:center;justify-content:center}.card-back{transform:rotateY(180deg)}.card img{max-width:100%;max-height:100%;object-fit:contain;border-radius:inherit}
#cardContainer .row>.card{opacity:0;will-change:transform,opacity;transition:transform .78s cubic-bezier(.16,.84,.28,1),opacity .26s ease,filter .4s ease;filter:brightness(1.35) blur(1px)}#cardContainer .row>.card.in{opacity:1;filter:brightness(1) blur(0)}
.card.rare .card-inner{box-shadow:0 0 0 1px rgba(252,185,0,.7),0 0 28px rgba(252,185,0,.18)}.rare-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:5;background:#f3f0e8;color:#111;border:1px solid rgba(252,185,0,.8);padding:5px 10px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:0}.card.rare.in .rare-tag{opacity:1}
.selectedCards{width:min(980px,100%);margin:28px auto 0}.selection-title,#titreselection{display:none;width:100%;margin-bottom:10px;color:#7f7f84;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center}.selection-row,#rowS{display:none;width:100%;justify-content:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.selectedCards img{width:58px;height:80px;object-fit:cover;border-radius:8px;margin:0 3px}
.zoomable-image{transition:transform .22s ease;cursor:pointer}.zoomable-image:hover{transform:scale(2.4);z-index:20}
.select-button{position:absolute;z-index:10;bottom:10px;left:50%;transform:translateX(-50%) rotateY(180deg);display:none;border:1px solid rgba(255,255,255,.16);background:rgba(8,8,9,.76);color:#fff;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.card.is-flipped .select-button{display:block}
.card-back:before,.card-back:after,.card-pres:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2}.card-back:before{background:linear-gradient(115deg,transparent,rgba(0,231,255,.8) 30%,rgba(255,0,231,.8) 70%,transparent);background-size:300% 300%;mix-blend-mode:color-dodge;animation:holoGradient 10s ease infinite}.card-back:after,.card-pres:after{background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");background-size:100%;background-position:center;mix-blend-mode:color-dodge;animation:holoSparkle 20s ease infinite}
@keyframes holoSparkle{0%,100%{opacity:.12}12%{opacity:.27}70%{opacity:.1}}@keyframes holoGradient{3%{opacity:0}7%{opacity:.14;background-position:0 0}11%{opacity:0;background-position:100% 100%}55%{opacity:.08}70%{opacity:0}95%{opacity:.08}}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;max-height:80vh;overflow-y:auto;width:min(760px,calc(100% - 32px));padding:20px;background:#101012;color:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}.lignebtn{display:flex;justify-content:center;gap:8px}.close-button,.view-selection-button,#viewSelectionButton{border:1px solid var(--line);background:#1a1a1d;color:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.footer{border-top:1px solid var(--line);background:#080809}.footer-inner{width:min(1180px,calc(100% - 48px));min-height:84px;margin:auto;display:flex;align-items:center;justify-content:space-between}.footer-brand{font-weight:850}.social-links{display:flex;gap:18px}.social-link{color:#a0a0a5;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.social-link:hover{color:#fff}
@media(max-width:900px){.header-shell{grid-template-columns:70px 1fr;gap:20px;padding:24px 0}.primary-button{grid-column:1/-1;justify-self:center}.logo{width:62px}.pack{height:min(calc(100svh - 285px),680px);min-height:360px;width:auto}.row{flex-wrap:wrap}.packStage.cards-visible{min-height:max(calc(100svh - 220px),980px)}}
@media(max-width:560px){.header-shell{width:calc(100% - 28px);grid-template-columns:1fr;text-align:center}.logo{margin:auto}.header-copy{text-align:center}.header-copy h1{font-size:42px}.packStage{min-height:calc(100svh - 285px);padding:18px 8px 26px}.pack{height:min(calc(100svh - 330px),540px);min-height:300px;width:auto;max-width:92vw}.packStage.cards-visible{min-height:620px}.container{padding:16px 0}.card{width:175px;height:239px}.footer-inner{width:calc(100% - 28px);flex-direction:column;justify-content:center;gap:12px}}


.packStage::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:240px;
    height:160px;
    transform:translate(-50%,-5%);
    background:radial-gradient(ellipse at center,rgba(255,255,255,.20),rgba(209,13,18,.10) 34%,transparent 70%);
    filter:blur(20px);
    opacity:0;
    pointer-events:none;
    z-index:3;
}
.packStage.ejecting::after{
    animation:ejectGlow 1.6s ease-out forwards;
}
@keyframes ejectGlow{
    0%{opacity:0;transform:translate(-50%,10%) scale(.5)}
    18%{opacity:1}
    70%{opacity:.45;transform:translate(-50%,-42%) scale(1.3)}
    100%{opacity:0;transform:translate(-50%,-70%) scale(1.55)}
}

/* Mobile/tablet : le pack reste aussi grand que possible sans sortir de l'écran. */
@media(max-width:900px){
    .pack{height:clamp(420px,calc(100svh - 315px),720px);min-height:0;width:auto}
}
@media(max-width:560px){
    .pack{height:clamp(320px,calc(100svh - 360px),560px);min-height:0;width:auto;max-width:94vw}
    .pack-hint{bottom:10px;font-size:9px;letter-spacing:.11em}
}


/* =========================================================
   OUVERTURE INTERACTIVE DU PACK — souris / tactile / stylet
   ========================================================= */

/* Le sachet entier conserve sa taille maximale, mais son haut devient une vraie zone de déchirure. */
.pack {
    --tear-progress: 0%;
    overflow: visible;
    cursor: default;
}

.pack-body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.tear-strip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8.91%; /* 84 / 943 : rapport exact de l'image fournie */
    z-index: 8;
    transform-origin: 8% 50%;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.tear-strip-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter:
        drop-shadow(0 7px 9px rgba(0,0,0,.42))
        drop-shadow(0 0 10px rgba(209,13,18,.20));
}

.tear-zone {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    width: 100%;
    height: 13%;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
    outline: none;
}

.tear-zone:focus-visible {
    outline: 2px solid rgba(255,255,255,.85);
    outline-offset: 7px;
    border-radius: 8px;
}

/* Trait qui matérialise le geste de déchirure. */
.tear-progress-line {
    position: absolute;
    left: 2.5%;
    top: 8.6%;
    width: var(--tear-progress);
    max-width: 95%;
    height: 3px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.28),
            #fff 78%,
            rgba(252,185,0,.95));
    box-shadow:
        0 0 7px rgba(255,255,255,.72),
        0 0 14px rgba(252,185,0,.38);
    opacity: .92;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Petit repère que la souris / le doigt pousse horizontalement. */
.tear-handle {
    position: absolute;
    left: calc(2.5% + var(--tear-progress));
    top: 8.6%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,245,243,.96);
    color: #111;
    border: 1px solid rgba(0,0,0,.18);
    box-shadow:
        0 6px 18px rgba(0,0,0,.34),
        0 0 0 5px rgba(255,255,255,.08);
    font-size: 18px;
    font-weight: 900;
    transition: transform .16s ease, opacity .16s ease;
    pointer-events: none;
}

.tear-zone.is-dragging .tear-handle {
    transform: translate(-50%, -50%) scale(1.12);
}

/* La languette suit légèrement le geste avant de partir. */
.pack.is-tearing .tear-strip {
    transform:
        translateX(calc(var(--tear-ratio, 0) * 8px))
        rotate(calc(var(--tear-ratio, 0) * -1.4deg));
}

/* Déchirure validée : la bande supérieure s'arrache comme un morceau de plastique métallisé. */
.pack.is-open .tear-strip {
    animation: tearStripOff .78s cubic-bezier(.18,.78,.18,1) forwards;
}

@keyframes tearStripOff {
    0% {
        transform: translate(0,0) rotate(0);
        opacity: 1;
        filter: brightness(1);
    }
    24% {
        transform: translate(18px,-6px) rotate(3deg);
        opacity: 1;
        filter: brightness(1.35);
    }
    100% {
        transform: translate(125%,-92px) rotate(19deg);
        opacity: 0;
        filter: brightness(1.65) blur(1.5px);
    }
}

/* Le corps du sachet reste un instant en place : les cartes en sortent réellement. */
.pack.is-open .pack-body {
    animation: openedPackBody 1.8s ease forwards;
}

@keyframes openedPackBody {
    0%, 46% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter:
            drop-shadow(0 32px 54px rgba(0,0,0,.62))
            drop-shadow(0 0 34px rgba(209,13,18,.22));
    }
    100% {
        transform: translateY(34px) scale(.94);
        opacity: 0;
        filter: blur(3px);
    }
}

.pack.is-open .pack-sheen {
    opacity: 0;
    transition: opacity .2s ease;
}

.pack.is-open .tear-zone {
    pointer-events: none;
}

.pack-hint.is-ready .hint-dot {
    background: #fff;
    box-shadow: 0 0 14px rgba(255,255,255,.55);
}

.tear-fallback {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 7;
    appearance: none;
    border: 0;
    background: transparent;
    color: #66666c;
    font: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 12px;
    transition: color .18s ease;
}

.tear-fallback:hover,
.tear-fallback:focus-visible {
    color: #c5c5c9;
}

.packStage.ejecting .tear-fallback,
.packStage.cards-visible .tear-fallback {
    opacity: 0;
    pointer-events: none;
}

/* Animation "la carte sort physiquement du pack". */
#cardContainer .row > .card {
    transform-origin: center center;
}

#cardContainer .row > .card.is-ejecting {
    z-index: 20;
}

/* Sur tactile on grossit légèrement la poignée. */
@media (pointer: coarse) {
    .tear-handle {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }

    .tear-zone {
        height: 16%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tear-strip,
    .pack-body,
    #cardContainer .row > .card {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}



/* =========================================================
   PAGE DE PARTAGE — même direction visuelle que l'unboxing
   ========================================================= */

.share-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(190,12,18,.14), transparent 34rem),
        linear-gradient(180deg, #0b0b0d 0%, #070708 100%);
}

.share-primary-link {
    text-decoration: none;
}

.share-main {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 58px 0 96px;
}

.share-intro {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.share-kicker {
    color: var(--red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.share-intro h2,
.share-cta h2 {
    font-size: clamp(34px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -.052em;
    font-weight: 850;
}

.share-reference {
    margin-top: 14px;
    color: #626267;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .08em;
    word-break: break-all;
}

.share-status {
    min-height: 22px;
    margin-bottom: 24px;
    text-align: center;
}

.share-count {
    color: #77777c;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.share-warning {
    margin-top: 8px;
    color: #9b6e6f;
    font-size: 10px;
}

.share-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    align-items: start;
    width: 100%;
}

.shared-card {
    min-width: 0;
    opacity: 0;
    transform: translateY(22px);
    animation: sharedCardIn .62s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--share-index) * 90ms);
}

@keyframes sharedCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shared-card-frame {
    position: relative;
    aspect-ratio: 329 / 450;
    border-radius: 18px;
    overflow: hidden;
    background: #101012;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
        0 18px 45px rgba(0,0,0,.34),
        0 0 0 1px rgba(209,13,18,.05);
}

.shared-card-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg,
            transparent 0 34%,
            rgba(255,255,255,.08) 45%,
            transparent 57%);
    mix-blend-mode: screen;
    opacity: .34;
}

.shared-card-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0c0c0e;
}

.shared-card-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-top: 10px;
    padding: 0 2px;
}

.shared-card-code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.shared-card-label {
    min-width: 0;
    color: #77777c;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.share-cta {
    margin: 88px auto 0;
    max-width: 820px;
    padding: 44px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 28px;
    background:
        radial-gradient(circle at 80% 10%, rgba(209,13,18,.12), transparent 38%),
        rgba(255,255,255,.025);
    text-align: left;
}

.share-cta p:not(.eyebrow) {
    max-width: 620px;
    margin-top: 14px;
    color: #8c8c91;
    font-size: 14px;
    line-height: 1.6;
}

.share-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.secondary-link {
    color: #b4b4b8;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.secondary-link:hover {
    color: #fff;
}

.share-message {
    max-width: 680px;
    margin: 20px auto 48px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    background: rgba(255,255,255,.025);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-message strong {
    font-size: 17px;
}

.share-message span {
    color: #89898e;
    font-size: 13px;
}

.share-message a {
    margin-top: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em;
}

@media (max-width: 760px) {
    .share-main {
        padding-top: 40px;
    }

    .share-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .share-cta {
        margin-top: 58px;
        padding: 28px 22px;
    }
}

@media (max-width: 430px) {
    .share-cards {
        grid-template-columns: 1fr;
    }

    .shared-card {
        width: min(100%, 330px);
        justify-self: center;
    }
}



/* =========================================================
   PAGE DE PARTAGE — cartes compactes, alignées comme l'index
   ========================================================= */

.share-intro {
    margin-bottom: 24px;
}

.share-reference,
.shared-card-meta,
.shared-card-code,
.shared-card-label {
    display: none !important;
}

.share-cards {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    overflow-x: auto;
    padding: 10px 6px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

.share-cards::-webkit-scrollbar {
    height: 6px;
}

.share-cards::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}

.shared-card {
    flex: 0 0 auto;
    width: clamp(142px, 15vw, 190px);
    opacity: 0;
    transform: translateY(20px) scale(.97);
    animation: sharedCardInCompact .58s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--share-index) * 80ms);
}

@keyframes sharedCardInCompact {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shared-card-frame {
    width: 100%;
    aspect-ratio: 329 / 450;
    border-radius: 14px;
    overflow: hidden;
    background: #101012;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.shared-card-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #0c0c0e;
}

@media (hover:hover) and (pointer:fine) {
    .shared-card-frame:hover {
        transform: translateY(-5px);
        border-color: rgba(209,13,18,.38);
        box-shadow: 0 20px 42px rgba(0,0,0,.38);
    }
}

@media (max-width: 760px) {
    .share-cards {
        justify-content: flex-start;
        gap: 12px;
        padding-inline: 2px;
    }

    .shared-card {
        width: 150px;
    }
}

@media (max-width: 430px) {
    .share-cards {
        display: flex;
        grid-template-columns: none;
    }

    .shared-card {
        width: 132px;
        justify-self: auto;
    }
}