/**
 * =====================================================
 * Herzschild Digital Gacha
 * Frontend Style
 *
 * Version : 1.0.0 Build5 Fix2
 *
 * Fix2:
 * - Smartphone roulette perfect-circle fix
 * - Preserve PC layout
 * - Preserve result responsive layout
 * - Prepare for roulette auto-scroll
 * =====================================================
 */

:root {
    --hdg-primary: #7554dc;
    --hdg-primary-soft: #b7a5eb;

    --hdg-text: #1d2327;
    --hdg-text-soft: #646970;

    --hdg-panel: #ffffff;
    --hdg-panel-soft: #f6f7f7;

    --hdg-border: #dcdcde;

    --hdg-rarity-ur: #d160ec;
    --hdg-rarity-ssr: #dfa718;
    --hdg-rarity-sr: #9954df;
    --hdg-rarity-r: #3397d2;
    --hdg-rarity-n: #777d84;
}


/* =====================================================
   Root
===================================================== */

.hdg-gacha {
    position: relative;

    width: 100%;
    max-width: 900px;

    margin:
        32px auto;

    padding:
        28px;

    box-sizing: border-box;

    border:
        1px solid
        var(--hdg-border);

    border-radius: 18px;

    background:
        var(--hdg-panel);

    color:
        var(--hdg-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    line-height: 1.6;
}


/* =====================================================
   Header
===================================================== */

.hdg-gacha__header {
    width: 100%;

    margin-bottom: 26px;

    text-align: center;
}


.hdg-gacha__main-image {
    width: 100%;

    margin:
        0 auto
        22px;

    overflow: hidden;

    border-radius: 14px;
}


.hdg-gacha__main-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0 auto;
}


.hdg-gacha__title-area {
    width: 100%;

    text-align: center;
}


.hdg-gacha__title {
    margin:
        0 0
        10px;

    color:
        var(--hdg-text);

    font-size: 32px;
    font-weight: 800;
    line-height: 1.35;

    text-align: center;
}


.hdg-gacha__description {
    width: 100%;
    max-width: 720px;

    margin:
        0 auto;

    color:
        var(--hdg-text-soft);

    font-size: 15px;
    line-height: 1.8;

    text-align: center;
}


/* =====================================================
   Stage
===================================================== */

.hdg-gacha__stage {
    position: relative;

    width: 100%;

    margin:
        0 auto;

    padding:
        38px
        20px
        28px;

    box-sizing: border-box;

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fafafa 0%,
            #f5f5f5 100%
        );

    text-align: center;

    overflow: visible;
}


/* =====================================================
   Roulette Wrapper
===================================================== */

.hdg-gacha__roulette-wrap {
    position: relative;

    width: 320px;
    height: 320px;

    max-width: 100%;

    margin:
        0 auto;

    aspect-ratio: 1 / 1;

    box-sizing: border-box;

    flex:
        0 0 auto;
}


/* =====================================================
   Roulette
===================================================== */

.hdg-gacha__roulette {
    position: relative;

    width: 100%;
    height: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;

    box-sizing: border-box;

    border:
        6px solid
        var(--hdg-primary);

    border-radius: 50%;

    background:
        conic-gradient(
            #e4f1ff 0deg 45deg,
            #eee4ff 45deg 90deg,
            #ffe5ea 90deg 135deg,
            #e3f7f1 135deg 180deg,
            #eee8ff 180deg 225deg,
            #fbe5f1 225deg 270deg,
            #fff0b9 270deg 315deg,
            #e4f5eb 315deg 360deg
        );

    overflow: hidden;

    transform:
        rotate(0deg);

    transform-origin:
        center center;

    will-change:
        transform;

    box-shadow:
        0 14px 30px
        rgba(0,0,0,0.14);
}


/* =====================================================
   Roulette Inner Ring
===================================================== */

.hdg-gacha__roulette::before {
    content: "";

    position: absolute;

    inset: 14px;

    border:
        2px solid
        rgba(255,255,255,0.88);

    border-radius: 50%;

    pointer-events: none;
}


/* =====================================================
   Roulette Center
===================================================== */

.hdg-gacha__roulette-center {
    position: absolute;
    z-index: 4;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;

    aspect-ratio: 1 / 1;

    box-sizing: border-box;

    border:
        6px solid
        var(--hdg-primary);

    border-radius: 50%;

    background:
        #ffffff;

    transform:
        translate(
            -50%,
            -50%
        );

    box-shadow:
        0 4px 14px
        rgba(0,0,0,0.10);
}


