/* =========================================================
   Autel d'invocation — vue verticale dédiée
   ========================================================= */
body.summon-panel-open {
    overflow: hidden;
}

.summonSideButton {
    position: relative;
    width: 50px;
    max-width: 50px;
    height: 54px;
    margin: 0;
    padding: 3px;
    border: 1px solid rgba(255, 226, 132, .72);
    border-radius: 8px 0 0 8px;
    background: linear-gradient(180deg, rgba(28, 74, 112, .94), rgba(6, 31, 57, .97));
    box-shadow: 0 6px 15px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .14), 0 0 12px rgba(255, 204, 77, .12);
    cursor: pointer;
    overflow: visible;
}

.summonSideButton img {
    display: block;
    width: auto;
    max-width: 44px;
    height: auto;
    max-height: 44px;
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .62));
}

.summonSideButtonBadge {
    position: absolute;
    top: -7px;
    left: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #fff2bc;
    border-radius: 999px;
    background: #bb1920;
    color: #fff;
    font: 900 9px/1 "Poppins", sans-serif;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .58);
}

.summonSideButton:hover,
.summonSideButton:focus-visible {
    outline: 0;
    transform: translateX(-2px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .18), 0 0 17px rgba(255, 209, 84, .26);
}

.summonSideButton:active {
    transform: translateX(-1px) scale(.96);
}

.summonPanel {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: none;
    font-family: "Poppins", sans-serif;
}

.summonPanel.is-open {
    display: block;
}

.summonPanelBackdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 5, 14, .76);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.summonPanelDialog {
    --summon-accent: 255, 175, 52;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(calc(100% - 12px), 500px);
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    overflow: hidden;
    border: 1px solid rgba(187, 219, 246, .58);
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--summon-accent), .15), transparent 42%),
        linear-gradient(180deg, #0d2947 0%, #071d34 54%, #071d34 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .75), inset 0 1px rgba(255, 255, 255, .09);
    color: #fff;
    transform: translate(-50%, -50%);
}

.summonPanelHeader {
    position: relative;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 5px 8px 5px 12px;
    border-bottom: 1px solid rgba(202, 227, 248, .22);
    background: linear-gradient(180deg, rgba(22, 59, 91, .97), rgba(9, 34, 60, .96));
}

.summonPanelTitle {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.summonPanelTitle img {
    width: 36px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
}

.summonPanelHeader small {
    display: block;
    color: #8fdcff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
}

.summonPanelHeader strong {
    display: block;
    margin-top: 0;
    color: #fff5d4;
    font-size: 20px;
    line-height: 1;
}

.summonPanelClose {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(213, 235, 251, .28);
    border-radius: 11px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 20px;
}

.summonPanelBody {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

.summonStage {
    --summon-accent: 255, 175, 52;
    /* Centre visuel du modèle 3D en mode cinématique : la pierre est
       asymétrique et son pivot perceptif est plus bas que le centre du canvas. */
    --summon-proc-origin-y: 64%;
    position: relative;
    display: grid;
    grid-template-rows: clamp(118px, 15dvh, 145px) auto;
    gap: 1px;
    padding: 4px 8px 5px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 48%, rgba(var(--summon-accent), .16) 0%, rgba(var(--summon-accent), .06) 38%, rgba(3, 12, 30, .28) 70%, rgba(3, 12, 30, .50) 100%),
        linear-gradient(180deg, rgba(3, 13, 31, .44), rgba(3, 11, 28, .58)),
        url("/img/ui/summon/gacha-bg.png") center 57% / cover no-repeat,
        #071d34;
}

.summonStage[data-tier="small"] {
    --summon-accent: 85, 227, 127;
}

.summonStage[data-tier="medium"] {
    --summon-accent: 255, 175, 52;
}

.summonStage[data-tier="legendary"] {
    --summon-accent: 183, 112, 255;
}

.summonStage[data-tier="supreme"] {
    --summon-accent: 255, 226, 120;
}

.summonStage[data-tier="duality_minor"] {
    --summon-accent: 221, 225, 238;
}

.summonStage[data-tier="duality"] {
    --summon-accent: 198, 165, 255;
}

/* Couleurs du halo radial de proc. Elles restent liées au type de pierre,
   même pendant le proc où --summon-accent passe temporairement au jaune. */
.summonStage {
    --summon-proc-ray-a: 255, 135, 25;
    --summon-proc-ray-b: 225, 55, 0;
}

.summonStage[data-tier="small"] {
    --summon-proc-ray-a: 85, 227, 127;
    --summon-proc-ray-b: 22, 145, 67;
}

.summonStage[data-tier="medium"] {
    --summon-proc-ray-a: 255, 135, 25;
    --summon-proc-ray-b: 225, 55, 0;
}

.summonStage[data-tier="legendary"] {
    --summon-proc-ray-a: 190, 116, 255;
    --summon-proc-ray-b: 109, 53, 220;
}

.summonStage[data-tier="fire"] {
    --summon-proc-ray-a: 255, 107, 42;
    --summon-proc-ray-b: 214, 48, 12;
}

.summonStage[data-tier="water"] {
    --summon-proc-ray-a: 88, 168, 255;
    --summon-proc-ray-b: 42, 92, 232;
}

.summonStage[data-tier="air"] {
    --summon-proc-ray-a: 127, 244, 239;
    --summon-proc-ray-b: 29, 177, 211;
}

.summonStage[data-tier="earth"] {
    --summon-proc-ray-a: 115, 211, 71;
    --summon-proc-ray-b: 49, 133, 38;
}

.summonStage[data-tier="duality_minor"] {
    --summon-proc-ray-a: 235, 240, 255;
    --summon-proc-ray-b: 145, 160, 202;
}

.summonStage[data-tier="duality"] {
    --summon-proc-ray-a: 198, 165, 255;
    --summon-proc-ray-b: 105, 70, 220;
}

.summonStage[data-tier="supreme"] {
    --summon-proc-ray-a: 255, 226, 120;
    --summon-proc-ray-b: 255, 151, 28;
}

.summonStage.is-summoning.has-proc {
    --summon-accent: 255, 221, 69;
}

/* Le résultat x10 a besoin de davantage de hauteur que l'écran d'ouverture
   simple : ses médaillons et leurs étoiles débordent volontairement de leur
   noyau. On agrandit donc réellement le stage pendant l'affichage du batch. */
.summonStage.is-batch-result {
    min-height: 270px;
}

.summonRatesInfoButton {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    background: rgba(7, 29, 52, .78);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .12), 0 0 8px rgba(143, 220, 255, .10);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.summonRatesInfoButton:hover,
.summonRatesInfoButton:focus-visible {
    outline: 0;
    border-color: #fff;
    background: rgba(24, 63, 96, .92);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .16), 0 0 10px rgba(143, 220, 255, .22);
}

