/* SUNIVA_WORLD_GROWTH_HUD_V2_20260909
 * 上部は薄い72px。右は行動SUNの数値。仮Lvは出さない。左右20px。
 */
html body #sunivaWorldMapMode {
    --hud-gutter: 20px;
}

html body #sunivaWorldMapMode .sworld-map-header,
html body #sunivaWorldMapMode .sworld-map-pass,
html body #sunivaWorldMapMode .sworld-map-pass__main,
html body #sunivaWorldMapMode .sworld-map-brand {
    display: none !important;
}

html body #sunivaWorldMapMode .sworld-growth-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    inset: auto 0 auto 0 !important;
    z-index: 1220 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(72px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) var(--hud-gutter) 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: linear-gradient(
        180deg,
        rgba(255, 252, 247, .55) 0%,
        rgba(255, 252, 247, .18) 62%,
        rgba(255, 252, 247, 0) 100%
    ) !important;
    box-shadow: none !important;
}

html body #sunivaWorldMapMode .sworld-growth-header.is-level-ready {
    height: auto !important;
    min-height: calc(72px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 8px !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__main {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: auto !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: rgba(239, 230, 210, .8) !important;
    box-shadow: none !important;
}

html body #sunivaWorldMapMode .sworld-growth-header.is-level-ready .sworld-growth-header__photo {
    grid-row: 1 / span 2 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__who {
    grid-column: 2 !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__name-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    min-width: 0 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__name {
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #2b3a44 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__lv,
html body #sunivaWorldMapMode .sworld-growth-header__bar,
html body #sunivaWorldMapMode .sworld-growth-header__next {
    display: none !important;
}

html body #sunivaWorldMapMode .sworld-growth-header.is-level-ready .sworld-growth-header__lv {
    display: inline !important;
    flex-shrink: 0 !important;
    color: #8a6a28 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header.is-level-ready .sworld-growth-header__bar {
    display: block !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__bar {
    position: relative !important;
    height: 3px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(196, 160, 86, .22) !important;
}

html body #sunivaWorldMapMode .sworld-growth-header__fill {
    display: block !important;
    height: 100% !important;
    width: var(--sworld-level-progress, 0%) !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    background: #c4a056 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header .sworld-map-balance,
html body #sunivaWorldMapMode > .sworld-growth-header .sworld-map-balance {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 3 !important;
    display: grid !important;
    justify-items: end !important;
    gap: 1px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

html body #sunivaWorldMapMode .sworld-growth-header .sworld-map-balance .sworld-map-pass__sun,
html body #sunivaWorldMapMode .sworld-growth-header .sworld-map-pass__ledger {
    display: none !important;
}

html body #sunivaWorldMapMode .sworld-growth-header .sworld-growth-sun small {
    display: block !important;
    color: #8a6a28 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
}

html body #sunivaWorldMapMode .sworld-growth-header .sworld-map-balance > span {
    color: #6a5a38 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body #sunivaWorldMapMode .sworld-growth-header .sworld-growth-sun__amount {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6a5a38 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

html body #sunivaWorldMapMode .sworld-growth-header #sunivaWorldSunBalance {
    margin: 0 !important;
    color: #2b3a44 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* 上部SCOPEチップは成長ヘッダーと重なるため隠す。SCOPEハンドルは残す。 */
html body #sunivaWorldMapMode > .sworld-scope-open {
    display: none !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow {
    position: absolute !important;
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    left: var(--hud-gutter) !important;
    right: var(--hud-gutter) !important;
    z-index: 1210 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow
#sunivaPortalNavigator.suniva-portal-navigator,
html body #sunivaWorldMapMode #sunivaPortalNavigator.suniva-portal-navigator[hidden] {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: min(228px, calc(100% - 72px)) !important;
    max-width: calc(100% - 72px) !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 10px 12px 8px !important;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, .86) !important;
    border-radius: 18px !important;
    background: rgba(255, 252, 247, .94) !important;
    box-shadow: 0 6px 14px rgba(30, 67, 74, .12) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    pointer-events: auto !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator:not(.is-nearby) {
    grid-template-columns: minmax(0, 1fr) !important;
    flex: 0 1 260px !important;
    width: 260px !important;
    min-width: 220px !important;
    max-width: calc(100% - 52px) !important;
}

