/*
 * SUNIVA WORLD
 * プランター状態表示
 */

#sunivaScopeFlowers button {
    position: relative;
    display: grid !important;
    grid-template-rows: 58px auto auto;
    align-items: center;
    justify-items: center;
    min-width: 88px;
    min-height: 132px;
    padding: 12px 7px 10px !important;
    overflow: visible !important;
    color: #665f58 !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(250, 247, 241, .98)
        ) !important;
}

#sunivaScopeFlowers button i {
    display: grid !important;
    place-items: center;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    border: 1px solid rgba(181, 153, 95, .28);
    border-radius: 50% 50% 44% 44% !important;
    color: #fff;
    font-size: 28px !important;
    font-style: normal;
    line-height: 1;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, .15);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .76),
        0 7px 16px rgba(65, 51, 27, .12);
}

#sunivaScopeFlowers button small {
    display: block !important;
    margin-top: 5px;
    color: #4f4944 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25;
}

#sunivaScopeFlowers .suniva-planter-state {
    display: block;
    min-height: 16px;
    margin-top: 3px;
    color: #8d857c;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

#sunivaScopeFlowers button.is-empty {
    border-style: dashed !important;
    border-color: rgba(155, 143, 127, .25) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .92),
            rgba(247, 244, 239, .88)
        ) !important;
}

#sunivaScopeFlowers button.is-empty i {
    border: 1px dashed rgba(142, 132, 118, .42) !important;
    color: #aaa095 !important;
    background:
        linear-gradient(
            180deg,
            #f8f5f0,
            #e8e1d8
        ) !important;
    box-shadow:
        inset 0 -10px 18px rgba(171, 156, 136, .09);
    text-shadow: none;
}

#sunivaScopeFlowers button.is-own-empty {
    border-color: rgba(190, 145, 47, .68) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255, 252, 241, .98),
            rgba(255, 245, 215, .96)
        ) !important;
}

#sunivaScopeFlowers button.is-own-empty i {
    color: #a97a21 !important;
    border: 1px solid rgba(202, 157, 55, .58) !important;
    background:
        linear-gradient(
            180deg,
            #fff8df,
            #f4dfaa
        ) !important;
    animation:
        sunivaOwnPlanterGlow 2.4s
        ease-in-out infinite;
}

#sunivaScopeFlowers button.is-own-empty
.suniva-planter-state {
    color: #9b7125;
    font-weight: 800;
}

#sunivaScopeFlowers button.has-flower {
    border-style: solid !important;
    border-color: rgba(190, 151, 67, .34) !important;
}

#sunivaScopeFlowers button.stage-seed i {
    font-size: 22px !important;
}

#sunivaScopeFlowers button.stage-sprout i,
#sunivaScopeFlowers button.stage-two-leaves i,
#sunivaScopeFlowers button.stage-stem i {
    font-size: 27px !important;
}

#sunivaScopeFlowers button.stage-bud i {
    font-size: 24px !important;
}

#sunivaScopeFlowers button.stage-bloom i {
    font-size: 31px !important;
    box-shadow:
        0 0 0 5px rgba(255, 240, 183, .25),
        0 10px 22px rgba(201, 154, 60, .24);
}

#sunivaScopeFlowers button.stage-bloom
.suniva-planter-state {
    color: #a97925;
    font-weight: 800;
}

#sunivaScopeFlowers
button[data-scope-flower="gold"].has-flower i {
    background: linear-gradient(180deg, #f5dc75, #bd8b16) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="blue"].has-flower i {
    background: linear-gradient(180deg, #86b7ff, #3d68bd) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="aqua"].has-flower i {
    background: linear-gradient(180deg, #a6eff8, #45b8c7) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="orange"].has-flower i {
    background: linear-gradient(180deg, #ffc37d, #df7b1d) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="green"].has-flower i {
    background: linear-gradient(180deg, #b8e6a5, #5aa74d) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="red"].has-flower i {
    background: linear-gradient(180deg, #f27e78, #c93635) !important;
}

#sunivaScopeFlowers
button[data-scope-flower="purple"].has-flower i {
    background: linear-gradient(180deg, #d5a8f2, #8950b8) !important;
}

@keyframes sunivaOwnPlanterGlow {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(209, 169, 73, .12);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(209, 169, 73, .12);
    }
}

@media (max-width: 560px) {
    #sunivaScopeFlowers {
        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
        gap: 9px !important;
        overflow: visible !important;
    }

    #sunivaScopeFlowers button {
        min-width: 0;
        min-height: 116px;
        grid-template-rows: 48px auto auto;
        padding: 9px 4px 8px !important;
    }

    #sunivaScopeFlowers button i {
        width: 46px !important;
        height: 46px !important;
        font-size: 23px !important;
    }

    #sunivaScopeFlowers button small {
        font-size: 12px !important;
    }

    #sunivaScopeFlowers .suniva-planter-state {
        font-size: 9px;
    }
}

/* SUNIVA planter icon centering 20260730-02 */
#sunivaScopeFlowers button > i {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
    translate: none !important;
    transform: none !important;
    transform-origin: center center !important;
}