.summonRatesInfoButton[aria-expanded="true"] {
    border-color: #fff;
    background: #f4f8fb;
    color: #0b2943;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .34), 0 0 10px rgba(255, 255, 255, .18);
}

.summonRatesPopover {
    position: absolute;
    top: 6px;
    right: 44px;
    z-index: 11;
    width: min(190px, calc(100% - 58px));
    padding: 6px;
    border: 1px solid rgba(213, 235, 251, .38);
    border-radius: 10px;
    background: rgba(5, 22, 39, .96);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .06);
    color: #fff;
    pointer-events: none;
    user-select: none;
}

.summonRatesPopover[hidden] {
    display: none;
}

.summonRatesPopoverTitle {
    display: block;
    margin: 0 2px 5px;
    color: #e8f4fb;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .25px;
}

.summonRates {
    display: grid;
    gap: 3px;
}

.summonRateRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 26px;
    padding: 4px 7px;
    border-radius: 5px;
    background: rgba(14, 43, 66, .92);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.summonRateRow strong {
    color: #ffd44c;
    letter-spacing: -1px;
}

.summonRateRow span {
    color: #fff;
    font-weight: 900;
}

.summonRatesUnavailable {
    padding: 7px;
    border-radius: 5px;
    background: rgba(14, 43, 66, .92);
    color: #d8d8d8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.summonStoneFocus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    isolation: isolate;
    overflow: visible;
}

.summonProcRayClip {
    position: absolute;
    inset: -24px -72px 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s linear;
}

.summonProcRayPlane {
    position: absolute;
    inset: 0;
    transform-origin: 50% var(--summon-proc-origin-y);
    will-change: transform;
}

.summonProcRays {
    position: absolute;
    left: 50%;
    top: var(--summon-proc-origin-y);
    width: 0;
    height: 0;
}

/*
 * Proc premium : faisceaux volontairement irréguliers.
 * Chaque rayon possède une nappe large + deux strates internes plus fines.
 * Les groupes et les grands vides évitent l'effet "roue CSS" trop uniforme.
 */
.summonProcRay {
    --a: 0deg;
    --len: 340px;
    --w: 18px;
    --o: .48;
    --mid-o: .48;
    --accent-o: .24;
    position: absolute;
    left: 0;
    top: 0;
    width: min(var(--len), 78vw);
    height: var(--w);
    transform-origin: 0 50%;
    transform: rotate(var(--a)) translateX(2px);
    /* Tous les faisceaux partent du même centre. La base garde désormais
       ~22 % de la largeur de sortie au lieu d'une pointe quasi nulle. */
    clip-path: polygon(0 39%, 100% 0, 100% 100%, 0 61%);
    background: linear-gradient(
        90deg,
        rgba(var(--summon-proc-ray-a), .10) 0%,
        rgba(var(--summon-proc-ray-a), var(--o)) 18%,
        rgba(var(--summon-proc-ray-a), var(--o)) 42%,
        rgba(var(--summon-proc-ray-b), .16) 68%,
        rgba(var(--summon-proc-ray-b), 0) 100%
    );
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, #000 7%, #000 54%, rgba(0,0,0,.76) 73%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.30) 0%, #000 7%, #000 54%, rgba(0,0,0,.76) 73%, transparent 100%);
    filter:
        blur(.45px)
        drop-shadow(0 0 4px rgba(var(--summon-proc-ray-a), .22))
        drop-shadow(0 0 11px rgba(var(--summon-proc-ray-b), .11));
    will-change: transform, opacity;
}

.summonProcRay::before,
.summonProcRay::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Bande intermédiaire : plus dense et strictement concentrique au rayon. */
.summonProcRay::before {
    height: 64%;
    transform: translateY(-50%);
    clip-path: polygon(0 35%, 100% 3%, 100% 97%, 0 65%);
    background: linear-gradient(
        90deg,
        rgba(var(--summon-proc-ray-a), .08) 0%,
        rgba(var(--summon-proc-ray-a), var(--mid-o)) 20%,
        rgba(var(--summon-proc-ray-a), var(--mid-o)) 48%,
        rgba(var(--summon-proc-ray-b), .13) 72%,
        transparent 100%
    );
}

/* Accent fin : même axe, base visible et sortie plus large. */
.summonProcRay::after {
    height: 28%;
    transform: translateY(-50%);
    clip-path: polygon(0 33%, 100% 7%, 100% 93%, 0 67%);
    background: linear-gradient(
        90deg,
        rgba(var(--summon-proc-ray-a), .04) 0%,
        rgba(var(--summon-proc-ray-a), var(--accent-o)) 22%,
        rgba(var(--summon-proc-ray-a), var(--accent-o)) 52%,
        rgba(var(--summon-proc-ray-b), .07) 74%,
        transparent 100%
    );
}

/* Groupes de rayons : large/moyen/fin, puis vrais espaces vides. */
.summonProcRay.r1 {--a:4deg;   --len:360px;--w:36px;--o:.46;--mid-o:.42;--accent-o:.15;--d:2.45s;--delay:.10s}
.summonProcRay.r2 {--a:16deg;  --len:382px;--w:72px;--o:.31;--mid-o:.44;--accent-o:.12;--d:2.95s;--delay:.62s}
.summonProcRay.r3 {--a:24deg;  --len:342px;--w:14px; --o:.74;--mid-o:.56;--accent-o:.38;--d:2.10s;--delay:1.05s}

.summonProcRay.r4 {--a:47deg;  --len:348px;--w:32px;--o:.48;--mid-o:.46;--accent-o:.18;--d:2.60s;--delay:.30s}
.summonProcRay.r5 {--a:66deg;  --len:388px;--w:58px;--o:.33;--mid-o:.41;--accent-o:.11;--d:3.05s;--delay:.88s}
.summonProcRay.r6 {--a:80deg;  --len:332px;--w:16px; --o:.70;--mid-o:.52;--accent-o:.34;--d:2.18s;--delay:1.32s}

.summonProcRay.r7 {--a:121deg; --len:354px;--w:38px;--o:.44;--mid-o:.45;--accent-o:.16;--d:2.72s;--delay:.18s}
.summonProcRay.r8 {--a:137deg; --len:392px;--w:76px;--o:.27;--mid-o:.39;--accent-o:.10;--d:3.20s;--delay:.74s}
.summonProcRay.r9 {--a:151deg; --len:338px;--w:12px; --o:.76;--mid-o:.56;--accent-o:.40;--d:2.06s;--delay:1.18s}

.summonProcRay.r10{--a:188deg; --len:360px;--w:36px;--o:.45;--mid-o:.43;--accent-o:.16;--d:2.54s;--delay:.42s}
.summonProcRay.r11{--a:205deg; --len:386px;--w:62px;--o:.30;--mid-o:.42;--accent-o:.11;--d:3.10s;--delay:.96s}
.summonProcRay.r12{--a:223deg; --len:334px;--w:14px; --o:.73;--mid-o:.54;--accent-o:.36;--d:2.15s;--delay:1.40s}