.hdg-gacha__roulette-label {
    color:
        var(--hdg-primary);

    font-size: 21px;
    font-weight: 800;
    line-height: 1;

    letter-spacing:
        0.04em;

    white-space: nowrap;

    writing-mode:
        horizontal-tb;
}


/* =====================================================
   Pointer
===================================================== */

.hdg-gacha__pointer {
    position: absolute;
    z-index: 6;

    top: -15px;
    left: 50%;

    color:
        var(--hdg-primary);

    font-size: 36px;
    line-height: 1;

    transform:
        translateX(-50%);

    pointer-events: none;
}


/* =====================================================
   Roulette Animation
===================================================== */

.hdg-gacha.is-spinning
.hdg-gacha__roulette {
    animation:
        hdgRouletteSpin
        1.8s
        cubic-bezier(
            0.12,
            0.62,
            0.18,
            1
        )
        both;
}


@keyframes hdgRouletteSpin {

    0% {
        transform:
            rotate(0deg);
    }

    100% {
        transform:
            rotate(1440deg);
    }

}


/* =====================================================
   Status
===================================================== */

.hdg-gacha__status {
    width: 100%;

    margin:
        24px auto
        0;

    color:
        var(--hdg-text-soft);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;

    text-align: center;

    writing-mode:
        horizontal-tb;
}


.hdg-gacha.is-spinning
.hdg-gacha__status {
    color:
        var(--hdg-primary);
}


.hdg-gacha.is-multi-start
.hdg-gacha__status {
    font-size: 17px;
}


/* =====================================================
   Actions
===================================================== */

.hdg-gacha__actions {
    display: flex;

    align-items: stretch;
    justify-content: center;

    flex-wrap: wrap;

    width: 100%;

    gap: 12px;

    margin-top: 24px;
}


.hdg-gacha__button {
    display: inline-flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 180px;
    min-height: 68px;

    padding:
        12px
        22px;

    box-sizing: border-box;

    border: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--hdg-primary),
            #6847d4
        );

    color:
        #ffffff;

    font: inherit;

    text-align: center;

    cursor: pointer;

    box-shadow:
        0 9px 22px
        rgba(117,84,220,0.23);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}


.hdg-gacha__button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 12px 27px
        rgba(117,84,220,0.30);
}


.hdg-gacha__button:active {
    transform:
        translateY(0);
}


.hdg-gacha__button:disabled {
    opacity: 0.46;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


.hdg-gacha__button-main {
    display: block;

    color:
        #ffffff;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;

    writing-mode:
        horizontal-tb;
}


.hdg-gacha__button-sub {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,0.82);

    font-size: 11px;
    line-height: 1.4;

    writing-mode:
        horizontal-tb;
}
/* =====================================================
   Registered Rarities
===================================================== */

.hdg-gacha__rarities {
    width: 100%;

    margin-top: 28px;

    padding:
        20px
        16px;

    box-sizing: border-box;

    border-radius: 14px;

    background:
        var(--hdg-panel-soft);

    text-align: center;
}


.hdg-gacha__rarities-title {
    margin:
        0 0
        14px;

    color:
        var(--hdg-text-soft);

    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;

    text-align: center;

    writing-mode:
        horizontal-tb;
}


.hdg-gacha__rarity-list {
    display: flex;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    width: 100%;

    gap: 10px;
}


.hdg-gacha__rarity {
    display: inline-flex;

    flex:
        0 0 auto;

    flex-direction: row;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 72px;

    padding:
        8px
        13px;

    box-sizing: border-box;

    border:
        1px solid
        var(--hdg-border);

    border-radius: 999px;

    background:
        #ffffff;

    color:
        var(--hdg-text-soft);

    font-size: 13px;
    line-height: 1.4;

    white-space: nowrap;

    writing-mode:
        horizontal-tb;
}


.hdg-gacha__rarity strong,
.hdg-gacha__rarity span {
    display: inline-block;

    white-space: nowrap;

    writing-mode:
        horizontal-tb;
}


.hdg-gacha__rarity strong {
    font-size: 15px;
    font-weight: 900;
}


