/*
 * SUNIVA WORLD
 * 七色円形花壇
 * 中央の成長花＋周囲7色プランター
 */

html body #sunivaScopeFlowers {
    --suniva-central-image:
        url("/html/img/suniva-world/flowers/flower-central-map-seed.png");

    position: relative !important;
    display: block !important;
    width: min(100%, 620px) !important;
    max-width: 620px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 10px auto 26px !important;
    overflow: visible !important;
    isolation: isolate;
    border: 0 !important;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 247, 215, .60) 0%,
            rgba(255, 239, 185, .18) 33%,
            transparent 63%
        ) !important;
}

/* 中央の平均成長花 */
html body #sunivaScopeFlowers::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 43%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    background-image:
        var(--suniva-central-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter:
        drop-shadow(
            0 15px 20px
            rgba(69, 48, 19, .20)
        )
        drop-shadow(
            0 0 18px
            rgba(255, 210, 105, .30)
        );
    transform:
        translate(-50%, -50%);
    transition:
        opacity .35s ease,
        filter .35s ease;
}

/* 中央の光の輪 */
html body #sunivaScopeFlowers::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 46%;
    aspect-ratio: 1 / 1;
    border:
        1px solid
        rgba(216, 173, 72, .36);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(255, 250, 220, .36),
            rgba(255, 225, 143, .10) 56%,
            transparent 72%
        );
    box-shadow:
        0 0 28px
        rgba(224, 181, 77, .20);
    transform:
        translate(-50%, -50%);
}

/* 7色プランター共通 */
html body
#sunivaScopeFlowers
button[data-scope-flower] {
    position: absolute !important;
    z-index: 3 !important;
    display: block !important;
    width: 24% !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 50% !important;
    outline: 0;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        transform .22s ease,
        filter .22s ease !important;
    -webkit-tap-highlight-color:
        transparent;
}

html body
#sunivaScopeFlowers
button[data-scope-flower]:active {
    transform:
        scale(.95) !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower].is-selected {
    transform:
        translateY(-3px)
        scale(1.04) !important;
    filter:
        drop-shadow(
            0 0 14px
            rgba(225, 181, 70, .54)
        );
}

/* プランター内の成長画像 */
html body
#sunivaScopeFlowers
button[data-scope-flower] > i {
    position: absolute !important;
    inset: -4% !important;
    z-index: 2 !important;
    display: block !important;
    width: 108% !important;
    height: 108% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    pointer-events: none;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 色名 */
html body
#sunivaScopeFlowers
button[data-scope-flower] > small {
    position: absolute !important;
    right: 13% !important;
    bottom: 5% !important;
    left: 13% !important;
    z-index: 5 !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 3px 5px !important;
    border:
        1px solid
        rgba(214, 180, 103, .42);
    border-radius: 999px;
    color: #5d4b32 !important;
    font-size: clamp(8px, 2.3vw, 12px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    background:
        rgba(255, 252, 244, .86) !important;
    box-shadow:
        0 3px 9px
        rgba(53, 39, 19, .09);
    pointer-events: none;
    backdrop-filter:
        blur(5px);
}

/* 状態文字は画面から隠し、aria-labelで保持 */
html body
#sunivaScopeFlowers
.suniva-planter-state {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* 自分の空鉢に＋を表示 */
html body
#sunivaScopeFlowers
button.is-own-empty::after {
    content: "＋";
    position: absolute;
    top: 42%;
    left: 50%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border:
        1px solid
        rgba(192, 145, 42, .62);
    border-radius: 50%;
    color: #9a6e17;
    font-size: 18px;
    line-height: 1;
    background:
        rgba(255, 251, 231, .90);
    box-shadow:
        0 0 16px
        rgba(232, 186, 73, .34);
    transform:
        translate(-50%, -50%);
}

/* 円形配置 */
html body
#sunivaScopeFlowers
button[data-scope-flower="gold"] {
    top: 0 !important;
    left: 38% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="blue"] {
    top: 13% !important;
    left: 4% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="aqua"] {
    top: 13% !important;
    right: 4% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="orange"] {
    top: 45% !important;
    right: -1% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="green"] {
    right: 13% !important;
    bottom: 1% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="red"] {
    bottom: -2% !important;
    left: 38% !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="purple"] {
    bottom: 1% !important;
    left: 13% !important;
}

/* 空プランター画像 */
html body
#sunivaScopeFlowers
button[data-scope-flower="gold"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-gold-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="blue"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-blue-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="aqua"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-lightblue-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="orange"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-orange-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="green"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-green-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="red"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-red-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="purple"].is-empty {
    background-image:
        url("/html/img/suniva-world/planters/planter-purple-empty.png") !important;
}

/* 成長中も下層に空プランター画像を配置 */
html body
#sunivaScopeFlowers
button[data-scope-flower="gold"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-gold-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="blue"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-blue-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="aqua"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-lightblue-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="orange"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-orange-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="green"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-green-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="red"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-red-empty.png") !important;
}

html body
#sunivaScopeFlowers
button[data-scope-flower="purple"].has-flower {
    background-image:
        url("/html/img/suniva-world/planters/planter-purple-empty.png") !important;
}

/* 虹完成 */
html.is-suniva-rainbow-flower
body #sunivaScopeFlowers {
    --suniva-central-image:
        url("/html/img/suniva-world/flowers/flower-central-rainbow-bloom.png");
}

html.is-suniva-rainbow-flower
body #sunivaScopeFlowers::before {
    width: 49%;
    filter:
        drop-shadow(
            0 18px 24px
            rgba(70, 45, 15, .22)
        )
        drop-shadow(
            0 0 26px
            rgba(255, 207, 82, .62)
        );
}

@media (max-width: 560px) {
    html body #sunivaScopeFlowers {
        width: min(100%, 390px) !important;
        margin-top: 4px !important;
        margin-bottom: 20px !important;
    }

    html body
    #sunivaScopeFlowers
    button[data-scope-flower] {
        width: 25% !important;
    }

    html body
    #sunivaScopeFlowers
    button[data-scope-flower] > small {
        right: 16% !important;
        bottom: 3% !important;
        left: 16% !important;
        padding: 2px 3px !important;
    }

    html body
    #sunivaScopeFlowers
    button.is-own-empty::after {
        width: 22px;
        height: 22px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body
    #sunivaScopeFlowers
    button[data-scope-flower] {
        transition: none !important;
    }
}