.summonProcRay.r13{--a:256deg; --len:356px;--w:40px;--o:.42;--mid-o:.44;--accent-o:.15;--d:2.68s;--delay:.26s}
.summonProcRay.r14{--a:274deg; --len:394px;--w:70px;--o:.29;--mid-o:.40;--accent-o:.10;--d:3.16s;--delay:.82s}
.summonProcRay.r15{--a:298deg; --len:336px;--w:12px; --o:.77;--mid-o:.57;--accent-o:.42;--d:2.04s;--delay:1.24s}

.summonProcRay.r16{--a:323deg; --len:350px;--w:34px;--o:.46;--mid-o:.45;--accent-o:.17;--d:2.58s;--delay:.50s}
.summonProcRay.r17{--a:339deg; --len:384px;--w:56px;--o:.31;--mid-o:.41;--accent-o:.11;--d:3.00s;--delay:1.02s}

.summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRayClip {
    visibility: visible;
    opacity: 1;
}

/* Rotation écran volontairement horaire (sens des aiguilles d'une montre). */
.summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRayPlane {
    animation: summonProcRayClockwise 11.8s linear infinite;
}

.summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay {
    animation: summonProcRayBreathe var(--d, 2.6s) ease-in-out infinite var(--delay, 0s);
}

.summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay::before {
    animation: summonProcRayInnerPulse 2.35s ease-in-out infinite var(--delay, 0s);
}

.summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay::after {
    animation: summonProcRayAccentPulse 1.85s ease-in-out infinite var(--delay, 0s);
}

@keyframes summonProcRayClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes summonProcRayBreathe {
    0%, 100% {
        opacity: .46;
        transform: rotate(var(--a)) translateX(2px) scaleX(.88) scaleY(.90);
    }
    38% {
        opacity: 1;
        transform: rotate(var(--a)) translateX(2px) scaleX(1.04) scaleY(1.08);
    }
    68% {
        opacity: .64;
        transform: rotate(var(--a)) translateX(2px) scaleX(.96) scaleY(.96);
    }
}

@keyframes summonProcRayInnerPulse {
    0%, 100% { opacity: .54; }
    46% { opacity: 1; }
    72% { opacity: .68; }
}

@keyframes summonProcRayAccentPulse {
    0%, 100% { opacity: .34; }
    32% { opacity: .92; }
    58% { opacity: .54; }
}

.summonStoneGlow {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 0;
    width: min(38vw, 178px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--summon-accent), .32), rgba(var(--summon-accent), .10) 40%, transparent 74%);
    filter: blur(2px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: summonGlowIdle 2.8s ease-in-out infinite alternate;
}

.summonStone3DHost {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.summonStone3DHost[hidden] {
    display: none;
}

.summonStone3DCanvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.summonSelectedStone {
    position: relative;
    z-index: 2;
    display: block;
    width: min(26vw, 118px);
    max-height: 135px;
    object-fit: contain;
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .48)) drop-shadow(0 0 8px rgba(var(--summon-accent), .30));
    transform-origin: 50% 64%;
    animation: summonStoneIdle 2.6s ease-in-out infinite;
}

.summonStage.has-3d-preview .summonSelectedStone {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.summonFragmentStatus {
    position: static;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 4px;
    min-width: 88px;
    padding: 3px 6px;
    border: 1px solid rgba(208, 231, 247, .24);
    border-radius: 999px;
    background: rgba(0, 0, 0, .44);
    color: #d0e0e9;
    font-size: 9px;
    font-weight: 900;
}

.summonFragmentStatus img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.summonFragmentStatus strong {
    color: #fff;
    font-size: 12px;
}

.summonStageBottom {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 6px;
    transition: opacity .16s ease, transform .16s ease;
}

.summonError {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 8px;
    margin: 0 2px 1px;
    color: #ff9c9c;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.summonOpenButton {
    grid-column: 2;
    justify-self: center;
    width: max-content;
    min-width: 108px;
    min-height: 32px;
    margin: 0;
    padding: 5px 18px;
    border: 1px solid rgba(255, 232, 141, .90);
    border-radius: 9px;
    background: linear-gradient(180deg, #d3941d, #8d5709);
    box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 4px 11px rgba(0, 0, 0, .30), 0 0 12px rgba(var(--summon-accent), .12);
    color: #fffbe8;
    font: 900 13px/1 "Poppins", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .52);
}

.summonOpenButton:not(:disabled):hover,
.summonOpenButton:not(:disabled):focus-visible {
    outline: 0;
    filter: brightness(1.08);
}

.summonOpenButton:disabled {
    border-color: rgba(185, 202, 215, .25);
    background: linear-gradient(180deg, #475867, #273744);
    color: #91a4b3;
    box-shadow: none;
}

.summonAmountSwitch {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(208, 231, 247, .24);
    border-radius: 9px;
    background: rgba(0, 0, 0, .40);
}

.summonAmountSwitch[hidden] {
    display: none;
}

.summonAmountSwitch button {
    min-width: 34px;
    height: 27px;
    margin: 0;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #a9becc;
    font: 900 10px/1 "Poppins", sans-serif;
}

.summonAmountSwitch button.is-active {
    border-color: rgba(255, 232, 141, .76);
    background: linear-gradient(180deg, rgba(211, 148, 29, .92), rgba(141, 87, 9, .92));
    color: #fffbe8;
    box-shadow: inset 0 1px rgba(255, 255, 255, .18);
}

.summonAmountSwitch button:disabled {
    opacity: .45;
}

.summonAmountSwitch button:not(:disabled):focus-visible {
    outline: 1px solid rgba(255, 245, 201, .9);
    outline-offset: 1px;
}

.summonPanelFooter {
    position: relative;
    z-index: 6;
    flex: 0 0 auto;
    padding: 4px 5px 5px;
    border-top: 1px solid rgba(205, 230, 249, .20);
    background: linear-gradient(180deg, rgba(3, 16, 30, .90), rgba(2, 12, 24, .98));
    transition: opacity .16s ease, transform .16s ease;
}

.summonStoneSelector {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 0 1px 1px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Horizontal native scrolling is also used on touch devices. Keep it
       enabled at every viewport width; the JS custom drag remains mouse/stylus only. */
    touch-action: pan-x;
    cursor: grab;
    user-select: none;
}

.summonStoneSelector.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
}

.summonStoneSelector::-webkit-scrollbar {
    display: none;
}

.summonStoneChoice {
    --summon-choice-accent: 190, 216, 235;
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    flex: 1 0 145px;
    min-width: 145px;
    min-height: 50px;
    margin: 0;
    padding: 3px 5px;
    scroll-snap-align: start;
    border: 1px solid rgba(var(--summon-choice-accent), .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    color: #fff;
    text-align: left;
}

.summonStoneChoice--small {
    --summon-choice-accent: 85, 227, 127;
}

.summonStoneChoice--medium {
    --summon-choice-accent: 255, 175, 52;
}

.summonStoneChoice--legendary {
    --summon-choice-accent: 183, 112, 255;
}

.summonStoneChoice--supreme {
    --summon-choice-accent: 255, 226, 120;
}

.summonStoneChoice--duality_minor {
    --summon-choice-accent: 221, 225, 238;
}

.summonStoneChoice--duality {
    --summon-choice-accent: 198, 165, 255;
}

.summonStoneChoice.is-selected {
    border-color: rgba(var(--summon-choice-accent), .90);
    background: rgba(var(--summon-choice-accent), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--summon-choice-accent), .13), 0 0 10px rgba(var(--summon-choice-accent), .16);
}

.summonStoneChoiceVisual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 42px;
}