#sunivaScopeFlowers button.stage-seed > i {
    width: 50px !important;
    height: 50px !important;
    margin: 2px auto 0 !important;
}

#sunivaScopeFlowers button > small,
#sunivaScopeFlowers button >
.suniva-planter-state {
    width: 100%;
    text-align: center !important;
    justify-self: stretch !important;
}

/* SUNIVA planter width and seed fix 20260730-03 */
#sunivaScopeSheetBody {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

#sunivaScopeFlowers {
    display: grid !important;
    grid-template-columns:
        repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

#sunivaScopeFlowers button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#sunivaScopeFlowers
button.stage-seed > i {
    transform:
        translateX(-4px) !important;
}

#sunivaScopeFlowerMessage {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
}

.suniva-scope-sheet__body,
.suniva-scope-sheet__body > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* SUNIVA safe message width 20260730-05 */
html body #sunivaScopeFlowerMessage {
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

/* SUNIVA seven color planter frames 20260730-06 */

/* 内側の丸を消し、外枠をプランターとして見せる */
html body #sunivaScopeFlowers button.is-empty > i {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 自分色の空プランターだけ＋を表示 */
html body
#sunivaScopeFlowers
button.is-own-empty > i {
    color: currentColor !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    animation: none !important;
}

/* 種は大きな丸ではなく、小さな一粒にする */
html body
#sunivaScopeFlowers
button.stage-seed > i {
    width: 20px !important;
    height: 20px !important;
    margin: 14px auto 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}

/* 金 */
html body #sunivaScopeFlowers
button[data-scope-flower="gold"] {
    color: #a77b17 !important;
    border-color: rgba(196, 149, 43, .72) !important;
}

/* 青 */
html body #sunivaScopeFlowers
button[data-scope-flower="blue"] {
    color: #3f69bc !important;
    border-color: rgba(68, 111, 193, .70) !important;
}

/* 水色 */
html body #sunivaScopeFlowers
button[data-scope-flower="aqua"] {
    color: #38aebe !important;
    border-color: rgba(65, 183, 198, .70) !important;
}

/* 橙 */
html body #sunivaScopeFlowers
button[data-scope-flower="orange"] {
    color: #d7791f !important;
    border-color: rgba(221, 126, 36, .72) !important;
}

/* 緑 */
html body #sunivaScopeFlowers
button[data-scope-flower="green"] {
    color: #4d9b48 !important;
    border-color: rgba(83, 159, 75, .70) !important;
}

/* 赤 */
html body #sunivaScopeFlowers
button[data-scope-flower="red"] {
    color: #ce4440 !important;
    border-color: rgba(210, 69, 65, .72) !important;
}

/* 紫 */
html body #sunivaScopeFlowers
button[data-scope-flower="purple"] {
    color: #8750b1 !important;
    border-color: rgba(139, 82, 181, .70) !important;
}

/* 色名も担当色で表示 */
html body #sunivaScopeFlowers
button[data-scope-flower] > small {
    color: currentColor !important;
}

/* 空は淡く、種や成長中ははっきり */
html body #sunivaScopeFlowers button.is-empty {
    background:
        rgba(255, 255, 255, .62) !important;
    border-width: 1.5px !important;
}

html body #sunivaScopeFlowers button.has-flower {
    background:
        rgba(255, 255, 255, .94) !important;
    border-width: 2px !important;
}

/* 選択中だけやさしく発光 */
html body #sunivaScopeFlowers button.is-selected {
    transform: translateY(-2px) !important;
    box-shadow:
        0 9px 22px rgba(84, 67, 39, .13),
        inset 0 0 0 1px rgba(255, 255, 255, .85)
        !important;
}