.hdg-gacha__rarity--ur strong {
    background:
        linear-gradient(
            90deg,
            #e94f7b,
            #bd59ed,
            #4381eb,
            #38ad8c,
            #d5a21b
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.hdg-gacha__rarity--ssr strong {
    color:
        var(--hdg-rarity-ssr);
}


.hdg-gacha__rarity--sr strong {
    color:
        var(--hdg-rarity-sr);
}


.hdg-gacha__rarity--r strong {
    color:
        var(--hdg-rarity-r);
}


.hdg-gacha__rarity--n strong {
    color:
        var(--hdg-rarity-n);
}


/* =====================================================
   Loading
===================================================== */

.hdg-gacha__loading {
    position: absolute;
    z-index: 20;

    top: 50%;
    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 130px;

    padding:
        12px
        16px;

    box-sizing: border-box;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.94);

    color:
        var(--hdg-text);

    font-size: 12px;
    font-weight: 700;

    text-align: center;

    transform:
        translate(
            -50%,
            -50%
        );

    box-shadow:
        0 8px 24px
        rgba(0,0,0,0.14);
}


.hdg-gacha__loading[hidden] {
    display: none !important;
}


.hdg-gacha__loading-spinner {
    width: 26px;
    height: 26px;

    margin-bottom: 8px;

    box-sizing: border-box;

    border:
        3px solid
        rgba(117,84,220,0.18);

    border-top-color:
        var(--hdg-primary);

    border-radius: 50%;

    animation:
        hdgLoadingSpin
        0.75s
        linear
        infinite;
}


@keyframes hdgLoadingSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =====================================================
   Result Overlay
===================================================== */

.hdg-gacha__result {
    position: fixed;
    z-index: 999999;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    width: 100%;
    height: 100%;

    padding:
        28px
        20px
        36px;

    box-sizing: border-box;

    background:
        rgba(5,8,14,0.88);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling:
        touch;
}


.hdg-gacha__result[hidden] {
    display: none !important;
}


/* =====================================================
   Result Content
===================================================== */

.hdg-gacha__result-content {
    position: relative;

    flex:
        0 0 auto;

    width: 100%;
    max-width: 900px;

    min-width: 0;

    margin:
        0 auto;

    padding:
        30px
        28px
        26px;

    box-sizing: border-box;

    border-radius: 18px;

    background:
        #ffffff;

    color:
        var(--hdg-text);

    overflow: visible;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,0.30);
}


/* =====================================================
   Result Heading
===================================================== */

.hdg-result-heading {
    width: 100%;

    margin:
        0 auto
        26px;

    text-align: center;
}


.hdg-result-heading__title {
    margin: 0;

    color:
        var(--hdg-text);

    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;

    text-align: center;

    writing-mode:
        horizontal-tb;
}


.hdg-result-heading__rarity {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-top: 10px;

    padding:
        6px
        14px;

    box-sizing: border-box;

    border-radius: 999px;

    background:
        var(--hdg-panel-soft);

    color:
        var(--hdg-text-soft);

    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;

    text-align: center;

    writing-mode:
        horizontal-tb;
}


.hdg-multi-result-notice {
    width: fit-content;
    max-width: 100%;

    margin:
        -8px auto
        22px;

    padding:
        8px
        16px;

    box-sizing: border-box;

    border-radius: 999px;

    background:
        var(--hdg-panel-soft);

    color:
        var(--hdg-text-soft);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;

    text-align: center;

    writing-mode:
        horizontal-tb;
}


/* =====================================================
   Result List
===================================================== */

.hdg-result-list {
    display: grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        );

    width: 100%;
    max-width: 720px;

    gap: 16px;

    margin:
        0 auto;

    box-sizing: border-box;
}


.hdg-result-list--multi {
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    max-width: 100%;

    gap: 14px;
}


/* =====================================================
   Result Card
===================================================== */

.hdg-result-card {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    min-width: 0;

    width: 100%;

    padding:
        14px;

    box-sizing: border-box;

    border:
        1px solid
        var(--hdg-border);

    border-radius: 14px;

    background:
        #ffffff;

    color:
        var(--hdg-text);

    text-align: center;

    overflow: hidden;

    box-shadow:
        0 5px 14px
        rgba(0,0,0,0.05);
}


.hdg-result-card__rarity {
    position: relative;
    z-index: 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 48px;

    margin-bottom: 10px;

    padding:
        5px
        10px;

    box-sizing: border-box;

    border-radius: 999px;

    background:
        var(--hdg-panel-soft);

    color:
        var(--hdg-text-soft);

    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;

    white-space: nowrap;

    writing-mode:
        horizontal-tb;
}


/* =====================================================
   Result Image
===================================================== */