.summonStoneChoiceVisual img {
    max-width: 34px;
    max-height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .52));
}

/*
 * Les icônes élémentaires legacy utilisent un canvas carré 300x300 avec
 * davantage de marge transparente que les autres pierres. On agrandit
 * uniquement leur rendu visuel pour égaliser la taille perçue dans le
 * sélecteur, sans retoucher les PNG source.
 */
.summonStoneChoice--fire .summonStoneChoiceVisual img,
.summonStoneChoice--water .summonStoneChoiceVisual img,
.summonStoneChoice--air .summonStoneChoiceVisual img,
.summonStoneChoice--earth .summonStoneChoiceVisual img {
    transform: scale(1.1);
    transform-origin: center;
}

.summonStoneChoice--duality .summonStoneChoiceVisual img {
    transform: scale(1.2);
    transform-origin: center;
}

.summonStoneChoice--legendary .summonStoneChoiceVisual img {
    transform: scale(1.2);
    transform-origin: center;
}



.summonStoneChoiceVisual strong {
    position: absolute;
    right: -2px;
    bottom: 0;
    min-width: 19px;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .74);
    color: #fff3b8;
    font-size: 10px;
    line-height: 1.05;
    text-align: center;
}

.summonStoneChoiceText {
    min-width: 0;
}

.summonStoneChoiceText b {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summonStoneChoiceText small {
    display: block;
    margin-top: 2px;
    color: #b7cad6;
    font-size: 8.5px;
    font-weight: 900;
    line-height: 1.05;
}

.summonStoneChoiceFuture {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #b7c8d3;
    font-size: 7.5px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
    text-transform: uppercase;
}

/* Animation V2 : inspirée du mouvement de la pierre MMEG, mais courte.
   Le résultat reste entièrement décidé par le serveur avant son reveal. */
@keyframes summonStoneIdle {

    0%,
    100% {
        transform: translateY(2px) rotate(-.45deg) scale(1);
    }

    50% {
        transform: translateY(-5px) rotate(.45deg) scale(1.015);
    }
}

@keyframes summonGlowIdle {
    from {
        opacity: .54;
        transform: translate(-50%, -50%) scale(.92);
    }

    to {
        opacity: .82;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

.summonProcSignal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 154px;
    height: 154px;
    border: 2px solid rgba(255, 226, 91, 0);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.48);
}

.summonProcSignal::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
            rgba(255, 238, 126, 0) 0deg 15deg,
            rgba(255, 238, 126, .92) 16deg 18deg,
            rgba(255, 238, 126, 0) 19deg 32deg);
    filter: blur(1px) drop-shadow(0 0 7px rgba(255, 211, 55, .75));
}

.summonProcSignal i {
    position: absolute;
    top: -9px;
    color: #ffe95d;
    font-size: 23px;
    text-shadow: 0 0 5px #fff, 0 0 12px #ffd22e, 0 2px 3px rgba(0, 0, 0, .55);
}

.summonStage.is-summoning.has-proc .summonProcSignal {
    animation: summonProcBurst .82s cubic-bezier(.16, .78, .2, 1) both;
}

.summonStage.is-summoning.has-proc .summonSelectedStone {
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .35)) drop-shadow(0 0 22px rgba(255, 225, 67, .95));
}

@keyframes summonProcBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.45) rotate(-12deg);
    }

    22% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(.84) rotate(2deg);
    }

    58% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(1.10) rotate(18deg);
        border-color: rgba(255, 231, 93, .85);
    }

    100% {
        opacity: .18;
        transform: translate(-50%, -50%) scale(1.34) rotate(34deg);
        border-color: rgba(255, 231, 93, 0);
    }
}

.summonStoneFocus::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: repeating-conic-gradient(from 8deg,
            rgba(255, 255, 255, 0) 0deg 13deg,
            rgba(var(--summon-accent), .32) 14deg 16deg,
            rgba(255, 255, 255, 0) 17deg 31deg);
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(.35);
}

.summonStage.is-summoning .summonRatesInfoButton,
.summonStage.is-summoning .summonStageBottom,
.summonPanel.is-summoning .summonPanelFooter {
    opacity: .16;
    transform: scale(.985);
    pointer-events: none;
}

.summonStage.is-summoning .summonSelectedStone {
    animation: summonStoneCharge 1.84s cubic-bezier(.16, .72, .22, 1) both;
}

.summonStage.is-summoning.is-stone-opened .summonSelectedStone {
    filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .42)) drop-shadow(0 0 13px rgba(var(--summon-accent), .52));
}

.summonSelectedStone {
    transition: opacity .62s ease, filter .7s ease, transform .7s ease;
}

.summonStage.is-stone-swap-fading-out .summonSelectedStone {
    opacity: .18;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .34)) drop-shadow(0 0 7px rgba(var(--summon-accent), .18));
    transform: translateY(2px) scale(.97);
}

.summonStage.is-stone-swap-fading-in .summonSelectedStone {
    opacity: 1;
    filter: drop-shadow(0 9px 10px rgba(0, 0, 0, .46)) drop-shadow(0 0 14px rgba(var(--summon-accent), .58));
    transform: translateY(0) scale(1);
    transition-duration: .88s, .95s, .95s;
}

.summonStage.has-3d-preview.is-stone-swap-fading-out .summonSelectedStone,
.summonStage.has-3d-preview.is-stone-swap-fading-in .summonSelectedStone,
.summonStage.has-3d-preview.is-stone-opened .summonSelectedStone {
    opacity: 0;
}

.summonStage.is-summoning .summonStoneGlow {
    animation: summonGlowCharge 1.84s ease-in-out both;
}

.summonStage.is-summoning .summonStoneFocus::before {
    animation: summonRaysCharge 1.84s cubic-bezier(.18, .7, .2, 1) both;
}