html body #sunivaWorldMapMode #sunivaPortalNavigator:not(.is-nearby)
#sunivaPortalPrevious,
html body #sunivaWorldMapMode #sunivaPortalNavigator:not(.is-nearby)
#sunivaPortalNext {
    display: none !important;
}

html body #sunivaWorldMapMode .suniva-portal-navigator__arrow {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(196, 160, 86, .12) !important;
    color: #2b3a44 !important;
    font-size: 20px !important;
}

html body #sunivaWorldMapMode .suniva-portal-navigator__summary {
    min-width: 0 !important;
    padding: 0 4px !important;
    background: transparent !important;
    color: #2b3a44 !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
}

html body #sunivaWorldMapMode .suniva-portal-navigator__summary span {
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #8a6a28 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body #sunivaWorldMapMode .suniva-portal-navigator__summary strong {
    display: block !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    color: #2b3a44 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow #sunivaTreasureCompass {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    pointer-events: auto !important;
}

html body #sunivaWorldMapMode #sunivaCompassButton {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    overflow: hidden !important;
}

html body #sunivaWorldMapMode #sunivaCompassTarget,
html body #sunivaWorldMapMode #sunivaCompassDistance,
html body #sunivaWorldMapMode #sunivaCompassGuide {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
}

/* SUNIVA_REMOVE_CAN_DO_V1_20260910 */
html body #sunivaWorldMapMode .suniva-portal-navigator__summary {
    cursor: pointer !important;
}

html body #sunivaWorldMapMode .sworld-can-do,
html body #sunivaWorldMapMode #sunivaCanDo {
    position: absolute !important;
    left: var(--hud-gutter) !important;
    right: auto !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 910 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    width: calc(100% - (var(--hud-gutter) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 255, 255, .86) !important;
    border-radius: 18px !important;
    background: rgba(255, 252, 247, .94) !important;
    box-shadow: 0 6px 16px rgba(30, 67, 74, .12) !important;
}

html body #sunivaWorldMapMode .sworld-can-do small {
    display: block !important;
    color: #8a6a28 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}

html body #sunivaWorldMapMode .sworld-can-do strong {
    display: block !important;
    margin-top: 3px !important;
    overflow-wrap: anywhere !important;
    color: #2b3a44 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

html body #sunivaWorldMapMode .sworld-can-do button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #2a9a74 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

html body #sunivaWorldMapMode .sworld-can-do[data-kind="locate"] button,
html body #sunivaWorldMapMode .sworld-can-do[data-kind="search"] button {
    background: #c4a056 !important;
}

html body #sunivaWorldMapMode .sworld-map-nav {
    left: var(--hud-gutter) !important;
    right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: calc(100% - (var(--hud-gutter) * 2)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

@media (min-width: 900px) {
    html body #sunivaWorldMapMode {
        --hud-gutter: 24px;
    }
    html body #sunivaWorldMapMode .sworld-can-do {
        left: 50% !important;
        right: auto !important;
        width: min(720px, calc(100% - 48px)) !important;
        max-width: min(720px, calc(100% - 48px)) !important;
        transform: translateX(-50%) !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    html body #sunivaWorldMapMode .sworld-can-do button {
        width: auto !important;
        min-width: 148px !important;
    }
}

/* compact.css last-block と同じ子セレクタで上書きする */
html body #sunivaWorldMapMode > #sunivaMapUtilityRow {
    display: flex !important;
    grid-template-columns: none !important;
    height: auto !important;
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    left: var(--hud-gutter) !important;
    right: var(--hud-gutter) !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator {
    display: grid !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator:not(.is-nearby) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(260px, 100%) !important;
    min-width: 220px !important;
}

html body #sunivaWorldMapMode > .sworld-growth-header > .sworld-map-balance,
html body #sunivaWorldMapMode > .sworld-growth-header > [data-suniva-sun-history] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    z-index: 3 !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: 48% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #sunivaWorldMapMode > .sworld-map-nav {
    left: var(--hud-gutter) !important;
    right: auto !important;
    width: calc(100% - (var(--hud-gutter) * 2)) !important;
    max-width: none !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html body #sunivaWorldMapMode > .sworld-map-nav button,
html body #sunivaWorldMapMode > .sworld-map-nav a {
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    color: inherit !important;
    text-decoration: none !important;
}

html body #sunivaWorldMapMode > .sworld-map-nav small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}