.hdg-result-card__image {
    position: relative;
    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    aspect-ratio: 1 / 1;

    margin-bottom: 10px;

    box-sizing: border-box;

    border-radius: 10px;

    background:
        #f6f7f7;

    overflow: hidden;
}


.hdg-result-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;
}


/* =====================================================
   Result Name / Description
===================================================== */

.hdg-result-card__name {
    position: relative;
    z-index: 3;

    width: 100%;

    margin:
        0;

    color:
        var(--hdg-text);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;

    text-align: center;

    overflow-wrap: anywhere;

    writing-mode:
        horizontal-tb;
}


.hdg-result-card__description {
    position: relative;
    z-index: 3;

    width: 100%;

    margin-top: 5px;

    color:
        var(--hdg-text-soft);

    font-size: 12px;
    line-height: 1.6;

    text-align: center;

    overflow-wrap: anywhere;

    writing-mode:
        horizontal-tb;
}
/* =====================================================
   Result Rarity - N
===================================================== */

.hdg-result-card--n {
    border-color:
        rgba(119,125,132,0.48);
}


.hdg-result-card--n
.hdg-result-card__rarity {
    background:
        rgba(119,125,132,0.11);

    color:
        var(--hdg-rarity-n);
}


/* =====================================================
   Result Rarity - R
===================================================== */

.hdg-result-card--r {
    border-color:
        rgba(51,151,210,0.52);
}


.hdg-result-card--r
.hdg-result-card__rarity {
    background:
        rgba(51,151,210,0.12);

    color:
        var(--hdg-rarity-r);
}


/* =====================================================
   Result Rarity - SR
===================================================== */

.hdg-result-card--sr {
    border-color:
        rgba(153,84,223,0.58);

    box-shadow:
        0 0 18px
        rgba(153,84,223,0.16),

        0 6px 18px
        rgba(0,0,0,0.06);
}


.hdg-result-card--sr
.hdg-result-card__rarity {
    background:
        rgba(153,84,223,0.12);

    color:
        var(--hdg-rarity-sr);
}


/* =====================================================
   Result Rarity - SSR
===================================================== */

.hdg-result-card--ssr {
    border-color:
        rgba(223,167,24,0.65);

    box-shadow:
        0 0 18px
        rgba(223,167,24,0.24),

        0 7px 20px
        rgba(0,0,0,0.07);
}


.hdg-result-card--ssr
.hdg-result-card__rarity {
    background:
        rgba(223,167,24,0.13);

    color:
        var(--hdg-rarity-ssr);
}


/* =====================================================
   Result Rarity - UR
===================================================== */

.hdg-result-card--ur {
    border-color:
        rgba(209,96,236,0.84);

    box-shadow:
        0 0 15px
        rgba(239,85,125,0.58),

        0 0 27px
        rgba(180,85,246,0.54),

        0 0 40px
        rgba(68,145,235,0.36),

        0 12px 30px
        rgba(0,0,0,0.34);
}


.hdg-result-card--ur::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(
            125deg,
            transparent 20%,
            rgba(255,255,255,0.42) 42%,
            transparent 62%
        );

    transform:
        translateX(-120%);

    pointer-events: none;

    animation:
        hdgURCardShine
        2.2s
        ease-in-out
        infinite;
}


@keyframes hdgURCardShine {

    0%,
    35% {
        transform:
            translateX(-120%);
    }

    75%,
    100% {
        transform:
            translateX(120%);
    }

}


.hdg-result-card--ur
.hdg-result-card__rarity {
    background:
        linear-gradient(
            90deg,
            #e94f7b,
            #bd59ed,
            #4381eb,
            #38ad8c,
            #d5a21b
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* =====================================================
   Multi Result Card
===================================================== */

.hdg-result-card--multi {
    opacity: 0;

    transform:
        translateY(28px)
        scale(0.72)
        rotateX(22deg);

    transition:
        opacity 0.38s ease,
        transform 0.42s
        cubic-bezier(
            0.15,
            0.85,
            0.25,
            1.12
        );
}


.hdg-result-card--multi.is-revealed {
    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotateX(0deg);

    animation:
        hdgMultiCardPop
        0.42s
        cubic-bezier(
            0.15,
            0.85,
            0.25,
            1.15
        )
        both;
}


@keyframes hdgMultiCardPop {

    0% {
        opacity: 0;

        transform:
            translateY(28px)
            scale(0.72);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-4px)
            scale(1.05);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =====================================================
   Multi SR Hit
===================================================== */

.hdg-gacha__result.is-multi-sr-hit::before {
    content: "";

    position: fixed;
    z-index: 1000000;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(187,114,250,0.36),
            transparent 62%
        );

    pointer-events: none;

    animation:
        hdgMultiSRHit
        0.28s
        ease-out
        both;
}


@keyframes hdgMultiSRHit {

    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}


/* =====================================================
   Multi SSR Hit
===================================================== */

.hdg-gacha__result.is-multi-ssr-hit::before {
    content: "";

    position: fixed;
    z-index: 1000000;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,244,189,0.78) 0%,
            rgba(237,184,48,0.32) 30%,
            transparent 67%
        );

    pointer-events: none;

    animation:
        hdgMultiSSRHit
        0.36s
        ease-out
        both;
}