.summonPanel.is-summoning .summonPanelDialog::after {
    content: "";
    position: absolute;
    inset: 44px 0 0;
    z-index: 5;
    pointer-events: none;
    background: #fff;
    opacity: 0;
    animation: summonFlash 1.84s ease-out both;
}

.summonPanel.is-summoning.is-batch-mode .summonPanelDialog::after {
    display: none;
}

.summonPanel.is-summoning.is-batch-mode .summonPanelFooter {
    opacity: 1;
    transform: none;
    pointer-events: none;
}

@keyframes summonStoneCharge {
    0% {
        transform: translateY(1px) rotate(-.4deg) scale(1);
        filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .48)) drop-shadow(0 0 8px rgba(var(--summon-accent), .30));
    }

    30% {
        transform: translateY(-7px) rotate(.7deg) scale(1.035);
        filter: drop-shadow(0 11px 11px rgba(0, 0, 0, .45)) drop-shadow(0 0 15px rgba(var(--summon-accent), .55));
    }

    67% {
        transform: translateY(-3px) rotate(-.45deg) scale(1.095);
        filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .40)) drop-shadow(0 0 26px rgba(var(--summon-accent), .85));
    }

    100% {
        transform: translateY(-5px) rotate(0deg) scale(1.19);
        filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .32)) drop-shadow(0 0 38px rgba(var(--summon-accent), 1));
    }
}

@keyframes summonGlowCharge {
    0% {
        opacity: .50;
        transform: translate(-50%, -50%) scale(.88);
    }

    58% {
        opacity: .92;
        transform: translate(-50%, -50%) scale(1.14);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.46);
    }
}

@keyframes summonRaysCharge {

    0%,
    42% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.35) rotate(0deg);
    }

    72% {
        opacity: .32;
        transform: translate(-50%, -50%) scale(.82) rotate(24deg);
    }

    100% {
        opacity: .82;
        transform: translate(-50%, -50%) scale(1.35) rotate(52deg);
    }
}

@keyframes summonFlash {

    0%,
    72% {
        opacity: 0;
    }

    88% {
        opacity: .08;
    }

    100% {
        opacity: .62;
    }
}

.summonResult {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(2, 11, 29, .56), rgba(8, 11, 36, .68)),
        linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)),
        url("/img/ui/summon/gacha-available.png") center 52% / cover no-repeat,
        #101647;
}

.summonResult[hidden] {
    display: none;
}

.summonResultCard {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    align-items: center;
    justify-items: center;
    width: 100%;
    min-height: 100%;
    padding: 7px 10px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    animation: summonResultReveal .34s cubic-bezier(.2, .8, .2, 1) both;
}

.summonResultName {
    position: relative;
    z-index: 2;
    display: block;
    align-self: start;
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.05;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .72);
}

.summonResultCreature {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    transform: translate(-50%, -50%);
}

.creatureMedallion--summon {
    width: 112px;
    height: 126px;
    --medallion-scale: 1.65;
    --medallion-core-top: 16px;
}

.summonResultMessage {
    position: relative;
    z-index: 2;
    grid-row: 3;
    margin: 0 0 6px;
    color: #eef7ff;
    font-size: 9px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
}

.summonResultReplay {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 2;
    max-width: 34%;
    color: #c8d7e5;
    font-size: 7px;
    line-height: 1.05;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.summonResultContinue {
    position: relative;
    z-index: 3;
    grid-row: 4;
    width: max-content;
    min-width: 108px;
    min-height: 32px;
    margin: 1px 0 0;
    padding: 5px 18px;
    border: 1px solid rgba(255, 232, 141, .90);
    border-radius: 9px;
    background: linear-gradient(180deg, #d3941d, #8d5709);
    box-shadow: inset 0 1px rgba(255, 255, 255, .25), 0 4px 11px rgba(0, 0, 0, .30);
    color: #fffbe8;
    font: 900 13px/1 "Poppins", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .52);
}

.summonResultContinue:hover,
.summonResultContinue:focus-visible {
    outline: 0;
    filter: brightness(1.08);
}

.summonResultContinue:disabled {
    cursor: default;
    opacity: .48;
    filter: saturate(.55) brightness(.82);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 2px 5px rgba(0, 0, 0, .22);
}

.summonResultContinue:disabled:hover,
.summonResultContinue:disabled:focus-visible {
    filter: saturate(.55) brightness(.82);
}

.summonResultCard.is-batch {
    grid-template-rows: 1fr auto;
    row-gap: 12px;
    padding: 9px 7px 16px;
}

.summonBatchResultView {
    grid-row: 1;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    min-height: 0;
}

.summonBatchResultView[hidden] {
    display: none;
}

.summonBatchResultTitle {
    display: block;
    margin: 2px 0 22px;
    color: #fff5d4;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .55px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .72);
}

.summonBatchResultGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: 20px 8px;
    min-height: 0;
    padding: 0 2px 4px;
}

.summonBatchResultSlot {
    --batch-index: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 86px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.summonBatchResultStone {
    display: block;
    width: min(10vw, 42px);
    max-height: 52px;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .58)) drop-shadow(0 0 5px rgba(var(--summon-accent), .28));
    transform: scale(1);
    transition: opacity .11s ease, transform .11s ease, filter .11s ease;
}

.summonBatchResultSlot.is-opening .summonBatchResultStone {
    opacity: .16;
    transform: scale(.68) rotate(-4deg);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .38));
}

.summonBatchResultSlot.is-fragment .summonBatchResultStone {
    opacity: 1;
    transform: scale(.90) rotate(0deg);
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .52)) drop-shadow(0 0 10px rgba(var(--summon-accent), .58));
}

.summonBatchResultSlot.is-revealed {
    animation: summonBatchPortraitReveal .24s cubic-bezier(.18, .8, .22, 1) both;
}

.summonBatchResultSlot.has-proc {
    filter: drop-shadow(0 0 7px rgba(255, 218, 70, .28));
}