@keyframes hdgMultiSSRHit {

    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.28;
    }

    100% {
        opacity: 0;
    }

}


/* =====================================================
   Multi UR Hit
===================================================== */

.hdg-gacha__result.is-multi-ur-hit::before {
    content: "";

    position: fixed;
    z-index: 1000000;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,0.95) 0%,
            rgba(255,99,143,0.48) 20%,
            rgba(190,91,255,0.42) 34%,
            rgba(74,147,255,0.34) 48%,
            rgba(61,201,154,0.24) 62%,
            transparent 76%
        );

    pointer-events: none;

    animation:
        hdgMultiURHit
        0.48s
        ease-out
        both;
}


@keyframes hdgMultiURHit {

    0% {
        opacity: 0;

        transform:
            scale(0.9);
    }

    22% {
        opacity: 1;

        transform:
            scale(1);
    }

    45% {
        opacity: 0.30;
    }

    65% {
        opacity: 0.88;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.08);
    }

}


/* =====================================================
   Multi Complete
===================================================== */

.hdg-gacha__result.is-multi-complete
.hdg-result-list--multi {
    animation:
        hdgMultiCompleteGrid
        0.5s
        ease-out
        both;
}


@keyframes hdgMultiCompleteGrid {

    0% {
        filter:
            brightness(1);
    }

    45% {
        filter:
            brightness(1.20);
    }

    100% {
        filter:
            brightness(1);
    }

}


/* =====================================================
   Aggregated Result
   21 Draws or More
===================================================== */

.hdg-result-list--aggregated {
    align-items: stretch;
}


.hdg-result-card--aggregated {
    display: flex;

    flex-direction: column;
}


.hdg-result-card--aggregated
.hdg-result-card__image {
    flex-shrink: 0;
}


.hdg-result-card__count {
    position: relative;
    z-index: 3;

    margin-top: 8px;

    color:
        var(--hdg-text);

    font-size: 14px;
    font-weight: 900;

    writing-mode:
        horizontal-tb;
}


/* =====================================================
   X Result Share
===================================================== */

.hdg-result-share {
    position: relative;
    z-index: 4;

    display: flex;

    flex:
        0 0 auto;

    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 900px;

    margin:
        24px auto
        0;

    padding: 0;

    box-sizing: border-box;
}


.hdg-result-share__x {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 420px;

    min-height: 52px;

    padding:
        13px
        24px;

    box-sizing: border-box;

    border: 0;

    border-radius: 999px;

    background:
        #000000;

    color:
        #ffffff !important;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;

    text-align: center;
    text-decoration: none !important;

    white-space: normal;

    writing-mode:
        horizontal-tb;

    cursor: pointer;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.22);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


.hdg-result-share__x::before {
    content: "𝕏";

    display: inline-block;

    flex:
        0 0 auto;

    margin-right: 9px;

    color:
        #ffffff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    writing-mode:
        horizontal-tb;
}


.hdg-result-share__x:hover {
    background:
        #171717;

    color:
        #ffffff !important;

    text-decoration: none !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 26px
        rgba(0,0,0,0.28);
}


.hdg-result-share__x:active {
    transform:
        translateY(0);
}
/* =====================================================
   Result Close
===================================================== */

.hdg-gacha__result-close {
    position: relative;
    z-index: 4;

    display: inline-flex;

    flex:
        0 0 auto;

    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 180px;
    max-width: 420px;

    margin:
        16px auto
        30px;

    padding:
        13px
        22px;

    box-sizing: border-box;

    border:
        1px solid
        var(--hdg-border);

    border-radius: 10px;

    background:
        var(--hdg-panel);

    color:
        var(--hdg-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;

    white-space: normal;

    writing-mode:
        horizontal-tb;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.hdg-gacha__result-close:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 5px 14px
        rgba(0,0,0,0.10);
}


/* =====================================================
   Result Effects Layer
===================================================== */

.hdg-gacha__result-effects {
    position: fixed;
    z-index: 1000000;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.hdg-gacha__result-effects:empty {
    display: none;
}


/* =====================================================
   Message
===================================================== */

.hdg-gacha-message {
    max-width: 760px;

    margin:
        24px auto;

    padding:
        18px
        20px;

    box-sizing: border-box;

    border:
        1px solid
        #dcdcde;

    border-radius: 10px;

    background:
        #f6f7f7;

    color:
        #3c434a;

    text-align: center;

    font-size: 14px;
}


/* =====================================================
   Focus
===================================================== */

.hdg-gacha__button:focus-visible,
.hdg-gacha__result-close:focus-visible,
.hdg-result-share__x:focus-visible {
    outline:
        3px solid
        rgba(34,113,177,0.38);

    outline-offset: 3px;
}


/* =====================================================
   Tablet
===================================================== */

@media screen and (max-width: 782px) {

    .hdg-gacha {
        width: 100%;
        max-width: 100%;

        margin:
            20px auto;

        padding: 20px;

        box-sizing: border-box;

        border-radius: 16px;
    }


    .hdg-gacha__header,
    .hdg-gacha__stage,
    .hdg-gacha__actions,
    .hdg-gacha__rarities {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    .hdg-gacha__stage {
        padding:
            30px
            10px
            24px;
    }


    .hdg-gacha__actions {
        flex-direction: column;
    }


    .hdg-gacha__button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;
    }


    .hdg-gacha__rarity-list {
        justify-content: center;
    }


    /* =================================================
       Result - Tablet
    ================================================= */

    .hdg-gacha__result {
        width: 100%;

        padding:
            22px
            14px
            30px;

        box-sizing: border-box;
    }


    .hdg-gacha__result-content {
        width: 100%;
        max-width: 720px;

        margin:
            0 auto;

        box-sizing: border-box;
    }


    .hdg-result-list--multi {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

        max-width: 100%;
    }


    .hdg-result-share {
        width: 100%;
        max-width: 720px;

        margin-top: 24px;
    }


    .hdg-result-share__x {
        width: 100%;
        max-width: 380px;
    }


    .hdg-gacha__result-close {
        width: 100%;
        max-width: 380px;

        min-width: 0;
    }

}


/* =====================================================
   Smartphone
===================================================== */

@media screen and (max-width: 480px) {

    /* =================================================
       Main Gacha Container
    ================================================= */

    .hdg-gacha {
        width: 100%;
        max-width: 100%;

        margin:
            12px auto;

        padding:
            16px
            12px;

        box-sizing: border-box;

        border-radius: 14px;

        overflow: hidden;
    }


    .hdg-gacha__header {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        box-sizing: border-box;
    }


    .hdg-gacha__main-image {
        width: 100%;
        max-width: 100%;

        margin-bottom: 16px;

        box-sizing: border-box;

        border-radius: 11px;
    }


    .hdg-gacha__main-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }


    .hdg-gacha__title-area {
        width: 100%;

        box-sizing: border-box;
    }


    .hdg-gacha__title {
        max-width: 100%;

        font-size: 25px;

        overflow-wrap: anywhere;
    }


    .hdg-gacha__description {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;

        font-size: 14px;
        line-height: 1.7;

        overflow-wrap: anywhere;
    }


    /* =================================================
       Stage
    ================================================= */

    .hdg-gacha__stage {
        width: 100%;
        max-width: 100%;

        padding:
            27px
            8px
            20px;

        box-sizing: border-box;

        border-radius: 14px;

        overflow: visible;
    }


    /* =================================================
       Roulette
       Fix2 - Perfect Circle
    ================================================= */

    .hdg-gacha__roulette-wrap {
        position: relative;

        width:
            min(
                285px,
                calc(100vw - 72px)
            );

        height: auto;

        max-width: 100%;

        margin:
            0 auto;

        aspect-ratio:
            1 / 1;

        box-sizing: border-box;

        flex:
            0 0 auto;
    }


    .hdg-gacha__roulette {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        aspect-ratio:
            1 / 1;

        box-sizing: border-box;

        border-width: 5px;
        border-radius: 50%;
    }


    .hdg-gacha__roulette-center {
        width: 98px;
        height: 98px;

        aspect-ratio:
            1 / 1;

        box-sizing: border-box;

        border-width: 5px;
        border-radius: 50%;
    }


    .hdg-gacha__roulette-label {
        font-size: 17px;
    }


    .hdg-gacha__pointer {
        top: -10px;

        font-size: 28px;
    }


    .hdg-gacha__status {
        width: 100%;

        margin-top: 20px;

        box-sizing: border-box;

        font-size: 14px;

        overflow-wrap: anywhere;
    }


    .hdg-gacha.is-multi-start
    .hdg-gacha__status {
        font-size: 16px;
    }


    /* =================================================
       Action Buttons
    ================================================= */

    .hdg-gacha__actions {
        width: 100%;
        max-width: 100%;

        margin-top: 18px;

        box-sizing: border-box;
    }


    .hdg-gacha__button {
        width: 100%;
        max-width: 100%;

        min-width: 0;
        min-height: 62px;

        padding:
            12px
            16px;

        box-sizing: border-box;

        border-radius: 12px;
    }


    .hdg-gacha__button-main {
        font-size: 17px;
    }


    /* =================================================
       Registered Rarities
    ================================================= */

    .hdg-gacha__rarities {
        width: 100%;
        max-width: 100%;

        margin-top: 22px;

        padding:
            15px
            10px;

        box-sizing: border-box;

        overflow: hidden;
    }


    .hdg-gacha__rarity-list {
        display: flex;

        flex-direction: row;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        width: 100%;
        max-width: 100%;

        gap: 8px;

        box-sizing: border-box;
    }


    .hdg-gacha__rarity {
        display: inline-flex;

        flex:
            0 0 auto;

        flex-direction: row;

        align-items: center;
        justify-content: center;

        width: auto;
        max-width: 100%;

        gap: 6px;

        padding:
            7px
            10px;

        box-sizing: border-box;

        white-space: nowrap;

        writing-mode:
            horizontal-tb;
    }


    .hdg-gacha__rarity strong,
    .hdg-gacha__rarity span {
        display: inline-block;

        white-space: nowrap;

        writing-mode:
            horizontal-tb;
    }


    /* =================================================
       Loading
    ================================================= */

    .hdg-gacha__loading {
        min-width: 104px;

        padding:
            8px
            11px;

        font-size: 11px;
    }


    .hdg-gacha__loading-spinner {
        width: 20px;
        height: 20px;

        border-width: 2px;
    }

}
/* =====================================================
   Smartphone Result
===================================================== */

@media screen and (max-width: 480px) {

    /* =================================================
       Result Overlay
    ================================================= */

    .hdg-gacha__result {
        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: flex-start;

        width: 100%;
        height: 100%;

        padding:
            12px
            8px
            24px;

        box-sizing: border-box;

        overflow-x: hidden;
        overflow-y: auto;
    }


    .hdg-gacha__result[hidden] {
        display: none !important;
    }


    .hdg-gacha__result-content {
        flex:
            0 0 auto;

        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin:
            0 auto;

        padding:
            20px
            10px
            18px;

        box-sizing: border-box;

        border-radius: 15px;

        overflow: visible;
    }


    /* =================================================
       Result Heading
    ================================================= */

    .hdg-result-heading {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        box-sizing: border-box;
    }


    .hdg-result-heading__title {
        width: 100%;
        max-width: 100%;

        font-size: 24px;
        line-height: 1.35;

        overflow-wrap: anywhere;

        writing-mode:
            horizontal-tb;
    }


    .hdg-result-heading__rarity {
        max-width: 100%;

        margin-top: 8px;

        padding:
            6px
            12px;

        box-sizing: border-box;

        font-size: 13px;

        white-space: normal;

        writing-mode:
            horizontal-tb;
    }


    .hdg-multi-result-notice {
        width: fit-content;
        max-width: 100%;

        margin:
            -5px auto
            18px;

        padding:
            8px
            14px;

        box-sizing: border-box;

        font-size: 12px;
        line-height: 1.5;

        white-space: normal;

        writing-mode:
            horizontal-tb;
    }


    /* =================================================
       Single Result
    ================================================= */

    .hdg-result-list {
        grid-template-columns:
            minmax(
                0,
                1fr
            );

        width: 100%;
        max-width: 100%;

        gap: 10px;

        box-sizing: border-box;
    }


    /* =================================================
       Multi Result
       10 / 20 Draws
    ================================================= */

    .hdg-result-list--multi {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        width: 100%;
        max-width: 100%;

        gap: 8px;

        box-sizing: border-box;
    }


    /* =================================================
       Result Cards
    ================================================= */

    .hdg-result-card {
        min-width: 0;

        width: 100%;
        max-width: 100%;

        padding: 8px;

        box-sizing: border-box;

        border-radius: 12px;
    }


    .hdg-result-card__rarity {
        min-width: 0;
        max-width: 100%;

        margin-bottom: 8px;

        padding:
            4px
            8px;

        box-sizing: border-box;

        font-size: 11px;

        white-space: nowrap;

        writing-mode:
            horizontal-tb;
    }


    .hdg-result-card__image {
        width: 100%;
        max-width: 100%;

        aspect-ratio:
            1 / 1;

        margin-bottom: 8px;

        box-sizing: border-box;

        border-radius: 8px;
    }


    .hdg-result-card__image img {
        width: 100%;
        max-width: 100%;
        height: 100%;

        object-fit: contain;
    }


    .hdg-result-card__name {
        width: 100%;

        font-size: 13px;
        line-height: 1.4;

        overflow-wrap: anywhere;

        writing-mode:
            horizontal-tb;
    }


    .hdg-result-card__description {
        width: 100%;

        font-size: 11px;
        line-height: 1.5;

        overflow-wrap: anywhere;

        writing-mode:
            horizontal-tb;
    }


    .hdg-result-card__count {
        font-size: 12px;

        writing-mode:
            horizontal-tb;
    }


    /* =================================================
       X Result Share
    ================================================= */

    .hdg-result-share {
        flex:
            0 0 auto;

        width: 100%;
        max-width: 100%;

        margin:
            18px auto
            0;

        padding:
            0
            4px;

        box-sizing: border-box;
    }


    .hdg-result-share__x {
        width: 100%;
        max-width: 320px;

        min-width: 0;
        min-height: 52px;

        padding:
            13px
            18px;

        box-sizing: border-box;

        font-size: 15px;

        white-space: normal;

        writing-mode:
            horizontal-tb;
    }


    .hdg-result-share__x::before {
        margin-right: 8px;

        font-size: 19px;
    }


    /* =================================================
       Result Close
    ================================================= */

    .hdg-gacha__result-close {
        display: inline-flex;

        flex:
            0 0 auto;

        align-items: center;
        justify-content: center;

        width:
            calc(
                100% - 8px
            );

        max-width: 320px;

        min-width: 0;

        margin:
            12px auto
            24px;

        padding:
            13px
            18px;

        box-sizing: border-box;

        font-size: 14px;

        white-space: normal;

        writing-mode:
            horizontal-tb;
    }

}


/* =====================================================
   Very Small Smartphone
===================================================== */

@media screen and (max-width: 360px) {

    .hdg-gacha {
        padding:
            14px
            8px;
    }


    .hdg-gacha__stage {
        padding:
            25px
            5px
            18px;
    }


    /* =================================================
       Roulette - Small Screen Perfect Circle
    ================================================= */

    .hdg-gacha__roulette-wrap {
        width:
            min(
                260px,
                calc(100vw - 54px)
            );

        height: auto;

        aspect-ratio:
            1 / 1;
    }


    .hdg-gacha__roulette {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        aspect-ratio:
            1 / 1;

        border-radius: 50%;
    }


    .hdg-gacha__roulette-center {
        width: 88px;
        height: 88px;

        aspect-ratio:
            1 / 1;

        border-radius: 50%;
    }


    .hdg-gacha__roulette-label {
        font-size: 15px;
    }


    /* =================================================
       Rarity
    ================================================= */

    .hdg-gacha__rarity-list {
        gap: 6px;
    }


    .hdg-gacha__rarity {
        min-width: 0;

        padding:
            6px
            8px;

        gap: 5px;

        font-size: 11px;
    }


    .hdg-gacha__rarity strong {
        font-size: 12px;
    }


    /* =================================================
       Result
    ================================================= */

    .hdg-gacha__result {
        padding:
            8px
            5px
            20px;
    }


    .hdg-gacha__result-content {
        padding:
            18px
            7px
            16px;
    }


    .hdg-result-list--multi {
        gap: 6px;
    }


    .hdg-result-card {
        padding: 6px;
    }


    .hdg-result-card__name {
        font-size: 12px;
    }


    .hdg-result-share {
        padding: 0;
    }

}


/* =====================================================
   Reduced Motion
===================================================== */

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

    .hdg-gacha *,
    .hdg-gacha *::before,
    .hdg-gacha *::after,
    .hdg-gacha__result *,
    .hdg-gacha__result *::before,
    .hdg-gacha__result *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}