@keyframes summonBatchPortraitReveal {
    from {
        transform: scale(.78);
        opacity: .12;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.creatureMedallion--summon-batch {
    width: 66px;
    height: 74px;
    --medallion-scale: 1;
    --medallion-core-top: 10px;
}

.creatureMedallion--summon-batch .creatureMedallionLevel {
    font-size: 7px;
}

.summonBatchNewBadge {
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 8;
    padding: 2px 3px;
    border: 1px solid rgba(255, 240, 170, .65);
    border-radius: 5px;
    background: rgba(149, 97, 12, .88);
    color: #fff8d7;
    font: 900 6px/1 "Poppins", sans-serif;
    letter-spacing: .2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.summonResultCard.is-batch .summonResultContinue {
    grid-row: 2;
    min-height: 31px;
    margin-top: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 11px;
}

@keyframes summonResultReveal {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@media (max-height:700px) {
    .summonPanelDialog {
        max-height: calc(100dvh - 8px);
    }

    .summonStage.is-batch-result {
        min-height: 245px;
    }

    .summonPanelHeader {
        min-height: 42px;
    }

    .summonStage {
        grid-template-rows: clamp(108px, 16dvh, 128px) auto;
        padding-top: 3px;
        gap: 1px;
    }

    .summonSelectedStone {
        width: min(24vw, 105px);
        max-height: 118px;
    }

    .summonBatchResultGrid {
        gap: 10px 6px;
        padding-bottom: 3px;
    }

    .summonBatchResultSlot {
        min-height: 74px;
    }

    .creatureMedallion--summon-batch {
        width: 58px;
        height: 66px;
        --medallion-scale: .92;
        --medallion-core-top: 9px;
    }

    .summonStoneChoice {
        min-height: 47px;
    }

    .summonStoneChoiceVisual {
        height: 39px;
    }
}

@media (max-width:360px) {
    .summonPanelDialog {
        width: calc(100% - 4px);
        max-height: calc(100dvh - 4px);
        border-radius: 13px;
    }

    .summonPanelHeader {
        padding-left: 10px;
    }

    .summonPanelHeader strong {
        font-size: 18px;
    }

    .summonStage {
        padding-left: 6px;
        padding-right: 6px;
    }

    .summonStoneChoice {
        flex-basis: 132px;
        min-width: 132px;
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .summonStoneChoiceText b {
        font-size: 9px;
    }

   .summonSideButton {
        width: 50px;
        max-width: 50px;
        height: 54px;
        right: 4px;
        border-radius: 8px 0 0 8px;
    }
}

@media (prefers-reduced-motion:reduce) {

    .summonSelectedStone,
    .summonStoneGlow,
    .summonProcSignal,
    .summonStage.is-summoning .summonSelectedStone,
    .summonStage.is-summoning .summonStoneGlow,
    .summonStage.is-summoning .summonStoneFocus::before,
    .summonPanel.is-summoning .summonPanelDialog::after,
    .summonResultCard,
    .summonBatchResultSlot {
        animation: none;
    }
}

/* Supreme stone visual tuning */
.summonStage[data-tier="supreme"] .summonStoneGlow {
    top: 58%;
    width: min(42vw, 192px);
}

.summonStage[data-tier="supreme"] .summonSelectedStone {
    width: min(31vw, 142px);
    max-height: 162px;
    margin-top: 12px;
    transform-origin: 50% 72%;
}

.summonStoneChoice--supreme .summonStoneChoiceVisual img {
    max-width: 38px;
    max-height: 44px;
    transform: translateY(2px);
}

@media (max-width:520px) {
    .summonStage[data-tier="supreme"] .summonSelectedStone {
        width: min(29vw, 118px);
        max-height: 128px;
        margin-top: 10px;
    }

    .summonStage[data-tier="supreme"] .summonStoneGlow {
        top: 58%;
        width: min(46vw, 182px);
    }

    .summonStoneChoice--supreme .summonStoneChoiceVisual img {
        max-width: 34px;
        max-height: 40px;
        transform: translateY(2px);
    }
}
/* =========================================================
   SoulStone2 3D — réglages validés du sandbox
   ========================================================= */
.summonStage {
    /* Valeur validée dans le sandbox : 145px -> 175px (+30px). */
    grid-template-rows: 175px auto;
}

.summonStage.has-3d-preview .summonStone3DHost {
    /* Le renderer occupe toute la zone de présentation. Le cadrage du modèle
       est piloté exclusivement par la caméra / le transform 3D. */
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    opacity: 1;
    transition: opacity .10s linear;
}

.summonStage.has-3d-preview.has-result .summonStone3DHost,
.summonStage.has-3d-preview.is-3d-transition .summonStone3DHost {
    opacity: 0;
}

/* Les anciens rayons coniques et l'étoile proc 2D sont neutralisés lorsque
   SoulStone2 est active. */
.summonStage.has-3d-preview .summonStoneFocus::before,
.summonStage.has-3d-preview .summonProcSignal {
    display: none !important;
}

/* Proc validé : brume cyan/orange légère, sans image additionnelle. */
.summonStage.has-3d-preview .summonStoneFocus::after {
    --summon-3d-proc-mist-opacity: var(--summon-tier-proc-mist-opacity, .70);
    --summon-3d-proc-mist-scale: var(--summon-tier-proc-mist-scale, 1);
    content: "";
    position: absolute;
    left: 50%;
    top: var(--summon-proc-origin-y);
    z-index: 1;
    width: min(48vw, 215px);
    aspect-ratio: 1;
    border-radius: 47% 53% 58% 42% / 41% 55% 45% 59%;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    background:
        radial-gradient(ellipse at 24% 42%, rgba(62, 225, 255, .72) 0 10%, rgba(26, 174, 255, .30) 24%, transparent 48%),
        radial-gradient(ellipse at 76% 63%, rgba(78, 151, 255, .56) 0 9%, rgba(45, 95, 255, .20) 25%, transparent 50%),
        radial-gradient(ellipse at 58% 29%, rgba(142, 242, 255, .40) 0 8%, transparent 36%),
        radial-gradient(ellipse at 42% 72%, rgba(255, 123, 32, .16) 0 7%, transparent 34%);
    filter: blur(9px) saturate(1.9) brightness(1.22);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(calc(.88 * var(--summon-3d-proc-mist-scale))) rotate(-7deg);
    will-change: transform, opacity;
}

.summonStage.has-3d-preview.is-summoning.has-proc .summonStoneFocus::after {
    visibility: visible;
    animation: summon3DProcMist 1.35s ease-in-out infinite alternate;
}

.summonStage.has-3d-preview.is-summoning .summonStoneGlow {
    top: var(--summon-proc-origin-y);
    animation: none;
    opacity: .24;
}

/* Le flash historique 1.84s est remplacé par la transition déclenchée à 55%
   de ANIM_TAP. Cette règle réactive aussi le flash en mode batch. */
.summonPanel.has-3d-preview.is-summoning .summonPanelDialog::after {
    animation: none !important;
    opacity: 0;
}

.summonPanel.has-3d-preview.is-summoning.is-3d-transition .summonPanelDialog::after {
    display: block !important;
    z-index: 9;
    animation: summon3DTransitionFlash .38s ease-out both !important;
}

@keyframes summon3DProcMist {
    0% {
        opacity: calc(var(--summon-3d-proc-mist-opacity) * .50);
        transform: translate(-50%, -50%) translate(-5px, 3px) scale(calc(.88 * var(--summon-3d-proc-mist-scale))) rotate(-7deg);
    }

    52% {
        opacity: calc(var(--summon-3d-proc-mist-opacity) * .78);
        transform: translate(-50%, -50%) translate(6px, -4px) scale(var(--summon-3d-proc-mist-scale)) rotate(2deg);
    }

    100% {
        opacity: var(--summon-3d-proc-mist-opacity);
        transform: translate(-50%, -50%) translate(-3px, -1px) scale(calc(1.08 * var(--summon-3d-proc-mist-scale))) rotate(8deg);
    }
}

@keyframes summon3DTransitionFlash {
    0% {
        opacity: 0;
        background: rgba(255, 174, 34, 0);
    }

    24% {
        opacity: .72;
        background: #ffbd34;
    }

    47% {
        opacity: .97;
        background: #ffe468;
    }

    68% {
        opacity: 1;
        background: #fff6be;
    }

    82% {
        opacity: 1;
        background: #fff;
    }

    100% {
        opacity: 0;
        background: #fff;
    }
}

@media (max-height:700px) {
    .summonStage {
        grid-template-rows: 158px auto;
    }
}

@media (prefers-reduced-motion:reduce) {
    .summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRayPlane,
    .summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay,
    .summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay::before,
    .summonStage.is-summoning.has-proc:not(.is-proc-rays-cut):not(.is-3d-stone-opened) .summonProcRay::after {
        animation: none;
    }

    .summonStage.has-3d-preview.is-summoning.has-proc .summonStoneFocus::after {
        animation: none;
        opacity: var(--summon-3d-proc-mist-opacity);
    }

    .summonPanel.has-3d-preview.is-summoning.is-3d-transition .summonPanelDialog::after {
        animation-duration: 1ms !important;
    }
}

/* Bulk >10 : synthèse compacte + résultats regroupés par créature. */
.summonResultCard.is-batch.is-large-batch {
    grid-template-rows: 1fr auto;
    padding: 8px 7px 14px;
}

.summonResultCard.is-large-batch .summonBatchResultView {
    grid-template-rows: auto auto auto minmax(82px, 1fr) auto;
    align-content: stretch;
}

.summonResultCard.is-large-batch .summonBatchResultTitle {
    margin-bottom: 8px;
    font-size: 12px;
}

.summonBulkSummary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0 auto 9px;
    max-width: 100%;
}

.summonBulkSummary[hidden] {
    display: none;
}

.summonBulkSummaryChip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-height: 23px;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(9, 12, 22, .76);
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 2px 5px rgba(0, 0, 0, .25);
    white-space: nowrap;
}

.summonBulkSummaryChip b {
    color: #bfc8d9;
    font: 800 8px/1 "Poppins", sans-serif;
    letter-spacing: .28px;
}

.summonBulkSummaryChip strong {
    color: #f7fbff;
    font: 900 11px/1 "Poppins", sans-serif;
}

.summonBulkSummaryChip.is-nat4 {
    border-color: rgba(255, 210, 78, .44);
    background: rgba(75, 53, 13, .78);
}

.summonBulkSummaryChip.is-new {
    border-color: rgba(116, 225, 161, .36);
}

.summonBulkHighlightsTitle {
    display: block;
    margin: 0 0 5px;
    color: #e6edf9;
    font: 800 8px/1 "Poppins", sans-serif;
    letter-spacing: .48px;
    text-align: left;
}

.summonBulkHighlightsTitle[hidden] {
    display: none;
}

.summonResultCard.is-large-batch .summonBatchResultGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    grid-auto-rows: 78px;
    align-content: start;
    align-items: center;
    justify-items: center;
    gap: 7px 4px;
    min-height: 82px;
    max-height: min(31vh, 190px);
    padding: 3px 6px 8px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(205, 220, 241, .28) transparent;
    scroll-snap-type: none;
}

.summonResultCard.is-large-batch .summonBatchResultGrid::-webkit-scrollbar {
    width: 4px;
}

.summonResultCard.is-large-batch .summonBatchResultGrid::-webkit-scrollbar-track {
    background: transparent;
}

.summonResultCard.is-large-batch .summonBatchResultGrid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(205, 220, 241, .25);
}

.summonResultCard.is-large-batch .summonBatchResultSlot {
    width: 100%;
    min-width: 0;
    min-height: 76px;
}

.summonBulkGroupSlot .creatureMedallion--summon-batch {
    width: 62px;
    height: 70px;
}

.summonBulkGroupCount {
    min-width: 18px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 7px !important;
}

.summonBulkHighlightBadges {
    position: absolute;
    left: 1px;
    bottom: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    pointer-events: none;
}

.summonBulkHighlightBadge {
    padding: 2px 3px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 4px;
    background: rgba(12, 17, 29, .91);
    color: #edf3ff;
    font: 900 5.5px/1 "Poppins", sans-serif;
    letter-spacing: .18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.summonBulkHighlightBadge.is-nat4 {
    border-color: rgba(255, 221, 91, .66);
    background: rgba(113, 73, 8, .92);
    color: #fff4bd;
}

.summonBulkHighlightBadge.is-team,
.summonBulkHighlightBadge.is-lineage {
    border-color: rgba(var(--summon-accent), .58);
    background: rgba(21, 28, 42, .94);
}

.summonBulkRollIndex {
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 8;
    color: rgba(233, 240, 250, .75);
    font: 700 6px/1 "Poppins", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.summonResultCard.is-large-batch .summonBatchNewBadge {
    right: 2px;
    top: 2px;
}

.summonBulkHighlightsEmpty {
    align-self: center;
    margin: 12px auto;
    color: rgba(229, 235, 245, .7);
    font: 600 9px/1.35 "Poppins", sans-serif;
    text-align: center;
}

.summonBulkHighlightsEmpty[hidden],
.summonBulkHighlightsNote[hidden] {
    display: none;
}

.summonBulkHighlightsNote {
    display: block;
    margin: 2px 0 0;
    color: rgba(224, 231, 242, .62);
    font: 600 7px/1.25 "Poppins", sans-serif;
    text-align: center;
}

@media (max-width: 420px) {
    .summonAmountSwitch button {
        min-width: 27px;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 8px;
    }

    .summonResultCard.is-large-batch .summonBatchResultGrid {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        grid-auto-rows: 74px;
        max-height: min(30vh, 178px);
    }

    .summonResultCard.is-large-batch .summonBatchResultSlot {
        width: 100%;
    }

    .summonBulkGroupSlot .creatureMedallion--summon-batch {
        width: 58px;
        height: 66px;
    }

    .summonBulkSummaryChip {
        padding-left: 6px;
        padding-right: 6px;
    }
}


/* Bulk >10 : la fenêtre utilise davantage de hauteur et réserve cette place
   à la grille scrollable. Les modes x1 / x10 restent sur leur géométrie
   historique. */
.summonPanel.is-large-batch-result .summonPanelDialog {
    height: min(88dvh, 760px);
}

.summonPanel.is-large-batch-result .summonPanelBody {
    flex: 1 1 auto;
    min-height: 0;
}

.summonPanel.is-large-batch-result .summonStage {
    height: 100%;
    min-height: 0;
}

.summonPanel.is-large-batch-result .summonResultCard.is-large-batch .summonBatchResultGrid {
    /* Le layout x10 definit deux lignes explicites en 1fr. En gros bulk ces
       deux tracks absorbaient/collapsaient l'espace disponible, ce qui
       rognait les deux premieres rangees. On repasse sur des lignes implicites
       homogenes pour que toutes les rangees aient exactement la meme geometrie. */
    grid-template-rows: none;
    grid-auto-rows: 80px;
    gap: 3px 4px;
    min-height: 0;
    max-height: none;
    padding-top: 7px;
}

.summonPanel.is-large-batch-result .summonResultCard.is-large-batch .summonBatchResultSlot {
    min-height: 78px;
}

@media (max-width: 420px) {
    .summonPanel.is-large-batch-result .summonPanelDialog {
        height: min(90dvh, 720px);
    }

    .summonPanel.is-large-batch-result .summonResultCard.is-large-batch .summonBatchResultGrid {
        grid-auto-rows: 74px;
        gap: 2px 4px;
        padding-top: 8px;
    }

    .summonPanel.is-large-batch-result .summonResultCard.is-large-batch .summonBatchResultSlot {
        min-height: 72px;
    }
}

@media (max-height: 700px) {
    .summonPanel.is-large-batch-result .summonPanelDialog {
        height: calc(100dvh - 8px);
    }
}


/* =========================================================
   Invocation cinématique — plein espace + tap/clic pour passer
   ========================================================= */
.summonMaxProgress {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 10;
    width: min(430px, calc(100% - 28px));
    padding: 12px 14px 11px;
    border: 1px solid rgba(218, 232, 243, .26);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(14, 24, 34, .94), rgba(7, 13, 20, .96));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .05), 0 0 22px rgba(var(--summon-accent), .10);
    color: #edf7ff;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.summonMaxProgress[hidden] {
    display: none;
}

.summonMaxProgressTitle {
    display: block;
    margin-bottom: 4px;
    color: #d9e8f4;
    font: 900 11px/1.15 "Poppins", sans-serif;
    letter-spacing: .07em;
}

.summonMaxProgressCount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    color: #aebfcb;
    font: 800 15px/1.2 "Poppins", sans-serif;
}

.summonMaxProgressCount strong:first-child {
    color: #fff4ca;
    font-size: 21px;
}

.summonMaxProgressTrack {
    height: 7px;
    margin: 8px 0 5px;
    overflow: hidden;
    border: 1px solid rgba(214, 231, 243, .18);
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
}

.summonMaxProgressTrack span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--summon-accent), .66), rgba(255, 226, 122, .94));
    box-shadow: 0 0 10px rgba(var(--summon-accent), .36);
    transition: width .22s ease;
}

.summonMaxProgressMeta,
.summonMaxProgressStats {
    display: flex;
    align-items: center;
    justify-content: center;
}

.summonMaxProgressMeta {
    justify-content: space-between;
    color: #a9bbc8;
    font: 800 10px/1.2 "Poppins", sans-serif;
}

.summonMaxProgressStats {
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.summonMaxProgressStats span {
    min-width: 86px;
    padding: 4px 7px;
    border: 1px solid rgba(212, 231, 245, .15);
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
    color: #9fb1bf;
    font: 800 9px/1.15 "Poppins", sans-serif;
}

.summonMaxProgressStats strong {
    margin-left: 3px;
    color: #f7fbff;
    font-size: 10px;
}

.summonMaxProgressStatus {
    display: block;
    margin-top: 7px;
    color: #9fb0bc;
    font: 700 9px/1.35 "Poppins", sans-serif;
}

.summonMaxProgress[data-state="completed"] {
    border-color: rgba(138, 220, 161, .34);
}

.summonMaxProgress[data-state="completed"] .summonMaxProgressTitle {
    color: #bfe8c8;
}

.summonMaxProgress[data-state="interrupted"] {
    border-color: rgba(255, 157, 117, .48);
    background: linear-gradient(180deg, rgba(43, 24, 22, .96), rgba(19, 13, 15, .97));
    box-shadow: 0 12px 32px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .05), 0 0 22px rgba(255, 111, 74, .10);
}

.summonMaxProgress[data-state="interrupted"] .summonMaxProgressTitle {
    color: #ffb49b;
}

.summonMaxResumeButton {
    margin-top: 9px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 207, 140, .7);
    border-radius: 8px;
    background: linear-gradient(180deg, #bd7625, #70400d);
    color: #fff4dc;
    font: 900 10px/1 "Poppins", sans-serif;
    cursor: pointer;
    pointer-events: auto;
}

.summonMaxResumeButton[hidden] {
    display: none;
}

.summonMaxResumeButton:hover,
.summonMaxResumeButton:focus-visible {
    outline: 0;
    filter: brightness(1.08);
}

.summonCinemaSkipLayer {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: none;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.summonCinemaSkipLayer span {
    position: absolute;
    right: 16px;
    bottom: 11px;
    color: rgba(228, 236, 242, .56);
    font: 800 12px/1 "Poppins", sans-serif;
    letter-spacing: .01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .82);
    pointer-events: none;
}

.summonPanel.is-summoning .summonPanelDialog {
    height: var(--summon-cinematic-dialog-height, auto);
}

.summonPanel.is-summoning .summonPanelBody {
    flex: 1 1 auto;
    min-height: 0;
}

.summonPanel.is-summoning .summonStage {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.summonPanel.is-summoning .summonStoneFocus {
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* Le canvas 3D doit couvrir exactement toute la zone cinématique.
       Le décalage visuel historique est désormais appliqué dans la projection
       WebGL afin de conserver la pierre à sa position validée sans déplacer
       les limites physiques du canvas. */
    transform: none;
}

.summonPanel.is-summoning .summonRatesInfoButton,
.summonPanel.is-summoning .summonRatesPopover,
.summonPanel.is-summoning .summonStageBottom,
.summonPanel.is-summoning .summonPanelFooter {
    display: none !important;
}

.summonPanel.is-summoning .summonCinemaSkipLayer {
    display: block;
}

.summonPanel.is-skip-requested .summonCinemaSkipLayer span {
    opacity: .28;
}

@media (max-width: 640px) {
    .summonMaxProgress {
        bottom: 12px;
        width: calc(100% - 20px);
        padding: 10px 10px 9px;
    }

    .summonMaxProgressCount strong:first-child {
        font-size: 18px;
    }

    .summonMaxProgressStats {
        gap: 4px;
    }

    .summonMaxProgressStats span {
        min-width: 0;
        flex: 1 1 30%;
        padding-inline: 4px;
    }

    .summonCinemaSkipLayer span {
        right: 13px;
        bottom: 9px;
        font-size: 11px;
    }
}